Reputation: 546
I have the following code:
$.getJSON('data.json', function(data) {
var items = [];
$.each(data, function(key, val) {
items.push('<option id="' + key + '">' + val + '</option>');
});
$('<select/>', {
'class': 'my-new-list',
html: items.join('')
}).appendTo('body');
});
This works fine for a simple JSON file but I've got a bit more complicated data (this is how it's been given to me):
{
"Shares": [
{
"shareName": "Frontier",
"shareID": "FML"
},
{
"shareName": "Global Petroleum",
"shareID": "GBP"
},
{
"shareName": "Tower Petroleum",
"shareID": "TRP"
},
{
"shareName": "Aquarius Platinum",
"shareID": "AQP"
}
]
}
This simply populates a drop down menu, how should I modify the syntax so it reads the "ShareName" for each within Shares?
Thanks!
Thanks everyone for the answers, I can only choose one so chose the first reply, but I really appreciate everybody's input!
Upvotes: 0
Views: 270
Reputation: 340055
Iterate over data.Shares
, but I suggest creating the <option>
elements directly instead of by concatenating HTML to ensure that any meta-characters are correctly escaped:
$select = $('<select/>', {
'class': 'my-new-list',
});
$.each(data.Shares, function(index, val) {
$('<option>', {
id: val.shareID, val: val.shareID, text: val.shareName
}).appendTo($select);
});
$select.appendTo('body');
Note that I've also put the share ID into the <option>
value, so that you can use that abbreviated token in the backend instead of the full share name.
Upvotes: 1
Reputation: 2985
$.each(data.Shares, function(val) {
items.push('<option id="' + val.ShareId+ '">' + val.ShareName+ '</option>');
});
Upvotes: 0
Reputation: 61497
After parsing, it is a javascript object, so instead of iterating over an array, iterate over the array named by the Shares
field:
$.each(data.Shares, function(key, val) {
items.push('<option id="' + val.shareID + '">' + val.shareName + '</option>');
});
Upvotes: 0
Reputation: 75327
Firstly, you'll have to iterate over data.Shares
instead. Note the capital S
; JavaScript is case sensitive.
You'll also have to reference the shareName
and shareID
attributes rather than simply the key and value.
$.each(data.Shares, function(_, val) {
items.push('<option id="' + val.shareID + '">' + val.shareName + '</option>');
});
To cement the understanding, what you have is an object (data
) which has an attribute (Shares
) which is an array of objects. Each object in that array has 2 attributes; shareID
and shareName
.
Upvotes: 1