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

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

{ 
    "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);

来源

2017-10-19 JONxBLAZE

循环访问对象，并只返回缩略图和名称。 – Terry

你需要展示你的尝试。而且我可以保证你可以通过一个小小的Google搜索将所有这些粘在一起。 –

尝试此。您需要使用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>

来源

2017-10-19 13:28:57 kiranvj

该解决方案可以正常工作，但是当我尝试输出图像时，斜杠被剥离。 – JONxBLAZE

@JONxBLAZE我已经更新了实际图片的代码并且加载正常，请检查。 – kiranvj

这里有一个快速的方法来做到这一点，但请加安全检查。我没有打扰他们在这里做。

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

来源

2017-10-19 13:30:35

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

回答

相关问题