javascript - 在 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

Index 未定义。与 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>