How to generate dynamic HTML with jQuery in a loop and a JSON with parameters?

Question

I would like to generate a HTML file out of an JSON in a loop. For example that's the result I want:

<div class="card">
    <p>My name is: Peter</p>
    <!-- another code -->
    <p>My job is: Programmer</p>
    <!-- some more code -->
</div>

<div class="card">
    <p>My name is: John</p>
    <!-- another code -->
    <p>My job is: Programmer</p>
    <!-- some more code -->
</div>

<!-- and so on ... -->

But I want to generate all that HTML (that means: all the "card"-divs) dynamically just out of an simple JSON like:

[
    { "Name": "Peter", "Job": "Programmer" },
    { "Name": "John", "Job": "Programmer" },
    { "Name": "Kevin", "Job": "Scientist" },
]

Unfortunately I'm just learning some JS/jQuery and don't know exactly, how to do that with jQuery in a loop. Anyone some help?

kidwon · Accepted Answer · 2017-01-19 12:36:21Z

6

Try this one:

function createCard(cardData) {
  var cardTemplate = [
    '<div class="card">',
    '<p>My name is: ',
    cardData.Name || 'No name provided',
    '</p>',
    '<p>My job is: ',
    cardData.Job || 'No job provided',
    '</p></div>'
  ];

  // a jQuery node
  return $(cardTemplate.join(''));
}

var data = [
    { "Name": "Peter", "Job": "Programmer" },
    { "Name": "John", "Job": "Programmer" },
    { "Name": "Kevin", "Job": "Scientist" },
];

var cards = $();
// Store all the card nodes
data.forEach(function(item, i) {
  cards = cards.add(createCard(item));
});

// Add them to the page... for instance the <body>
$(function() {
  $('body').append(cards);
});

edited Jan 19, 2017 at 12:36

answered Jan 19, 2017 at 12:06

kidwon

4,5345 gold badges31 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Roy Bogado · Accepted Answer · 2017-01-19 12:20:01Z

2

Take a look.
https://jsfiddle.net/c0w6jbpa/

$.each(arr, function(i){ //Loop the array
   var templateString = '<div class="card"><p>My name is: '+arr[i].Name+'</p><p>My job is: '+arr[i].Job+'</p></div>'; 
   //You can get the prop of array with arr[i].Name
   $('#test').append(templateString);
})

You can use $.each for loop an array.
Link: http://api.jquery.com/jquery.each/

edited Jan 19, 2017 at 12:20

answered Jan 19, 2017 at 12:04

Roy Bogado

4,4721 gold badge18 silver badges36 bronze badges

Comments

Arif H-Shigri · Accepted Answer · 2017-01-19 12:43:38Z

1

Take a look

var jsonData = '[{"Name":"Peter","Job":"Programmer"},{"Name":"John","Job":"Programmer"},{"Name":"Kevin","Job":"Scientist"}]';

UpdateView("#testDiv",jsonData);

function UpdateView(divId,jsonData){
var htmlTemplate = '<div class="card"><p>My name is: {0}</p><!-- another code --><p>My job is: {1}</p><!-- some more code --></div>';
var dataList= JSON.parse(jsonData);
  
var html ="";
dataList.forEach(function(item){
 
var temp = htmlTemplate.replace("{0}",item.Name);
temp =temp.replace('{1}',item.Job);
html += temp; 
 
});
   $(divId).html(html);}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='testDiv'>
  </div>

answered Jan 19, 2017 at 12:43

Arif H-Shigri

1,15613 silver badges27 bronze badges

Comments

Shantaram Tupe · Accepted Answer · 2017-01-19 12:06:05Z

0

This will help you to generate divs :

var data = [
           {"Name":"Peter","Job":"Programmer"},
           {"Name":"John","Job":"Programmer"},
           {"Name":"Kevin","Job":"Scientist"},
          ];
          var divs = "";
for( var i = 0; i < data.length;++i) {

  divs += "<div class='card'>"
			+"<p>My name is: "+data[i].Name+"</p>"
			+"<p>My job is: "+data[i].Job+"</p>"
			+"</div>";
}
$("p").append(divs);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<P> Hi</P>

answered Jan 19, 2017 at 12:06

Shantaram Tupe

1,6664 gold badges17 silver badges44 bronze badges

Comments

Nope · Accepted Answer · 2017-01-19 12:21:29Z

In pure JavaScript, you could use a string template and append the HTML to a container, similar to this.

var jsonData = '[{"Name":"Peter","Job":"Programmer"},{"Name":"John","Job":"Programmer"},{"Name":"Kevin","Job":"Scientist"}]'

var htmlTemplate = '<div class="card"><p>My name is: {0}</p><!-- another code --><p>My job is: {1}</p><!-- some more code --></div>'

var newHtml = ''
var container;
var tempContainer;

data = JSON.parse(jsonData);

var addPeople = function() {
  for (var i = 0; i < data.length; i++) {
    newHtml = htmlTemplate.replace('{0}', data[i].Name).replace('{1}', data[i].Job)

    tempContainer = document.createElement('div');
    tempContainer.innerHTML = newHtml;

    container = document.getElementById('people');
    container.appendChild(tempContainer);
  }
};

document.addEventListener('DOMContentLoaded', addPeople, false);

<div id="people"></div>

Depending on the browser you might need use document.attachEvent("onreadystatechange"...) instead ofdocument.addEventListener` but in jQuery this has been normalized.

In jQuery you can do the following:

var jsonData = '[{"Name":"Peter","Job":"Programmer"},{"Name":"John","Job":"Programmer"},{"Name":"Kevin","Job":"Scientist"}]'
var htmlTemplate = '<div class="card"><p>My name is: {0}</p><!-- another code --><p>My job is: {1}</p><!-- some more code --></div>'
var newHtml = ''
var container;
var tempContainer;

data = JSON.parse(jsonData);

var addPeople = function(){
    for (var i = 0; i < data.length; i++) {
        newHtml = htmlTemplate.replace('{0}', data[i].Name).replace('{1}', data[i].Job)
        
        container = $('#people');
        container.append(newHtml);
    }
};

$('document').ready(function() {
    addPeople();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="people"></div>

score 0 · Accepted Answer · 2017-01-19 12:27:44Z

0

No need for jquery.

cards.forEach(function(card){
     document.body.innerHTML += "<div class='card'><p>My Name is "+card.Name+"</p><p>My Job Is "+card.Job+"</p></div>"
});

edited Jan 19, 2017 at 12:27

answered Jan 19, 2017 at 12:07

user4602228

Comments

Fanyo SILIADIN · Accepted Answer · 2017-01-19 12:32:31Z

0

You better learn how to do it in native javaScript:

JSON.parse(MyJsonArray).forEach(function (person){ document.getElementById("cardParentEl").innerHTML += '

my name is:'+ person.Name +'

my job is:'+ person.Job+'

'; }); As you can see, it's messy.. a better way to dynamically create html, if you have to do it very often in your code is to use template engines

Sorry for indentation, I wrote this on a phone

edited Jan 19, 2017 at 12:32

answered Jan 19, 2017 at 12:25

Fanyo SILIADIN

7925 silver badges11 bronze badges

Collectives™ on Stack Overflow

How to generate dynamic HTML with jQuery in a loop and a JSON with parameters?

7 Answers 7

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related