CODEWITHSUNDEEP
javascriptjqueryhtmljsonloops
Kabalaba
Kabalaba

Reputation: 63

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

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?

Upvotes: 4

Views: 8561

Answers (7)

Arif H-Shigri
Arif H-Shigri

Reputation: 1136

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>

Upvotes: 1

kidwon
kidwon

Reputation: 4504

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);
});

Upvotes: 6

Fanyo SILIADIN
Fanyo SILIADIN

Reputation: 792

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

Upvotes: 0

user4602228
user4602228

Reputation:

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>"
});

Upvotes: 0

Nope
Nope

Reputation: 22329

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>

Upvotes: 0

Roy Bogado
Roy Bogado

Reputation: 4472

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/

Upvotes: 2

Shantaram Tupe
Shantaram Tupe

Reputation: 1666

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>

Upvotes: 0

Related Questions