How to read json array value and its child array using jquery

Question

Hi I have a json array in the below format.

{
    "data": {
        "title": "MainNode"
    },
    "children": [{
        "data": {
            "title": "Firstchild",
            "description": "Texttexttext"
        },
        "children": [{
            "data": {
                "title": "Firstchildschild",
                "description": "Texttexttext"
            },
            "children": [{
                "data": {
                    "title": "FirstchildschildsChild",
                    "description": "Texttexttext"
                }
            }]
        }, {
            "data": {
                "title": "FirstchildsSecondchild",
                "description": "Texttexttext"
            },
            "children": [{
                "data": {
                    "title": "FirstchildsSecondchildsChild",
                    "description": "Texttexttext"
                }
            }]
        }]
    }]
}

I have to read the array based on the title text value and list that particular data and its sub data.

For eg. If my input (title value will get from the http URL as follows) is "Firstchild/Firstchildschild/" then I have to list FirstchildschildsChild and its description.

If my input is input is /Firstchild/ then I have to list Firstchildschild & FirstchildsSecondchild data and its sub childs name.

Using jquery how can I fetch records as I mentioned above. Please advise the best way to process this json instead of using lot of loops?

jQuery doesn't provide any helpers for accessing nested objects. You might want to have a look at [Access / process (nested) objects, arrays or JSON](http://stackoverflow.com/q/11922383/218196) — Felix Kling, Jun 04 '16 at 17:57
There will always be loops involved except using `Array.prototype` methods would do those loops internally. Please try something and when it doesn't work show us that code. Or post working code on http://codereview.stackexchange.com/ to ask for ways to improve it — charlietfl, Jun 04 '16 at 18:03

score -1 · Answer 1 · edited May 23 '17 at 10:29

-1

Ok just for these necessities (and believe this is really a big necessity) i had invented an Object method called Object.prototype.getNestedValue() which dynamically fetches you the nested value from deeply nested Objects. All you need to provide is a string for the properties and a number for the array indices in the proper order. OK lets see...

Object.prototype.getNestedValue = function(...a) {
  return a.length > 1 ? (this[a[0]] !== void 0 && this[a[0]].getNestedValue(...a.slice(1))) : this[a[0]];
};

var JSONobj = {
    "data": {
        "title": "MainNode"
    },
    "children": [{
        "data": {
            "title": "Firstchild",
            "description": "Texttexttext"
        },
        "children": [{
            "data": {
                "title": "Firstchildschild",
                "description": "Texttexttext"
            },
            "children": [{
                "data": {
                    "title": "FirstchildschildsChild",
                    "description": "Texttexttext"
                }
            }]
        }, {
            "data": {
                "title": "FirstchildsSecondchild",
                "description": "Texttexttext"
            },
            "children": [{
                "data": {
                    "title": "FirstchildsSecondchildsChild",
                    "description": "Texttexttext"
                }
            }]
        }]
    }]
},
     value = JSONobj.getNestedValue("children",0,"children",0,"data","title");
console.log(value); // Firstchildschild
var a = "children",
    b = 0,
    c = "data",
    d = "title";
    value2 = JSONobj.getNestedValue(...[a,b,a,b,c,d])
    console.log(value2); // Firstchildschild

It also has a sister called Object.prototype.setNestedValue().

edited May 23 '17 at 10:29

Community

1
1

answered Jun 04 '16 at 18:24

Redu

25,060
6
56
76

How exactly does this help here? How should the OP map the input (`Firstchild/Firstchildschild`) to properties? – Felix Kling Jun 04 '16 at 19:17
If you read the question carefully you will understand that "by depending" on the info received from the HTTP URL, OP needs to access a nested property and its value. This is called dynamic access and you can not achieve this job with a static code (without countless ifs and elses). So this solution walks in and everybody becomes very happy provided from their input they can sort out the arguments to pass to this function. – Redu Jun 04 '16 at 19:25
*"provided from their input they can sort out the arguments to pass to this function"* I think that is the bigger problem here. And if you think about it, if they can figure out those arguments from the input, they don't need your function anymore because they already would have the value they are looking for. Besides, your code solves a problem that [has already been solved before](http://stackoverflow.com/search?q=%5Bjavascript%5D+access+nested+object), so why didn't you close/flag the question as duplicate (if you think that this a solution to the problem)? – Felix Kling Jun 04 '16 at 19:29
Well of course not. I am not feeding people with silver spoon here. :) OP still has to do some processing with his input to find out how many levels he has to go and insert necessary arguments to an array (see my last example with vars a,b,c,d) and feed that array to `getNestedValue()`. His array is pretty structured it shouldn't be a big deal. – Redu Jun 04 '16 at 19:33
You may resolve the route from input but you definitely can not access the the value with a static code (you need eval). I see this type of questions showing up too frequently recently and despite i have looked i haven't seen any dynamic access solutions (except one which i didn't like) so i did mine. What's wrong with it..? – Redu Jun 04 '16 at 19:38
http://stackoverflow.com/q/6491463/218196 . But the problem here is not how to access a deeply nested object. The problem is how to *find* a nested object by a property. That's why your proposal won't help here. In order to get the correct path, they have to find the object first. But then they have the object and don't need to use a function like yours. – Felix Kling Jun 04 '16 at 19:40
You are right you are right however.... The point i can not make clear is.. In this particular, very structured object if a property is given to me i can pinpoint it's level and through what properties and indices i can access. Then i construct my arguments array accordingly and access to the conditionally required other property and it's "value"... Yet again you are not totally wrong i should also develop a method to extract a route array (list of properties and indices) from a given value. That was something in my mind. – Redu Jun 04 '16 at 19:52
I had seen the answer you linked ... when i saw the regex all of a sudden it sucked my life energy (not because i hate regex i thought it should be done more functionally) Still i am not totally happy with my codes on get, set and del nested value since they are recursive. I will convert them to iterative. – Redu Jun 04 '16 at 19:57

score -2 · Answer 2 · answered Jun 04 '16 at 18:06

var obj = jQuery.parseJSON( '
    "data": {
        "title": "MainNode"
    },
    "children": [{
        "data": {
            "title": "Firstchild",
            "description": "Texttexttext"
        },
        "children": [{
            "data": {
                "title": "Firstchildschild",
                "description": "Texttexttext"
            },
            "children": [{
                "data": {
                    "title": "FirstchildschildsChild",
                    "description": "Texttexttext"
                }
            }]
        }, {
            "data": {
                "title": "FirstchildsSecondchild",
                "description": "Texttexttext"
            },
            "children": [{
                "data": {
                    "title": "FirstchildsSecondchildsChild",
                    "description": "Texttexttext"
                }
            }]
        }]
    }]
}' );

alert( obj.name === "data" );

You have to parse the element

obj.name === "data"

in the next link

question isn't about parsing json...it's about filtering the resultant. Not to mention that your `alert()` doesn't make sense — charlietfl, Jun 04 '16 at 18:07

How to read json array value and its child array using jquery

2 Answers2