Analyser JSON stocké dans le stockage local avec jQuery

J'utilise actuellement Simplecart.js pour stocker des éléments dans le stockage local. Le JSON ci-dessous est ce que je travaille avec. J'ai besoin d'analyser juste le pouce et le nom, puis les afficher sur le navigateur en utilisant jQuery. Quelle est la meilleure approche pour y parvenir?Analyser JSON stocké dans le stockage local avec 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" 
    } 
}

La sortie de la console retourne sous l'objet:

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

console.log(item);

Source

2017-10-19 JONxBLAZE

Itérer à travers l'objet et revenir juste la vignette et le nom. – Terry

Vous devez montrer ce que vous avez essayé. Et je peux vous garantir que vous pouvez coller tout cela seul avec un peu de recherche Google. –

essayer. Vous devez utiliser la boucle 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>

Source

2017-10-19 13:28:57 kiranvj

Cette solution fonctionne, mais lorsque j'essaie de sortir l'image, les barres obliques sont supprimées. – JONxBLAZE

@JONxBLAZE J'ai mis à jour le code avec l'image actuelle et se charge bien, s'il vous plaît vérifier. – kiranvj

Voici un moyen rapide de le faire, mais s'il vous plaît ajouter des contrôles de sécurité. Je n'ai pas pris la peine de les faire ici.

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

Source

2017-10-19 13:30:35

Analyser JSON stocké dans le stockage local avec jQuery

Répondre

Questions connexes