CODEWITHSUNDEEP
javascriptjquery
Jerry Svensson
Jerry Svensson

Reputation: 277

How to pull data from a Jsonfile with javascript/jquery

I´m trying to build a dynamic basket from a JSONfile.

I first started with this file: 

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

And with this script I managed to pull info from the different settings and append them to existing html in my basket as you can see in this fiddle: 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");

Now I have an updated JSON file with data per added product. 

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

In this field I have info from two different added products. I need to pull data from both of them and have the data separated in their own child element so I can display each product in the basket.

How do I pull for example the price for each product and have that placed in each own child to .carttable in this fiddle?

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

Upvotes: 0

Views: 58

Answers (2)

guradio
guradio

Reputation: 15565

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

Upvotes: 1

Tirthraj Barot
Tirthraj Barot

Reputation: 2679

Its simple.

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>

Upvotes: 0

Related Questions