Kyle
Reputation: 67234
How do I take certain parts of a JSON object and add them as options to a SELECT?
I have a json file that contains a lot of information,
{
"ListProductsResponse": {
"Products": [{
"VatAmount": 0,
"VatFormat": "Percent",
"Bonus": {
"AdditionalValue": 0,
"Description": null,
"ValidFrom": "\/Date(-1807877931046+0200)\/",
"ValidTo": "\/Date(4503555668953+0200)\/"
},
"CurrencyIsoString": "SEK",
"Description": "50 kr",
"ExternalProductID": "TELIA",
"Prices": {
"CurrencyIso": "SEK",
"Description": "50 kr",
"FixedDiscount": 0,
"Price": 5000,
"ValidFrom": "\/Date(1293836400000+0100)\/",
"ValidTo": "\/Date(-62135596800000+0100)\/"
},
"ProductID": "KK010TELIASEKONTANT50",
"ProviderId": "TELIA",
"UnitType": null,
"ValidFrom": "2011-01-01",
"ValidTo": "2061-11-19",
"Value": 5000
}, {
"VatAmount": 0,
"VatFormat": "Percent",
"Bonus": {
"AdditionalValue": 0,
"Description": null,
"ValidFrom": "\/Date(-1807877931046+0200)\/",
"ValidTo": "\/Date(4503555668953+0200)\/"
},
"CurrencyIsoString": "SEK",
"Description": "100 kr",
"ExternalProductID": "TELIA",
"Prices": {
"CurrencyIso": "SEK",
"Description": "100 kr",
"FixedDiscount": 0,
"Price": 10000,
"ValidFrom": "\/Date(1294786800000+0100)\/",
"ValidTo": "\/Date(-62135596800000+0100)\/"
},
"ProductID": "KK020TELIASEKONTANT100",
"ProviderId": "TELIA",
"UnitType": null,
"ValidFrom": "2011-01-12",
"ValidTo": "2061-01-12",
"Value": 10000
}, {
"VatAmount": 0,
"VatFormat": "Percent",
"Bonus": {
"AdditionalValue": 0,
"Description": null,
"ValidFrom": "\/Date(-1807877931046+0200)\/",
"ValidTo": "\/Date(4503555668953+0200)\/"
},
"CurrencyIsoString": "SEK",
"Description": "150 kr",
"ExternalProductID": "TELIA",
"Prices": {
"CurrencyIso": "SEK",
"Description": "150 kr",
"FixedDiscount": 0,
"Price": 15000,
"ValidFrom": "\/Date(1294786800000+0100)\/",
"ValidTo": "\/Date(-62135596800000+0100)\/"
},
"ProductID": "KK030TELIASEKONTANT150",
"ProviderId": "TELIA",
"UnitType": null,
"ValidFrom": "2011-01-12",
"ValidTo": "2061-01-12",
"Value": 15000
}, {
"VatAmount": 0,
"VatFormat": "Percent",
"Bonus": {
"AdditionalValue": 0,
"Description": null,
"ValidFrom": "\/Date(-1807877931046+0200)\/",
"ValidTo": "\/Date(4503555668953+0200)\/"
},
"CurrencyIsoString": "SEK",
"Description": "200 kr",
"ExternalProductID": "TELIA",
"Prices": {
"CurrencyIso": "SEK",
"Description": "200 kr",
"FixedDiscount": 0,
"Price": 20000,
"ValidFrom": "\/Date(1294786800000+0100)\/",
"ValidTo": "\/Date(-62135596800000+0100)\/"
},
"ProductID": "KK040TELIASEKONTANT200",
"ProviderId": "TELIA",
"UnitType": null,
"ValidFrom": "2011-01-12",
"ValidTo": "2061-01-12",
"Value": 20000
}, {
"VatAmount": 0,
"VatFormat": "Percent",
"Bonus": {
"AdditionalValue": 0,
"Description": null,
"ValidFrom": "\/Date(-1807877931046+0200)\/",
"ValidTo": "\/Date(4503555668953+0200)\/"
},
"CurrencyIsoString": "SEK",
"Description": "300 kr",
"ExternalProductID": "TELIA",
"Prices": {
"CurrencyIso": "SEK",
"Description": "300 kr",
"FixedDiscount": 0,
"Price": 30000,
"ValidFrom": "\/Date(1294786800000+0100)\/",
"ValidTo": "\/Date(-62135596800000+0100)\/"
},
"ProductID": "KK050TELIASEKONTANT300",
"ProviderId": "TELIA",
"UnitType": null,
"ValidFrom": "2011-01-12",
"ValidTo": "2061-01-12",
"Value": 30000
}, {
"VatAmount": 2500,
"VatFormat": "Percent",
"Bonus": {
"AdditionalValue": 0,
"Description": null,
"ValidFrom": "\/Date(-1807877931046+0200)\/",
"ValidTo": "\/Date(4503555668953+0200)\/"
},
"CurrencyIsoString": "SEK",
"Description": "Halvårskort SMS 299 kr",
"ExternalProductID": "TELIA-6MSMS",
"Prices": {
"CurrencyIso": "SEK",
"Description": "Halvårskort SMS 299 kr",
"FixedDiscount": 0,
"Price": 29900,
"ValidFrom": "\/Date(1323298800000+0100)\/",
"ValidTo": "\/Date(-62135596800000+0100)\/"
},
"ProductID": "KK060TELIASEHALVAARSMS",
"ProviderId": "TELIA",
"UnitType": null,
"ValidFrom": "2011-12-08",
"ValidTo": "2061-12-09",
"Value": 29900
}, {
"VatAmount": 2500,
"VatFormat": "Percent",
"Bonus": {
"AdditionalValue": 0,
"Description": null,
"ValidFrom": "\/Date(-1807877931046+0200)\/",
"ValidTo": "\/Date(4503555668953+0200)\/"
},
"CurrencyIsoString": "SEK",
"Description": "Halvårskort Mobilsurf 299 kr",
"ExternalProductID": "TELIA-6MDATA",
"Prices": {
"CurrencyIso": "SEK",
"Description": "Halvårskort Mobilsurf 299 kr",
"FixedDiscount": 0,
"Price": 29900,
"ValidFrom": "\/Date(1326927600000+0100)\/",
"ValidTo": "\/Date(-62135596800000+0100)\/"
},
"ProductID": "KK070TELIASEHALVAARMOBSURF",
"ProviderId": "TELIA",
"UnitType": null,
"ValidFrom": "2012-01-19",
"ValidTo": "2062-01-19",
"Value": 29900
}, {
"VatAmount": 2500,
"VatFormat": "Percent",
"Bonus": {
"AdditionalValue": 0,
"Description": null,
"ValidFrom": "\/Date(-1807877931046+0200)\/",
"ValidTo": "\/Date(4503555668953+0200)\/"
},
"CurrencyIsoString": "SEK",
"Description": "Årskort Mobilsurf 499 kr",
"ExternalProductID": "TELIA-YDATA",
"Prices": {
"CurrencyIso": "SEK",
"Description": "Årskort Mobilsurf 499 kr",
"FixedDiscount": 0,
"Price": 49900,
"ValidFrom": "\/Date(1294786800000+0100)\/",
"ValidTo": "\/Date(-62135596800000+0100)\/"
},
"ProductID": "KK080TELIASEKSURF1YEAR",
"ProviderId": "TELIA",
"UnitType": null,
"ValidFrom": "2011-01-12",
"ValidTo": "2061-01-12",
"Value": 49900
}, {
"VatAmount": 2500,
"VatFormat": "Percent",
"Bonus": {
"AdditionalValue": 0,
"Description": null,
"ValidFrom": "\/Date(-1807877931046+0200)\/",
"ValidTo": "\/Date(4503555668953+0200)\/"
},
"CurrencyIsoString": "SEK",
"Description": "Årskort SMS & Surf 899 kr",
"ExternalProductID": "TELIA-YCOMBO",
"Prices": {
"CurrencyIso": "SEK",
"Description": "Årskort SMS & Surf 899 kr",
"FixedDiscount": 0,
"Price": 89900,
"ValidFrom": "\/Date(1294786800000+0100)\/",
"ValidTo": "\/Date(-62135596800000+0100)\/"
},
"ProductID": "KK090TELIASEKCOMBO1YEAR",
"ProviderId": "TELIA",
"UnitType": null,
"ValidFrom": "2011-01-12",
"ValidTo": "2061-01-12",
"Value": 89900
}, {
"VatAmount": 2500,
"VatFormat": "Percent",
"Bonus": {
"AdditionalValue": 0,
"Description": null,
"ValidFrom": "\/Date(-1807877931046+0200)\/",
"ValidTo": "\/Date(4503555668953+0200)\/"
},
"CurrencyIsoString": "SEK",
"Description": "Årskort Navigator & Surf 699",
"ExternalProductID": "TELIA-YNAV",
"Prices": {
"CurrencyIso": "SEK",
"Description": "Årskort Navigator & Surf 699",
"FixedDiscount": 0,
"Price": 69900,
"ValidFrom": "\/Date(1323298800000+0100)\/",
"ValidTo": "\/Date(-62135596800000+0100)\/"
},
"ProductID": "KK100TELIASEARSKORT",
"ProviderId": "TELIA",
"UnitType": null,
"ValidFrom": "2011-12-08",
"ValidTo": "2061-12-09",
"Value": 69900
}, {
"VatAmount": 2500,
"VatFormat": "Percent",
"Bonus": {
"AdditionalValue": 0,
"Description": null,
"ValidFrom": "\/Date(-1807877931046+0200)\/",
"ValidTo": "\/Date(4503555668953+0200)\/"
},
"CurrencyIsoString": "SEK",
"Description": "Årskort SMS 499 kr",
"ExternalProductID": "TELIA-YSMS",
"Prices": {
"CurrencyIso": "SEK",
"Description": "Årskort SMS 499 kr",
"FixedDiscount": 0,
"Price": 49900,
"ValidFrom": "\/Date(1294786800000+0100)\/",
"ValidTo": "\/Date(-62135596800000+0100)\/"
},
"ProductID": "KK110TELIASEKSMS1YEAR",
"ProviderId": "TELIA",
"UnitType": null,
"ValidFrom": "2011-01-12",
"ValidTo": "2061-01-12",
"Value": 49900
}]
},
"Header": {
"AcquirerID": "OKB",
"AgreementID": "92010002",
"ClientIP": "77.40.160.226",
"MerchantID": "Test TopupService",
"TransmissionTime": "2012-10-10 00:00:00"
},
"Status": {
"OperationStatus": "0",
"OperationStatusDesc": "",
"TransactionStatus": 0,
"TransactionStatusDesc": "OK"
}
}
I need to get the ProductID and Description of each of the products and populate a select/option list with them.
<div>
<button id="getButton">Get</button>
<select id="populate">
<option>control</option>
</select>
</div>
This is the simple HTML and I have tried the following jQuery:
$(document).ready(function() {
//attach a jQuery live event to the button
$('#getButton').live('click', function() {
$.getJSON('json.json', function(data) {
$.each(data, function(entryIndex, entry) {
items.push('<option value="' + entry['ProductID'] + ">' + entry ['Description'] + '</option>');
});
});
});
});
I have also tried different versions of the code, but to no avail. Am I missing something vital? Is the json malformed perhaps?
It's worth noting I have never used any json/ajax before so this is totally new territory :)
Thanks.
The full json along with script and html can also be found here.
http://jsfiddle.net/Kyle_Sevenoaks/dkZTb/
Upvotes: 0
Views: 117
Answers (1)
João Silva
Reputation: 91349
There are a couple of problems:
- Use
append()to addoptionsto the#populatedropdown.pushis used to add elements to an array; - Your products are contained within the
Productsarray of your json object. Thus, instead of iterating overdata, iterate overdata.ListProductsResponse.Products; - There's a small syntax error, since you are not closing the
">string in.each().
Here's a fixed example:
var $select = $("#populate");
$.each(data.ListProductsResponse.Products, function(entryIndex, entry) {
$select.append('<option value="' + entry.ProductID + '">' + entry.Description + '</option>');
});
DEMO.
Upvotes: 1
Related Questions
- jquery json select - setting a select option to a whole json element, not just a value from it
- Add options to select from JSON Object
- convert json to select data
- Creating HTML Select from JSON objects
- How to set the HTML select options from a json
- Populate select options from JSON data
- Build select options based on JSON result
- iterating over JSON in javascript to put into select options
- Select Options from JSON
- select into JSON