Javascript 重复包含json数据的附加html

这对我来说是一个学习练习，所以请原谅我将要介绍的代码。我相信会更好。在下面的代码中，您将看到我已成功创建了一个变量，该变量正在拉入格式正确的JSON数据。然后，我正在创建一个附加html块的函数。在这个附加中，我引用了要显示的特定JSON数据片段

HTML

Javascript

var json = (function () {
            var json = null;
            $.ajax({
                'async': false,
                'global': false,
                'url': "../data/jobSearchResults.json",
                'dataType': "json",
                'success': function (data) {
                    json = data;
                }
            });
            return json;
        })(); 

$(jobSearchResults).each(function(index, element){
  $('#jobSearchResults').append('<tr><th><div style="background-color:#ddd;height:55px;width:80px;"><img src="" style="height:55px;width:80px;"></div></th><td><h4 style="margin-top: 0;margin-bottom: 2px;font-size: 16px;"> '+json[0].job_header+' </h4> '+json[0].specialty_name+', '+json[0].facility_name+' </td><td><h4 style="margin-top: 0;margin-bottom: 2px;font-size: 16px;"> '+json[0].city+',  '+json[0].state_name+' </h4> United States </td><td class="text-right"></td></tr>');       
});

var json=（函数（）{
var=null；
$.ajax({
“异步”：false，
“全局”：错误，
“url”：“./data/jobSearchResults.json”，
“数据类型”：“json”，
“成功”：函数（数据）{
json=数据；
}
});
返回json；
})(); 
$（jobSearchResults）。每个（函数（索引，元素）{
$（'#jobSearchResults'）。追加（''+json[0]。作业头+'+json[0]。专业名称+'，'+json[0]。设施名称+'+json[0]。城市+'，'+json[0]。州名称+'United States'）；
});

---

现在，我需要使表行重复X次，并使JSON记录编号随着每一新行的增加而增加，从而使事情变得复杂。在本例中，我既感兴趣的是如何利用我所写的内容并对其进行扩展以包含此新功能，也感兴趣的是，如果我更有效地编写此内容，将以何种更简洁的方式处理此问题。

jQuery的回调函数传递两个值。它们分别表示当前迭代的索引和值。您可以使用其中任何一个来引用原始JSON数据并相应地输出每一行

$.each（）函数可用于迭代任何集合，无论它是对象还是数组。对于数组，每次都会向回调传递一个数组索引和相应的数组值

$.each( obj, function( key, value ) {
  alert( key + ": " + value );
});

在下面的示例中，我迭代了

json

变量，该变量包含从AJAX调用返回的json数据。在此上下文中，您可以使用索引引用当前迭代（例如

json[index].job\u header

）或直接使用该值（例如

job.job\u header

）

函数显示数据（json）{
var$resultDisplay=jQuery（“#作业搜索结果tbody”）；
如果（！json）{
//变量为false。出现ajax错误。
$resultDisplay.html（'发生错误'）；
}else if（jQuery.isEmptyObject（json））{
//变量是空对象。未返回任何记录。
$resultDisplay.html（'没有要显示的数据'）；
}否则{
//显示返回的记录。
$resultDisplay.empty（）；
每个（json、函数（索引、作业）{
$resultDisplay.append（“”+
'' +
''+job.job_header+''+job.speciality_name+''，''+job.facility_name+''+
“+job.city+”，“+job.state_name+”美国”+
'');
});
}
}
jQuery.ajax({
“url”：“https://epearson001.github.io/prototype-web-application/assets/data/jobSearchResults.json",
“数据类型”：“json”
})
.完成（功能（数据）{
显示数据（数据）；
})
.fail（函数（）{
显示数据（假）；
});
#作业搜索结果{
边框：1px实心#ddd；
宽度：100%；
背景色：白色；
}
世界其他地区分部{
背景色：#ddd；
高度：55px；
宽度：80px；
}
世界其他地区分区img img{
高度：55px；
宽度：80px；
}
h4{
边际上限：0；
边缘底部：2px；
字体大小：16px；
}

正在加载数据。。。
给出的答案明确地表明了你所要求的正确方法。但如果您同时控制服务器，我会以不同的方式处理此问题。我不会将JSON数据发回，而是将格式化的HTML发回并使用：

$('#jobSearchResults tbody').load('../data/jobSearchResults/')

下面是我目前对JSON数据的处理：您的代码似乎正在运行。在
每个
循环中，可以使用
索引
引用当前迭代的索引，或者使用
元素
直接引用当前值。例如：
json[index].job\u header
或
元素。job\u header
。参见第页的示例。这就是你要问的吗？这里的想法是，如果我想将它扩展到50行数据，我不想在append函数中手动执行。我当然可以，但那太傻了。你的建议似乎方向正确。我将进一步研究这个选项。我刚刚注意到您正在迭代
jobSearchResults
，而不是
json
变量。但也许那只是个打字错误。太好了。这澄清了一些我误解的核心概念。你的编辑将我的思想范围扩展到了回退方法等方面，做得很好。我需要从一开始就更好地将它们融入其中。谢谢我的荣幸。玩一个实时JSON提要总是很有趣的：）Happy Coding感谢这个建议。我肯定会考虑尝试这个方法。不知道你的后端是什么，但是模板化的语言比如Jija的Python是用来创建动态HTML的。我认为你应该让他们做他们擅长的事。让javascript做它擅长的，让服务器语言做它擅长的。如果这样做的话，管理HTML会容易得多。在极少数情况下，我被迫像这样大量使用javascript操作HTML，我通常会创建表格行的空白版本，并将其隐藏在页面上的某个位置。然后我将使用var new_row=$（'#hidden_row_template'）.clone（），模板行将具有类似于它们的标记，我将在类似于new_row.find（'.value1'）.text（json.value1'）.text（json.value1）中生成子值，然后是new_row.appendTo（'#jobSearchResults tbody）
$('#jobSearchResults tbody').load('../data/jobSearchResults/')