使用JavaScript中的for循环在div中显示JSON数据

Question

我在我的代码中遗漏了一些东西，因为我想在一个div显示JSON数据，在初始加载页面时#searchcontainer ，但我得到的只是一个空div 。

var Sites = [
{"country_name": "Denmark", "latitude": 56, "longitude": 10, "status": "OK", "site_name": "FLS Denmark", "Model_Number": "12345"},
{ "country_name": "Zaire", "latitude": -20, "longitude": 30, "status": "OK", "site_name": "FLS Zaire", "Model_Number": "67890" },
{ "country_name": "Vietnam", "latitude": 16, "longitude": 106, "status": "NO", "site_name": "FLS Vietnam", "Model_Number": "1111" }]

var DefaultText = "";
var i;

for (i = 0; i < Sites.length; i++)
{
DefaultText += '<div class="rightcontainer">';
DefaultText += '<img id="productimage" src="src/images/retrofit.png" onclick="DisplayProfileCard();"/>';
DefaultText += '<div id="imagedetail">';

DefaultText += '<span class="details">Product Type:'+ Sites[index].Model_Number +'</span>';
DefaultText += '<span class="details">Version / Size <img class="row_one_icon lightbulb_icon" id="lightbulb" src="src/images/lightbulb1.png" onClick="LightBulb()" /><img id="convert" class="row_one_icon arrow_icon" src="src/images/arrow_Off.png" onClick="Conversion()"/><img id="lightning" class="row_one_icon" src="src/images/lightningOff.png" onClick="Lightning()"/><img id="bullseye" class="row_one_icon bullseye" src="src/images/bullseye_off.png" onClick="BullsEye()"/></span>';
DefaultText += '<span class="details">Estimated annual Spend <img class="row_one_icon ribbon" src="src/images/ribbon1.png"/><img class="row_one_icon map" src="src/images/map1.png"/><img class="row_one_icon paper_stack" id="paper" src="src/images/paper_stack_Off.png" onclick="PaperStack()"/><img class="row_one_icon chain" id="chain" src="src/images/chain_Off.png" onClick="ChainLink()"/></span>';
DefaultText += '<span class="details">Site name / manufacturer</span>';
DefaultText += '<span class="details">Selling Sales Eng</span>';
DefaultText += '</div>';
DefaultText += '</div>';
}
$('#searchcontainer').append(DefaultText);

Answer 1

使用Sites[i].Model_Number而不是Sites[index].Model_Number 。

Answer 2

Index未定义one.use与i 。使用document.ready更好的包装代码。在文档加载后执行该功能

 $(document).ready(function(){ var Sites = [ {"country_name": "Denmark", "latitude": 56, "longitude": 10, "status": "OK", "site_name": "FLS Denmark", "Model_Number": "12345"}, { "country_name": "Zaire", "latitude": -20, "longitude": 30, "status": "OK", "site_name": "FLS Zaire", "Model_Number": "67890" }, { "country_name": "Vietnam", "latitude": 16, "longitude": 106, "status": "NO", "site_name": "FLS Vietnam", "Model_Number": "1111" }] var DefaultText = ""; var i; for (i = 0; i < Sites.length; i++) { DefaultText += '<div class="rightcontainer">'; DefaultText += '<img id="productimage" src="src/images/retrofit.png" onclick="DisplayProfileCard();"/>'; DefaultText += '<div id="imagedetail">'; DefaultText += '<span class="details">Product Type:'+ Sites[i].Model_Number +'</span>'; DefaultText += '<span class="details">Version / Size <img class="row_one_icon lightbulb_icon" id="lightbulb" src="src/images/lightbulb1.png" onClick="LightBulb()" /><img id="convert" class="row_one_icon arrow_icon" src="src/images/arrow_Off.png" onClick="Conversion()"/><img id="lightning" class="row_one_icon" src="src/images/lightningOff.png" onClick="Lightning()"/><img id="bullseye" class="row_one_icon bullseye" src="src/images/bullseye_off.png" onClick="BullsEye()"/></span>'; DefaultText += '<span class="details">Estimated annual Spend <img class="row_one_icon ribbon" src="src/images/ribbon1.png"/><img class="row_one_icon map" src="src/images/map1.png"/><img class="row_one_icon paper_stack" id="paper" src="src/images/paper_stack_Off.png" onclick="PaperStack()"/><img class="row_one_icon chain" id="chain" src="src/images/chain_Off.png" onClick="ChainLink()"/></span>'; DefaultText += '<span class="details">Site name / manufacturer</span>'; DefaultText += '<span class="details">Selling Sales Eng</span>'; DefaultText += '</div>'; DefaultText += '</div>'; } $('#searchcontainer').append(DefaultText); }) 

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