jquery - Displaying part of JSON data using javascript -
i'm trying use json print content screen. i'm trying print out 2 different sections "albumdata" displays columns in "albumdata" div , audio equipment goes in div further down page. have tried having {audio: [ ...]} in json array never seems work. issue right js file outputting munch data , not stopping when the object not in array. ideally, put out 4x4 layout albums, , 4x3 layout devices instead both sections outputting 4x7 , many of text 'undefined'.
do guys have tips on targeting specific json data?
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 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"}]
since it's 1 array don't parse 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 want skip records have no values of them need add additional if block in there test string isn't empty, else skip iteration of loop.
if, in comments change format of object {albums:[ { } ], devices:[ { }] } can use dot notation access key wish loop through.
$.each(data.albums,function(index, item){}) and
$.each(data.devices,function(index, item){})
Comments
Post a Comment