Parsing JSON stored in local storage with jQuery

Question

I'm currently using Simplecart.js to store items into local storage. The JSON below is what I'm working with. I need to parse just the thumb and name, then display them on the browser using jQuery. what's the best approach in achieving this?

{
  "SCI-1": {
    "quantity"  : 1,
    "id"        : "SCI-1",
    "name"      : "item1",
    "thumb"     : "http://www.example.com/img/1.jpg",
    "url"       : "http://www.example.com/1/",
    "thumbnail" : "http://www.example.com/img/thumbnail/1.jpg",
    "size"      : "10x10"
  },

  "SCI-2": {
    "quantity"  : 1,
    "id"        : "SCI-2",
    "name"      : "item2",
    "thumb"     : "http://www.example.com/img/2.jpg",
    "url"       : "http://www.example.com/2/",
    "thumbnail" : "http://www.example.com/img/thumbnail/2.jpg",
    "size"      : "20x20"
  },

  "SCI-3": {
    "quantity"  : 1,
    "id"        : "SCI-3",
    "name"      : "item3",
    "thumb"     : "http://www.example.com/img/3.jpg",
    "url"       : "http://www.example.com/3/",
    "thumbnail" : "http://www.example.com/img/thumbnail/3.jpg",
    "size"      : "30x30"
  }
}

The console output below returns the object:

var item = JSON.parse( localStorage.getItem( 'simpleCart_items' ) );

console.log( item );

Answer 1

Try this. You need to use for loop

var item = {
  "SCI-1": {
    "quantity"  : 1,
    "id"        : "SCI-1",
    "name"      : "item1",
    "thumb"     : "http://lorempixel.com/100/200/",
    "url"       : "http://lorempixel.com/100/200/",
    "thumbnail" : "http://lorempixel.com/100/200/",
    "size"      : "10x10"
  },

  "SCI-2": {
    "quantity"  : 1,
    "id"        : "SCI-2",
    "name"      : "item2",
    "thumb"     : "http://lorempixel.com/100/200/",
    "url"       : "http://www.example.com/2/",
    "thumbnail" : "http://www.example.com/img/thumbnail/2.jpg",
    "size"      : "20x20"
  },

  "SCI-3": {
    "quantity"  : 1,
    "id"        : "SCI-3",
    "name"      : "item3",
    "thumb"     : "http://lorempixel.com/100/200/",
    "url"       : "http://www.example.com/3/",
    "thumbnail" : "http://www.example.com/img/thumbnail/3.jpg",
    "size"      : "30x30"
  }
}

    var html = "";
    for (var x in item) {
        html += "<p>Thumb: <img src='" + item[x].thumb + "'> <br />" + "Name: " + item[x].name + "</p>";
    }
    
    $("#result").append(html);

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

<div id="result"></div>

Answer 2

Here's a quick way to do it but please add safety checks. I didnt bother doing them here.

https://jsfiddle.net/8d6z3co7/

var json= JSON.parse( localStorage.getItem( 'simpleCart_items' ) );
    for (var key in json) {
        console.group("items for "+key)
      console.log("thumb:" + json[key].thumb);
      console.log("name:" + json[key].name);
      console.groupEnd();
    }