Access / process (nested) objects, arrays or JSON
|
9:32 PM |
No comments |
Access / process (nested) objects, arrays or JSON
I have a (nested) data structure containing objects and arrays. How can I extract the information, i.e. access a specific or multiple values (or keys)?
For example:
var data = { code: 42, items: [{ id: 1, name: 'foo' }, { id: 2, name: 'bar' }] }; How could I access the name of the second item in items?
Answer by Felix Kling for Access / process (nested) objects, arrays or JSON
Preliminaries
JavaScript has only one data type which can contain multiple values: Object. An Array is a special form of object.
(Plain) Objects have the form
{key: value, key: value, ...} Arrays have the form
[value, value, ...] Both arrays and objects expose a key -> value structure. Keys in an array must be numeric, whereas any string can be used as key in objects. The key-value pairs are also called the "properties".
Properties can be accessed either using dot notation
var value = obj.someProperty; or bracket notation, if the property name would not be a valid JavaScript identifier name [spec], or the name is the value of a variable:
// the space is not a valid character in identifier names var value = obj["some Property"]; // property name as variable var name = "some Property"; var value = obj[name]; For that reason, array elements can only be accessed using bracket notation:
var value = arr[5]; // arr.5 would be a syntax error // property name / index as variable var x = 5; var value = arr[x]; Wait... what about JSON?
JSON is a textual representation of data, just like XML, YAML, CSV, and others. To work with such data, it first has to be converted to JavaScript data types, i.e. arrays and objects (and how to work with those was just explained). How to parse JSON is explained in the question Parse JSON in JavaScript? .
Accessing nested data structures
A nested data structure is an array or object which refers to other arrays or objects, i.e. its values are arrays or objects. Such structures can be accessed by consecutively applying dot or bracket notation.
Here is an example:
var data = { code: 42, items: [{ id: 1, name: 'foo' }, { id: 2, name: 'bar' }] }; Let's assume we want to access the name of the second item.
Here is how we can do it step-by-step:
As we can see data is an object, hence we can access its properties using dot notation. The items property is accessed as follows:
data.items The value is an array, to access its second element, we have to use bracket notation:
data.items[1] This value is an object and we use dot notation again to access the name property. So we eventually get:
var item_name = data.items[1].name; Alternatively, we could have used bracket notation for any of the properties, especially if the name contained characters that would have made it invalid for dot notation usage:
var item_name = data['items'][1]['name']; I'm trying to access a property but I get only undefined back?
Most of the time when you are getting undefined, the object/array simply doesn't have a property with that name.
var foo = {bar: {baz: 42}}; console.log(foo.baz); // undefined Use console.log or console.dir and inspect the structure of object / array. The property you are trying to access might be actually defined on a nested object / array.
console.log(foo.bar.baz); // 42 What if the property names are dynamic and I don't know them beforehand?
If the property names are unknown or we want to access all properties of an object / elements of an array, we can use the for...in [MDN] loop for objects and the for [MDN] loop for arrays to iterate over all properties / elements.
To iterate over all properties of data, we can iterate over the object like so:
for(var prop in data) { // `prop` contains the name of each property, i.e. `'code'` or `'items'` // consequently, `data[prop]` refers to the value of each property, i.e. // either `42` or the array } Depending on where the object comes from (and what you want to do), you might have to test in each iteration whether the property is really a property of the object, or it is an inherited property. You can do this with Object#hasOwnProperty [MDN].
To iterate over all elements of the data.items array, we use a for loop:
for(var i = 0, l = data.items.length; i < l; i++) { // `i` will take on the values `0`, `1`, `2`,..., i.e. in each iteration // we can access the next element in the array with `data.items[i]`, example: // // var obj = data.items[i]; // // Since each element is an object (in our example), // we can now access the objects properties with `obj.id` and `obj.name`. // We could also use `data.items[i].id`. } One could also use for...in to iterate over arrays, but there are reasons why this should be avoided: Why is 'for(var item in list)' with arrays considered bad practice in JavaScript?.
With the increasing browser support of ECMAScript 5, the array method forEach [MDN] becomes an interesting alternative as well:
data.items.forEach(function(value, index, array) { // The callback is executed for each element in the array. // `value` is the element itself (equivalent to `array[index]`) // `index` will be the index of the element in the array // `array` is a reference to the array itself (i.e. `data.items` in this case) }); What if the "depth" of the data structure is unknown to me?
In addition to unknown keys, the "depth" of the data structure (i.e. how many nested objects per array) it has, might be unknown as well. How to access deeply nested properties depends on the exact data structure, then?
If the data structure contains repeating structures, e.g. the representation of a binary tree, the solution typically includes to recursively [Wikipedia] access each level of the data structure.
Here is an example to get the first leaf node of a binary tree:
function getLeaf(node) { if (node.leftChild) { return getLeaf(node.leftChild); // <- recursive call } else if (node.rightChild) { return getLeaf(node.rightChild); // <- recursive call } else { // node must be a leaf node return node; } } var first_leaf = getLeaf(root); var root = { leftChild: { leftChild: { leftChild: null, rightChild: null, data: 42 }, rightChild: { leftChild: null, rightChild: null, data: 5 } }, rightChild: { leftChild: { leftChild: null, rightChild: null, data: 6 }, rightChild: { leftChild: null, rightChild: null, data: 7 } } }; function getLeaf(node) { if (node.leftChild) { return getLeaf(node.leftChild); } else if (node.rightChild) { return getLeaf(node.rightChild); } else { // node must be a leaf node return node; } } alert(getLeaf(root).data);A more generic way to access a nested data structure with unknown keys and depth is to test the type of the value and act accordingly.
Here is an example which adds all primitive values inside a nested data structure into an array (assuming it does not contain any functions). If we encounter an object (or array) we simply call toArray again on that value (recursive call).
function toArray(obj) { var result = []; for (var prop in obj) { var value = obj[prop]; if (typeof value === 'object') { result.push(toArray(value)); // <- recursive call } else { result.push(value); } } return result; } var data = { code: 42, items: [{ id: 1, name: 'foo' }, { id: 2, name: 'bar' }] }; function toArray(obj) { var result = []; for (var prop in obj) { var value = obj[prop]; if (typeof value === 'object') { result.push(toArray(value)); } else { result.push(value); } } return result; } alert(JSON.stringify(toArray(data)));Helpers
Since the structure of a complex object or array is not necessarily obvious, we can inspect the value at each step to decide how to move further. console.log [MDN] and console.dir [MDN] help us doing this. For example (output of the Chrome console):
> console.log(data.items) [ Object, Object ] Here we see that that data.items is an array with two elements which are both objects. In Chrome console the objects can even be expanded and inspected immediately.
> console.log(data.items[1]) Object id: 2 name: "bar" __proto__: Object This tells us that data.items[1] is an object, and after expanding it we see that it has three properties, id, name and __proto__. The latter is an internal property used for the prototype chain of the object. The prototype chain and inheritance is out of scope for this answer, though.
Further reading material
How to access arrays and objects is basic JavaScript knowledge and therefore it is advisable to read the MDN JavaScript Guide, especially the sections
Answer by vitmalina for Access / process (nested) objects, arrays or JSON
You can access it this way
data.items[1].name or
data["items"][1]["name"] Both ways are equal.
Answer by finishingmove for Access / process (nested) objects, arrays or JSON
In case you're trying to access an item from the example structure by id or name, without knowing it's position in the array, the easiest way to do it would be to use underscore.js library:
var data = { code: 42, items: [{ id: 1, name: 'foo' }, { id: 2, name: 'bar' }] }; _.find(data.items, function(item) { return item.id === 2; }); // Object {id: 2, name: "bar"} From my experience, using higher order functions instead of for or for..in loops results in code that is easier to reason about, and hence more maintainable.
Just my 2 cents.
Answer by Andrejs for Access / process (nested) objects, arrays or JSON
Using JSONPath would be one of the most flexible solutions if you are willing to include a library: https://github.com/s3u/JSONPath (node and browser)
For your use case the json path would be:
$..items[1].name so:
var secondName = jsonPath.eval(data, "$..items[1].name"); Answer by Travis J for Access / process (nested) objects, arrays or JSON
At times, accessing a nested object using a string can be desirable. The simple approach is the first level, for example
var obj = { hello: "world" }; var key = "hello"; alert(obj[key]);//world But this is often not the case with complex json. As json becomes more complex, the approaches for finding values inside of the json also become complex. A recursive approach for navigating the json is best, and how that recursion is leveraged will depend on the type of data being searched for. If there are conditional statements involved, a json search can be a good tool to use.
If the property being accessed is already known, but the path is complex, for example in this object
var obj = { arr: [ { id: 1, name: "larry" }, { id: 2, name: "curly" }, { id: 3, name: "moe" } ] }; And you know you want to get the first result of the array in the object, perhaps you would like to use
var moe = obj["arr[0].name"]; However, that will cause an exception as there is no property of object with that name. The solution to be able to use this would be to flatten the tree aspect of the object. This can be done recursively.
function flatten(obj){ var root = {}; (function tree(obj, index){ var suffix = toString.call(obj) == "[object Array]" ? "]" : ""; for(var key in obj){ if(!obj.hasOwnProperty(key))continue; root[index+key+suffix] = obj[key]; if( toString.call(obj[key]) == "[object Array]" )tree(obj[key],index+key+suffix+"["); if( toString.call(obj[key]) == "[object Object]" )tree(obj[key],index+key+suffix+"."); } })(obj,""); return root; } Now, the complex object can be flattened
var obj = previous definition; var flat = flatten(obj); var moe = flat["arr[0].name"];//moe Here is a jsFiddle Demo of this approach being used.
Answer by Rune FS for Access / process (nested) objects, arrays or JSON
If you are looking for one or more objects that meets certain criteria you have a few options using query-js
//will return all elements with an id larger than 1 data.items.where(function(e){return e.id > 1;}); //will return the first element with an id larger than 1 data.items.first(function(e){return e.id > 1;}); //will return the first element with an id larger than 1 //or the second argument if non are found data.items.first(function(e){return e.id > 1;},{id:-1,name:""}); There's also a single and a singleOrDefault they work much like firstand firstOrDefaultrespectively. The only difference is that they will throw if more than one match is found.
for further explanation of query-js you can start with this post
Fatal error: Call to a member function getElementsByTagName() on a non-object in D:\XAMPP INSTALLASTION\xampp\htdocs\endunpratama9i\www-stackoverflow-info-proses.php on line 72
0 comments:
Post a Comment