如何在循环中使用 jQuery 和带参数的 JSON 生成动态 HTML？答案

【问题标题】：How to generate dynamic HTML with jQuery in a loop and a JSON with parameters?如何在循环中使用 jQuery 和带参数的 JSON 生成动态 HTML？
【发布时间】：2017-06-04 02:46:20
【问题描述】：

我想在循环中从 JSON 生成一个 HTML 文件。例如这就是我想要的结果：

<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 ... -->

但我想动态生成所有 HTML（这意味着：所有“卡片”-div），只是从一个简单的 JSON 中动态生成，例如：

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

不幸的是，我只是在学习一些 JS/jQuery，并不确切知道如何在循环中使用 jQuery 来做到这一点。有人帮忙吗？

【问题讨论】：

标签： javascript jquery html json loops

【解决方案1】：

看看吧。
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);
})

您可以使用 $.each 循环一个数组。
链接：http://api.jquery.com/jquery.each/

【讨论】：

【解决方案2】：

这将帮助您生成 div：

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>

【讨论】：

【解决方案3】：

试试这个：

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

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案5】：

在纯 JavaScript 中，您可以使用字符串模板并将 HTML 附加到容器中，类似于此。

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

&lt;div id="people"&gt;&lt;/div&gt;

根据浏览器的不同，您可能需要使用 document.attachEvent("onreadystatechange"...) instead ofdocument.addEventListener`，但在 jQuery 中这已被规范化。

在 jQuery 中，您可以执行以下操作：

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>

【讨论】：

【解决方案6】：

你最好学习如何在原生 javaScript 中做到这一点：

JSON.parse(MyJsonArray).forEach(函数(人){ document.getElementById("cardParentEl").innerHTML += '

我的名字是：'+ person.Name +'

我的工作是：'+ person.Job+'

'; }); 如您所见，它很混乱..如果您必须在代码中经常这样做，那么动态创建 html 的更好方法是使用模板引擎

抱歉缩进，这是我在手机上写的

【讨论】：

【解决方案7】：

看看

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>

【讨论】：