Best method to print dynamic data

Hi

Most of my app shows dynamic data using the following method:

  1. Return the data from the server in JSON format.
  2. “Inject” the result using a function returning the “mask” like this:
result.forEach(function(row){
$$('.component').append(customerMask(row));
});

function customerMask(jsonData){
return `<li class="item-content">
            <div class="item-inner">
            <div class="item-title-row">
                <div class="item-title">Name: ${jsonData.customerName}</div>
                <div class="item-after">
                    Age: ${jsonData.age}
                </div>
            </div>
            <div class="item-text">Address: ${jsonData.address}</div>
        </div>
    </li>`
}

It works just fine and it’s easy and fast to get things done but I’m wondering if this is the best way to do this or I just should be using another better/faster method for this.

I’ve tried VUE but to be honest I didn’t see much of benefits in use it.

Any advise is appreciated.

Thanks
Carlos

1 Like

If you comfortable with such approach, nothing bad with it, just go with it. And manually adding items to DOM probably is the most performant way anyway

1 Like