Fill an HTML template with mysql data and append the item to the view with Javasript

Question

I'm struggling with a problem. I need to make an about us page for a website. I use a template for the page and i want to fill the template with MySQL data. I use a

I want to add cards to the view filled with data from MySQL here is my javascript code:

addPerson(aboutUsView, personData) {
        const scriptTagAboutUsTemplate = $("#aboutUsTemplate", aboutUsView);
        const aboutUsTemplateTarget = $("#personLocation", aboutUsView);

        for (let i = 0; i < personData.length; i++) {
            const aboutUsTemplate = $(scriptTagAboutUsTemplate[0].text);
            const person = personData[i];


            aboutUsTemplate.find("#personName").text(person.name);
            aboutUsTemplate.find("#personJob").text(person.job);
            aboutUsTemplate.find("#personPicture").attr("src", person.picture);


            aboutUsTemplateTarget.append(aboutUsTemplate);
        }
    }

an issue I'm struggling with is that in the javascript line:

const aboutUsTemplate = $(scriptTagAboutUsTemplate[0].text);

is being readed as undefined, so the whole page doesn't load. Does anyone know what my problem is?

user_2527458 · Answer

You need create a template class, pass your HTML to it and fill variables with data from database. Read my example carefully to understand how do it.

class EmailTemplate
{

    protected $_file;

    protected $_data = array();

    public function __construct($file = null)
    {
        $this->_file = $file;
    }

    public function set($key, $value)
    {
        $this->_data[$key] = $value;
        return $this;
    }

    public function render()
    {
        extract($this->_data);
        ob_start();
        include ($this->_file);
        return ob_get_clean();
    }
}

// get $token from database
$template = new EmailTemplate('email-confirmation.php');
$template->set('id', $token);
$html = $template->render();

// echo $html or use it anywhere you want

email-confirmation.php is something like below:





  
  
  Email Confirmation

Fill an HTML template with mysql data and append the item to the view with Javasript

1 Answers