Display JSON string

So I've got it too display this:
Items in your basket are: {"total":1,"rows":[{"name":"S2","quantity":1,"price":60}]}

I think I am supposed to parse it, how?

>>247946
>Needs to be displayed on another page using JSON.Parse.
This doesn't make sense. You parse it to retrieve the original object. If you were supposed to display the json representation itself, you wouldn't parse it.

>>247957
You parse the json with
var items = JSON.parse('{"total":1,"rows":[{"name":"S2","quantity":1,"price":60}]}');

If you want to display the information on the page, maybe something like

var div = document.createElement('DIV'),
content = 'You have '+items.total+' items in your basket<br>';

for (var i; i<items.rows.length; i++) {
content += 'name: '+items.rows[i].name+' quantity: '+items.rows[i].quantity+' price: '+items.rows[i].price+'<br>';
}

div.innerHTML = content;
document.body.appendChild(div);

I hope this helps.

>>248050
It was helpful, Thank You.
Hey, so I've got it to parse the example I gave you but obviously I need it to change based on what goes in the basket.
That's saved in the local storage with the key called basket.

I also couldn't display anything other than the total items, so no name, quantity or price.

>>248469
On the first page:

// make changes to the basket, e.g.
basket.total = basket.rows.push({name: 'new_item', quantity: 10, price: 50});
localStorage.setItem('basket', JSON.stringify(basket));

On the display page:

// update basket
basket = JSON.parse(localStorage.getItem('basket'));

>I also couldn't display anything other than the total items, so no name, quantity or price.
Sorry, I made a typo on the code above. I didn't set i to zero before beginning the loop. That's probably why it wasn't printing the rows for you.

Try:

// notice the "var i=0" which was missing before
for (var i=0; i<items.rows.length; i++) {
content += 'name: '+items.rows[i].name+' quantity: '+items.rows[i].quantity+' price: '+items.rows[i].price+'<br>';
}

Sorry about that.

>>248554
Oh, also, don't forget to replace "items" there with the variable name you're actually using. I ended up using "basket" and "items" for the same thing.

var div = document.createElement('DIV'),
content = 'You have '+basket.total+' basket in your basket<br>';

for (var i=0; i<basket.rows.length; i++) {
content += 'name: '+basket.rows[i].name+' quantity: '+basket.rows[i].quantity+' price: '+basket.rows[i].price+'<br>';
}

div.innerHTML = content;
document.body.appendChild(div);

>>248554
Thanks again,
For the changes to the basket, items already have set values of name, quantity and price. They are then put into local storage when the user drags them into the basket.

>>248563
Cool. You should be good to go, then. Let me know if you run into any other issues.

>>248572
I think I have got a little confused, I have got it too display the total items.
Am I supposed to have two for loops?
With different variable names?

>>248583
No, just one loop with the correct variable name. I had used two different names by mistake. If you are calling the object 'basket', just use that in the loop, like in >>248557.

>>248604
Okay So i've done most of it but can't figure out why [object Object] is displaying before my data is recalled:


var div = document.createElement('DIV'),


basket = JSON.parse(localStorage.getItem('data'));

for (var i=0; i<basket.rows.length; i++) {
data += 'name: '+basket.rows[i].name+' quantity: '+basket.rows[i].quantity+' price: '+basket.rows[i].price+'<br>';
}
div.innerHTML = data;
document.body.appendChild(div);

>>248692
You didn't declare data in that part, so maybe you had already attributed something to it before. Try calling

data = '';

right before the loop.

>>248701
That works fine, Thank you very much. Bless You.

>>248701
>>248704
Can you explain to me how I can display the total items and then total price?

I have this:
var div = document.createElement('DIV'),


basket = JSON.parse(localStorage.getItem('data'));
data = '';
for (var i=0; i<basket.rows.length; i++) {
data += 'name: '+basket.rows[i].name+' quantity: '+basket.rows[i].quantity+' price: '+basket.rows[i].price+'<br>';
}
div.innerHTML = data;

document.body.appendChild(div);

>>248704
No problem

>>248708
You should sum up the total price inside the loop, and then append that to data after it. For example:

var total_price = 0;

for (var i=0; i<basket.rows.length; i++) {
//data += ...
total_price += basket.rows[i].price;
}

data += 'Total items: '+basket.total+'<br>';
data += 'Total price: '+total_price;

>>248711
BTW, I put

//data += ...

as a comment there just so it was easier to read, but you should keep that line the way it already is. Just add

total_price += basket.rows[i].price;

right after it. Sorry if that wasn't clear.

>>248711
>>248714
Got it too work perfectly, thank you again, you've been a great help.

Any tips on making it look pretty? How am I meant to set up CSS for an element that's created?
So far I've just put an ID on the body tag of that page to change the text colour.

>>248721
You can set an id or a class on the div your created with either of:

div.id = "output_div";
div.className = "output_div";

and then you can refer to it in your css with

#output_div { ... }
.output_div { ... }

respectively.

You can also set a style inline for that div with

div.style.color = "red";
div.style.border = "1px solid black";

and so on.