Question

I have one JSON file like following:

{entries:[{title:‘foo’,id:‘01’,created:‘2010-12-06’},{title:‘bar’,id:‘02’,created:‘2010-12-05’}]}

And also I have one html file which using jQuery get above json file from server first. And display the information.

<div id='list'>
<li><p id="01">foo</p></li>
<li><p id="02">bar</p></li>
</div>

now, I want to use jQuery, when I click on one item, for example “foo”, and find this entry from my JSON file first, and later make some change in JSON data. Currently I’m stack at the first thing, when click on the item, find the right entry in JSON file, can anyone help? Thanks.

Answer 1

Assuming you already parsed the JSON string, you have to loop over the array to get the corresponding item:

$('#id p').click(function() {
    var entries = json.entries;
    var item = null;
    for(var i = entries.length;i--;) {
        if(entries[i].id == this.id) {
            item = entries[i];
            break;
        }
    }

    // so something with item
}); 

But looping every time over the array is not efficient. Better is to create some kind of a hashtable (which is just an object in JavasScript (like everything else ;))) and just look up the id. That means you have to preprocess the returned JSON:

var items = {};
var entries = json.entries;

for(var i = entries.length;i--;) {
    var entry = entries[i];
    items[entry.id] = entry;
}

and later you can get the corresponding item by just:

var item = items[this.id];
// item will be undefined if `this.id` is not present in `items`

---

Side note: Your HTML is not valid, li elements must have a ul or a ol as parent.