使用javascript显示部分JSON数据

我正在尝试使用JSON将内容打印到屏幕上。我试图打印成两个不同的部分，这样“albumData”在“albumData”div中显示为列，音频设备在页面的下一个div中显示。我曾尝试在JSON数组中使用{audio:[…]}，但似乎从未奏效。现在的问题是，JS文件输出的数据太多，并且当对象不在数组中时不会停止。理想情况下，它会为相册提供4x4布局，为设备提供4x3布局，但两个部分都输出4x7，并且许多文本“未定义”

你们有针对特定JSON数据的技巧吗？谢谢你的帮助

HTML代码：

<h1 class="headText">Wall of Fame</h1>
<hr class="style14"></hr>
</br></br>

<h2>Albums: </h2>
<div id="albumData" class="row"></div>
</br></br>

<h2>Equipment: </h2>
<div id="deviceData" class="row"></div>

<script src="js/wall.js"></script>

---

因为它是一个数组，所以不要对它进行2x解析，而是使用变量

var deviceHtml = "";
var albumHtml = "";
$.each(data, function(index, item){
    if(typeof(item.albumImage) != "undefined" && typeof(item.deviceImage == 'undefined')
    {
        albumHtml += '<div class="col-md-3">'+
         '<img class="albumImage" src=""' + item.albumImage + '"/>' + "<br>" +
         '<div class="albumArtist">' + "<strong>Artist: </strong>" + item.artist + '</div>'+
         '<div class="albumTitle">' + "<strong>Album: </strong>" + item.albumTitle + '</div>'+
           '<div class="albumYear">' + "<strong>Year: </strong>" + item.year + '</div>'+
         '<div class="albumGenre">' + "<strong>Genre: </strong>" + item.genre + '</div></div>';
    }
    else if(typeof(item.deviceImage) != "undefined" && typeof(item.albumImage) == 'undefined')
    {
         deviceHtml += '<div class="col-md-3">'+
         '<img class="deviceImage" src=""' + item.deviceImage + '"/>' + "<br>" +
         '<div class="deviceName">' + "<strong>Name: </strong>" + item.device + '</div>'+
         '<div class="deviceType">' + "<strong>Device: </strong>" + item.type + '</div>'+
         '<div class="deviceCompany">' + "<strong>Company: </strong>" + item.comapny + '</div>'+
         '<div class="devicePrice">' + "<strong>Price: </strong>" + item.price + '</div>';


         deviceHtml += '</div>'; //col-md-3
    }

})//each album

$("#albumData").append(albumHtml);
$("#deviceData").append(device);   

及

---

你想在这个js上使用jquery还是纯js？为什么你的JSON数组有两种对象？？？您应该有一个带有两个键的json对象：

{albums:[]，devices:[]}

@guradio也可以，但首选jquery。@ArnaudGueras我试过做{albums:[]，devices:[]}但是我不知道如何在JS文件中具体调用相册。你能改变你的JSON格式吗？我是说分组所有相册和分组设备，我想这会让你工作起来easy@scappedcola感谢您提供解决此问题的$each（data.albums）和$each（data.devices）技巧。我只是不确定如何在JSON文件中定位该组。再次感谢。第二个会更好。你不认为如果OP有能力亲自更改格式，我会在对象中返回html，而不是尝试在客户端生成它，但这只是我个人的偏好。不过，使用第二种格式确实会使它更干净。

[{"albumImage":"","artist":"Bruce","albumTitle":"","year":"","genre":""},
{"albumImage":"","artist":"Tom Waits","albumTitle":"","year":"","genre":""},
{"albumImage":"","artist":"Alison Krauss","albumTitle":"","year":"","genre":""},
{"albumImage":"","artist":"Pink Floyd","albumTitle":"","year":"","genre":""},
{"albumImage":"","artist":"Rage Against the Machine","albumTitle":"","year":"","genre":""},
{"albumImage":"","artist":"","albumTitle":"","year":"","genre":""},
{"albumImage":"","artist":"","albumTitle":"","year":"","genre":""},
{"albumImage":"","artist":"","albumTitle":"","year":"","genre":""},
{"albumImage":"","artist":"","albumTitle":"","year":"","genre":""},
{"albumImage":"","artist":"","albumTitle":"","year":"","genre":""},
{"albumImage":"","artist":"","albumTitle":"","year":"","genre":""},
{"albumImage":"","artist":"","albumTitle":"","year":"","genre":""},
{"albumImage":"","artist":"","albumTitle":"","year":"","genre":""},
{"albumImage":"","artist":"","albumTitle":"","year":"","genre":""},  
{"albumImage":"","artist":"","albumTitle":"","year":"","genre":""},
{"albumImage":"","artist":"","albumTitle":"","year":"","genre":""},

{"deviceImage":"","device":"E12","type":"Portable amp","company":"FiiO","price":"$130"},
 {"deviceImage":"","device":"GS1000e","type":"Headphone","company":"Grado","price":"$1300"},
{"deviceImage":"","device":"RS1i","type":"Headphone","company":"Grado","price":"$850"},
{"deviceImage":"","device":"SR60e","type":"Headphone","company":"Grado","price":"$80"},
{"deviceImage":"","device":"HD 650","type":"Headphone","company":"Sennheiser","price":"$500"},
{"deviceImage":"","device":"SRH 860","type":"Headphones","company":"Samson","price":"$60"},
{"deviceImage":"","device":"MA750i","type":"In-ear monitors","company":"RHA","price":"$130"},
{"deviceImage":"","device":"Play: 1","type":"WiFi connected speaker","company":"Sonos","price":"$229"},
{"deviceImage":"","device":"Walsh 3","type":"Speakers (passive)","company":"Ohm","price":"$2,000"},
{"deviceImage":"","device":"Evo 2/8","type":"Speakers (passive)","company":"Wharfedale","price":"$400"},
{"deviceImage":"","device":"Asgard 2","type":"Amplifier","company":"Schiit","price":"$299"},
{"deviceImage":"","device":"Modi","type":"DAC","company":"Schiit","price":"$99"}]

var deviceHtml = "";
var albumHtml = "";
$.each(data, function(index, item){
    if(typeof(item.albumImage) != "undefined" && typeof(item.deviceImage == 'undefined')
    {
        albumHtml += '<div class="col-md-3">'+
         '<img class="albumImage" src=""' + item.albumImage + '"/>' + "<br>" +
         '<div class="albumArtist">' + "<strong>Artist: </strong>" + item.artist + '</div>'+
         '<div class="albumTitle">' + "<strong>Album: </strong>" + item.albumTitle + '</div>'+
           '<div class="albumYear">' + "<strong>Year: </strong>" + item.year + '</div>'+
         '<div class="albumGenre">' + "<strong>Genre: </strong>" + item.genre + '</div></div>';
    }
    else if(typeof(item.deviceImage) != "undefined" && typeof(item.albumImage) == 'undefined')
    {
         deviceHtml += '<div class="col-md-3">'+
         '<img class="deviceImage" src=""' + item.deviceImage + '"/>' + "<br>" +
         '<div class="deviceName">' + "<strong>Name: </strong>" + item.device + '</div>'+
         '<div class="deviceType">' + "<strong>Device: </strong>" + item.type + '</div>'+
         '<div class="deviceCompany">' + "<strong>Company: </strong>" + item.comapny + '</div>'+
         '<div class="devicePrice">' + "<strong>Price: </strong>" + item.price + '</div>';


         deviceHtml += '</div>'; //col-md-3
    }

})//each album

$("#albumData").append(albumHtml);
$("#deviceData").append(device);   

$.each(data.albums,function(index, item){}) 

$.each(data.devices,function(index, item){})