使用 jQuery 解析存储在本地存储中的 JSON [关闭]答案

【问题标题】：Parsing JSON stored in local storage with jQuery [closed]使用 jQuery 解析存储在本地存储中的 JSON [关闭]
【发布时间】：2017-10-19 13:22:25
【问题描述】：

我目前正在使用 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"
  }
}

下面的控制台输出返回对象：

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

console.log( item );

【问题讨论】：

遍历对象并只返回缩略图和名称。
您需要展示您尝试过的内容。而且我可以保证您可以通过一点 Google 搜索自行将所有内容整合在一起。

标签： javascript jquery json local-storage simplecart

【解决方案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>

【讨论】：

此解决方案有效，但是当我尝试输出图像时，斜线被剥离。
@JONxBLAZE 我已经用实际图像更新了代码并且加载正常，请检查。

【解决方案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();
    }

【讨论】：