How to pull data from a Jsonfile with javascript/jquery

Question

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

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

var retailerData = { "del" : ... }, is not a JSON file, it is a JavaScript file with a regular JavaScript object assigned to a variable. You would treat it a s JSON then it would be a syntax error because of the var retailerData =. — t.niese
– t.niese, Commented Jun 15, 2016 at 7:16

guradio · Accepted Answer · 2016-06-15 08:17:37Z

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>

edited Jun 15, 2016 at 8:17

answered Jun 15, 2016 at 7:14

guradio

15.6k4 gold badges39 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Jerry Svensson Over a year ago

Ah interesting, thanks guradio. One thing though, how do I wrap each value in an element so I can cantrol and append it?

guradio Over a year ago

something like '<span>'+v.price+'</span>' ?

Jerry Svensson Over a year ago

Sorry, for being a little confused. Could you give me en example where I get each item and then wrap it? Unsure where in the process I get and wrap the value.

guradio Over a year ago

@JerrySvensson check updated answer if this is the desired output

Jerry Svensson Over a year ago

Hmm thats pretty close. Can I wrap each function as a child to the first span? Then I would have a parent for each product, and a child for each value.

|

Tirthraj Barot · Accepted Answer · 2016-06-15 07:31:33Z

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>

Collectives™ on Stack Overflow

How to pull data from a Jsonfile with javascript/jquery

2 Answers 2

9 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related