Is there a better way to bind data to the divs?

Question

I'm getting JSON data from the API, like this

data = {
  q: 'sugar',
  from: 0,
  to: 10,
  params: {
    sane: [],
    q: [ 'sugar' ]
  },
  more: true,
  count: 1000,
  hits: [{
    recipe: {
      uri: 'http://www.edamam.com/ontologies/edamam.owl#recipe_a46ae0ad4f8320fa6285b25fc7b36432',
      label: 'Bread Pudding with Apple and Brown Sugared Bacon',
      image: 'https://www.edamam.com/web-img/1ae/1ae111af3737d42e9d743445f5605373.JPG   '
    }, 
    recipe: {
      uri: 'http://www.edamam.com/ontologies/edamam.owl#recipe_a36b51f50f102bf5da228af55d2ce040',
      label: 'Vanilla sugar',
      image: 'https://www.edamam.com/web-img/4fd/4fdd2336043aa81dd05a4b6a08934402.jpg',     
    }
  }]
}

And I try to bind the recipe to divs. For example, there is a div with the id columns, Here is that piece of codes.

var list = data.hits;
function Builddivs(list) {
  var array = new Array(0);
  var count = list.length;
  for (var i = 0; i < 10; i++) {
    var p = list[i];
    title = p.recipe.label;
    imgurl = p.recipe.image;
    href = p.recipe.url;
    array.push("<div class='pin'><a href='" + href + "'><img src='" + imgurl + "'/></a><p>" + title + "</p> </div>");
  }

  var html = array.join("");
  $("#columns").html(html);
}

The problem is to generate that html takes like several seconds, so is there a better way to do that? like bind the data directly to existing dynamic number of divs? Thanks!

Answer 1

Instead of generating a lot of HTML at once, it would be more efficient to edit existing HTML.

Example jsfiddle solution to this question

Editing HTML with jQuery

You can replace or add text or HTML to a div:

$(selector).html('Try <span class="red">this!</span>');
$(selector).text('Just add some text');
$(selector).append('Some HTML');

Adding src to an image or adding href to a link:

$(selector).attr('src','http://example.com/someimage.jpg');
$(selector).attr('href','http://example.com');

Instead of using a for loop, you could use javascript Array.forEach or jquery $.each

Generating HTML for the first time

On every run (every time the list changes) you can check if the HTML element to be edited exists. If not, then you can generate the appropriate HTML. On the first run of the code, the HTML would then be generated for every element from the list. See this question to see how to check if elements exist: How do you check if a selector matches something in jQuery?

Example

Here is a working jsfiddle with an example of how HTML can be edited using $().attr and $().html: https://jsfiddle.net/fyux250p/1/

Answer 2

 var hitsContent =""
 (list || []).forEach(function(data,index){
    hitsContent += "<div class='pin'><a href='" + data.url + "'><img src='" + data.url + "'/></a><p>" + data.label + "</p> </div>";
 })
 $("#columns").html(hitsContent);