Use jQuery find () for JSON object

Question

Like the brnwdrng question, I'm looking for a way to search through a JSON-like object.
assuming my object structure is this:

TestObj = { "Categories": [{ "Products": [{ "id": "a01", "name": "Pine", "description": "Short description of pine." }, { "id": "a02", "name": "Birch", "description": "Short description of birch." }, { "id": "a03", "name": "Poplar", "description": "Short description of poplar." }], "id": "A", "title": "Cheap", "description": "Short description of category A." }, { "Product": [{ "id": "b01", "name": "Maple", "description": "Short description of maple." }, { "id": "b02", "name": "Oak", "description": "Short description of oak." }, { "id": "b03", "name": "Bamboo", "description": "Short description of bamboo." }], "id": "B", "title": "Moderate", "description": "Short description of category B." }] }; 

I would like to get an object with id = "A".

I have tried all such things as:

 $(TestObj.find(":id='A'")) 

but nothing works.

Can anyone think of a way to get an element based on some criteria without using "everyone"?

Answer 1

jQuery does not work with simple object literals. You can use the following function in the same way as searching for the entire "id (or any other property), regardless of its depth in the object:

 function getObjects(obj, key, val) { var objects = []; for (var i in obj) { if (!obj.hasOwnProperty(i)) continue; if (typeof obj[i] == 'object') { objects = objects.concat(getObjects(obj[i], key, val)); } else if (i == key && obj[key] == val) { objects.push(obj); } } return objects; } 

Use like this:

 getObjects(TestObj, 'id', 'A'); // Returns an array of matching objects 

Answer 2

A pure javascript solution is better, but the jQuery way is to use jQuery grep and / or map . Probably not much better than using $ .each

 jQuery.grep(TestObj, function(obj) { return obj.id === "A"; }); 

or

 jQuery.map(TestObj, function(obj) { if(obj.id === "A") return obj; // or return obj.name, whatever. }); 

Returns an array of matching objects or return values ​​in case of a map. You may be able to do what you want just by using them.

But in this example, you will need to do some recursion, because the data is not a flat array, and we accept arbitrary structures, keys and values, as pure javascript solutions do.

 function getObjects(obj, key, val) { var retv = []; if(jQuery.isPlainObject(obj)) { if(obj[key] === val) // may want to add obj.hasOwnProperty(key) here. retv.push(obj); var objects = jQuery.grep(obj, function(elem) { return (jQuery.isArray(elem) || jQuery.isPlainObject(elem)); }); retv.concat(jQuery.map(objects, function(elem){ return getObjects(elem, key, val); })); } return retv; } 

Essentially the same as Box9's answer, but with useful jQuery utility features.

·········

Answer 3

This works for me on [{"id": "data"}, {"id": "data"}]

 function getObjects(obj, key, val) { var newObj = false; $.each(obj, function() { var testObject = this; $.each(testObject, function(k,v) { //alert(k); if(val == v && k == key) { newObj = testObject; } }); }); return newObj; } 

Answer 4

For one json dimension, you can use this:

 function exist (json, modulid) { var ret = 0; $(json).each(function(index, data){ if(data.modulId == modulid) ret++; }) return ret > 0; } 

Answer 5

You can use JSONPath

Doing something like this:

 results = JSONPath(null, TestObj, "$..[?(@.id=='A')]") 

Note that JSONPath returns an array of results

(I have not tested the expression "$ .. [? (@. Id == 'A')]" btw. It may need to be configured using the browser console)

Answer 6

Another option I wanted to mention is that you could convert your data to XML, and then use jQuery.find(":id='A'") as you would like.

There are jQuery plugins for this, like json2xml .

It’s probably not worth the conversion overhead, but it’s a one-time cost for static data, so it can be useful.