如何使用javascript / jquery從Jsonfile中提取數據

Question

我正在嘗試從JSONfile構建動態籃子。

我首先開始使用此文件：

var retailerData = {"del":{"zip":"","city":""},"user":{"country":"","phone":"","nbrOrders":0,"name":"","salesPerson":"","customerNo":"","email":""},"order":{"shippingSum":0.0,"orderno":"","voucher":"","currency":"","orderVat":0.0,"orderSum":0.0,"items":[]}}

使用此腳本，我設法從不同的設置中提取信息，並將其附加到我的購物籃中的現有html上，如您在此小提琴中所見： http : //codepen.io/anon/pen/XKKbJL

var nameDiv = document.createElement("td");
nameDiv.id = 'totalIncEx'; 
var text3 = document.createTextNode(retailerData.order.orderSum);  
nameDiv.appendChild(text3)
document.body.appendChild(nameDiv);
$("td#totalIncEx").appendTo("tr.ordersum");   

var nameDiv = document.createElement("td");
nameDiv.id = 'vatTotal'; 
var text3 = document.createTextNode(retailerData.order.orderVat);  
nameDiv.appendChild(text3)
document.body.appendChild(nameDiv);   
$("td#vatTotal").appendTo("tr.ordervat");   

var nameDiv = document.createElement("td");
nameDiv.id = 'orderTotal'; 
var text3 = document.createTextNode(retailerData.order.orderSum);  
nameDiv.appendChild(text3)
document.body.appendChild(nameDiv);  
$("td#orderTotal").appendTo("tr.ordersumtotal");   

現在，我有一個更新的JSON文件，其中包含每個添加產品的數據。

var retailerData = {"del":{"zip":"","city":""},"user":{"country":"","phone":"","nbrOrders":0,"name":"","salesPerson":"","customerNo":"","email":""},"order":{"shippingSum":0.0,"orderno":"0","voucher":"","currency":"SEK","orderVat":3322.5,"orderSum":13290.0,"items":[{"qtyAvail":0,"price":6295.0,"qty":1,"artno":"DEL-17812033.10-4","label":"E7240/i5-4310U/4GB1/128SSD/12,5HD(1366x768)/W7P 3-Cell/CAM/3YRNBD/W8.1P/US int Keyboard","category":"Computers - Notebooks","manufacturer":"Dell"},{"qtyAvail":31,"price":6995.0,"qty":1,"artno":"20BV001KUK","label":"Lenovo ThinkPad T450 20BV - 14" - Core i3 5010U - 4 GB RAM - 500 GB Hybrid Drive","category":"Computers - Notebooks","manufacturer":"Lenovo"}]}}

在此字段中，我有兩種不同添加產品的信息。 我需要從它們兩個中提取數據，並將數據分隔在各自的子元素中，以便可以在購物籃中顯示每個產品。

例如，我如何拉動每種產品的價格，然后將其放置在每個孩子的.carttable ，以便在這種提琴.carttable其放到.carttable上？

http://codepen.io/anon/pen/yJJNYZ

Answer 1

 var retailerData = { "del": { "zip": "", "city": "" }, "user": { "country": "", "phone": "", "nbrOrders": 0, "name": "", "salesPerson": "", "customerNo": "", "email": "" }, "order": { "shippingSum": 0.0, "orderno": "0", "voucher": "", "currency": "SEK", "orderVat": 3322.5, "orderSum": 13290.0, "items": [{ "qtyAvail": 0, "price": 6295.0, "qty": 1, "artno": "DEL-17812033.10-4", "label": "E7240&#x2F;i5-4310U&#x2F;4GB1&#x2F;128SSD&#x2F;12,5HD&#40;1366x768&#41;&#x2F;W7P 3-Cell&#x2F;CAM&#x2F;3YRNBD&#x2F;W8.1P&#x2F;US int Keyboard", "category": "Computers - Notebooks", "manufacturer": "Dell" }, { "qtyAvail": 31, "price": 6995.0, "qty": 1, "artno": "20BV001KUK", "label": "Lenovo ThinkPad T450 20BV - 14&#34; - Core i3 5010U - 4 GB RAM - 500 GB Hybrid Drive", "category": "Computers - Notebooks", "manufacturer": "Lenovo" }] } } $.each(retailerData.order.items,function(i,v){//get the item var div = $('<div/>') div.append('item '+ '<span>'+ v.artno+'</span>' + '<span>'+ v.price+'</span>' ) $('.carttable').append(div) }) var nameDiv = document.createElement("td"); nameDiv.id = 'totalIncEx'; var text3 = document.createTextNode(retailerData.order.orderSum); nameDiv.appendChild(text3) document.body.appendChild(nameDiv); $("td#totalIncEx").appendTo("tr.ordersum"); var nameDiv = document.createElement("td"); nameDiv.id = 'vatTotal'; var text3 = document.createTextNode(retailerData.order.orderVat); nameDiv.appendChild(text3) document.body.appendChild(nameDiv); $("td#vatTotal").appendTo("tr.ordervat"); var nameDiv = document.createElement("td"); nameDiv.id = 'orderTotal'; var text3 = document.createTextNode(retailerData.order.orderSum); nameDiv.appendChild(text3) document.body.appendChild(nameDiv); $("td#orderTotal").appendTo("tr.ordersumtotal"); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <div class="carttable"> </div> <table class="cartfacts" border="0" cellspacing="0" cellpadding="0"> <tbody> <tr class="ordersum"><td class="cost costwide">Summa&nbsp;exkl.&nbsp;moms:</td></tr> <tr class="ordervat"><td class="cost costwide">Moms:</td></tr> <tr class="ordersumtotal"><td class="cost costwide">Att&nbsp;betala:</td></tr> </tbody></table> 

Answer 2

這很簡單。

 var retailerData = {"del":{"zip":"","city":""},"user":{"country":"","phone":"","nbrOrders":0,"name":"","salesPerson":"","customerNo":"","email":""},"order":{"shippingSum":0.0,"orderno":"0","voucher":"","currency":"SEK","orderVat":3322.5,"orderSum":13290.0,"items":[{"qtyAvail":0,"price":6295.0,"qty":1,"artno":"DEL-17812033.10-4","label":"E7240&#x2F;i5-4310U&#x2F;4GB1&#x2F;128SSD&#x2F;12,5HD&#40;1366x768&#41;&#x2F;W7P 3-Cell&#x2F;CAM&#x2F;3YRNBD&#x2F;W8.1P&#x2F;US int Keyboard","category":"Computers - Notebooks","manufacturer":"Dell"},{"qtyAvail":31,"price":6995.0,"qty":1,"artno":"20BV001KUK","label":"Lenovo ThinkPad T450 20BV - 14&#34; - Core i3 5010U - 4 GB RAM - 500 GB Hybrid Drive","category":"Computers - Notebooks","manufacturer":"Lenovo"}]}} $.each(retailerData.order.items,function(key,value){//get the item document.write(value.artno + " costs " + value.price); document.write("<br/>"); //or you get each key value in key, value //so you can easily document.write("<p>"+value.label+"</p>") }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>