使用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

回答

相關問題