如何使用javascript / jquery从Jsonfile中提取数据

Question

我正在尝试从JSON文件构建动态篮子。

我首先开始使用此文件：

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？

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

Answer 1

＆＃13;

＆＃13;

window.open.bind(null, a)

＆＃13;

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




$.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");   

＆＃13;

＆＃13;

＆＃13;

Answer 2

简单。

＆＃13;

＆＃13;

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



$.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>")


})

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;