CODEWITHSUNDEEP
javascriptjqueryjson
fasteddie
fasteddie

Reputation: 17

Displaying part of JSON data using javascript

I'm trying to use JSON to print content to the screen. I'm trying to print out as two different sections so the "albumData" displays as columns in the "albumData" div and the audio equipment goes in a div further down the page. I have tried having {audio: [ ...]} in the JSON array but that never seems to work. The issue right now is the JS file is outputting too munch data and is not stopping when the the object is not in the array. Ideally, it would put out a 4x4 layout for the albums, and a 4x3 layout for devices but instead both sections are outputting 4x7 and many of the text is 'undefined'.

Do you guys have any tips on targeting specific JSON data? Thanks for your help

HTML Code: 

<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 Code:

$.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 Array:

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

Upvotes: 1

Views: 55

Answers (1)

scrappedcola
scrappedcola

Reputation: 10572

Since it's one array don't parse it 2x, use variables instead.

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

You will also want to skip records that have no values for any of them so you will need to add an additional if block in there to test that the string isn't empty, else skip that iteration of the loop.

If, as in your comments you change the format of your object to {albums:[ { } ], devices:[ { }] } you can then just use dot notation to access the key you wish to loop through. 

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

and 

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

Upvotes: 2

Related Questions