javascriptを使用してJSONデータの一部を表示する

Question

JSONを使用してコンテンツを画面に表示しようとしています。私は2つの異なるセクションとして印刷しようとしています。そのため、 "albumData"は "albumData" divの列として表示され、オーディオ機器はdivの下のページに表示されます。私は{audio：[...]}をJSON配列に入れてみましたが、決してうまくいかないようです。今の問題は、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> 

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

それは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); 

また、あなたはそこにブロックが他の文字列が空でないことをテストの繰り返しをスキップする場合は、追加を追加する必要がありますので、それらのいずれかの値を持たないレコードをスキップすることになるでしょうループ。

コメントのように、オブジェクトのフォーマットを{albums:[ { } ], devices:[ { }] }に変更すると、ドット表記を使用して、ループしたいキーにアクセスすることができます。

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

と

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