使用 jQuery 解析存储在本地存储中的 JSON

Question

我目前正在使用 Simplecart.js 将项目存储到本地存储中。下面的 JSON 是我正在使用的。我只需要解析拇指和名字，然后使用 jQuery 在浏览器上显示它们。实现这一目标的最佳方法是什么？

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

下面的控制台输出returns对象：

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

console.log( item );

Answer 1

试试这个。您需要使用 for 循环

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

这是一种快速的方法，但请添加安全检查。我懒得在这里做。

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();
    }

使用 jQuery 解析存储在本地存储中的 JSON

Parsing JSON stored in local storage with jQuery

javascript

jquery

json

local-storage

simplecart