Question

我尝试使用JSON将内容打印到屏幕上。我试图打印出两个不同的部分，所以＆＃34; albumData＆＃34;在＆＃34; albumData＆＃34;中显示为列div和音频设备进入页面下方的div。我试过在JSON数组中使用{audio：[...]}，但似乎从来没有工作过。现在的问题是JS文件输出的数据太多而且当对象不在数组中时不会停止。理想情况下，它会为相册提供4x4布局，并为设备提供4x3布局，但相反，两个部分都输出4x7，并且许多文本未定义＆＃39;。

你们有关于定位特定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>

JS代码：

$.getJSON("jsonDatabase/wall.json",function(data){

console.dir(data);

var html = "";
$.each(data, function(index, item){

html += '<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>'


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

})//each album

$("#albumData").append(html);
//end record data

var device = "";

$.each(data, function(ind, item){
device += '<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>'


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

})//each device 
  $("#deviceData").append(device);   



})
// closes getJSON  
})

JSON数组：

[{"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"}]

Answer 1

由于它的一个数组不会解析它2倍，所以请改用变量。

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

您还希望跳过没有任何值的记录，因此您需要在其中添加一个额外的if块来测试该字符串是否为空，否则跳过该循环的迭代。

如果在评论中将对象的格式更改为{albums:[ { } ], devices:[ { }] }，则可以使用点表示法来访问要循环的键。

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

和

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

使用javascript显示部分JSON数据

1 个答案: