Get all values of a nested JSON object using any lodash

Question

Scenario: I have a variable JSON

var json = {
    "order": {
        "orderDetails": [{
            "a1": "b1",
            "c1": "d1",
            "e1": "f1"
        }, {
            "a1": "b2",
            "c1": "d2",
            "e1": "f2"
        }, {
            "a1": "b3",
            "c1": "d3",
            "e1": "f3"
        }],
        "orderHeader": [{
            "a2": "b1",
            "c2": "d1",
            "e2": "f1"
        }, {
            "a2": "b2",
            "c2": "d2",
            "e2": "f2"
        }]
    }
};

I need to get an array of all the values of order.orderdetails.a1 like

['b1', 'b2', 'b3']

all the vaues of order.orderdetails.a1 ... order.orderdetails.a1 would be undefined — Jaromanda X
– Jaromanda X, Commented Jan 24, 2016 at 10:06
@jaromandaX all the values of a1 means ,the values of a1 in array orderdetails — Jibin TJ
– Jibin TJ, Commented Jan 24, 2016 at 10:12

Tushar · Accepted Answer · 2016-01-24 11:19:52Z

As you've underscore.js, lodash included, why not taking advantage of them instead of reinventing the wheel.

How about single-line using _.map. _.map also accepts strings as iteratee and will return the value of that key from the passed object.

_.map(json.order.orderDetails, 'a1')

var json = {
    "order": {
        "orderDetails": [{
            "a1": "b1",
            "c1": "d1",
            "e1": "f1"
        }, {
            "a1": "b2",
            "c1": "d2",
            "e1": "f2"
        }, {
            "a1": "b3",
            "c1": "d3",
            "e1": "f3"
        }],
        "orderHeader": [{
            "a2": "b1",
            "c2": "d1",
            "e2": "f1"
        }, {
            "a2": "b2",
            "c2": "d2",
            "e2": "f2"
        }]
    }
};

var result = _.map(json.order.orderDetails, 'a1');

console.log(result);
document.getElementById('result').innerHTML = JSON.stringify(result, 0, 4); // For Demo: Showing the result on the screen

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.0.0/lodash.js"></script>
<pre id="result"></pre>

This is similar to _.pluck in older versions of lodash.

_.pluck(json.order.orderDetails, 'a1')

The same result can be achieved in pure JavaScript using Array#map

json.order.orderDetails.map(e => e.a1)

var json = {
    "order": {
        "orderDetails": [{
            "a1": "b1",
            "c1": "d1",
            "e1": "f1"
        }, {
            "a1": "b2",
            "c1": "d2",
            "e1": "f2"
        }, {
            "a1": "b3",
            "c1": "d3",
            "e1": "f3"
        }],
        "orderHeader": [{
            "a2": "b1",
            "c2": "d1",
            "e2": "f1"
        }, {
            "a2": "b2",
            "c2": "d2",
            "e2": "f2"
        }]
    }
};

var result = json.order.orderDetails.map(e => e.a1);
console.log(result);
document.getElementById('result').innerHTML = JSON.stringify(result, 0, 4);

<pre id="result"></pre>

Sachin · Accepted Answer · 2016-01-24 10:18:58Z

5

You can use this code to do so.

var json={
              "order": {
                "orderDetails": [
                  {
                    "a1": "b1",
                    "c1": "d1",
                    "e1": "f1"
                  },
                  {
                    "a1": "b2",
                    "c1": "d2",
                    "e1": "f2"
                  },
                  {
                    "a1": "b3",
                    "c1": "d3",
                    "e1": "f3"
                  }
                ],
                "orderHeader": [
                  {
                    "a2": "b1",
                    "c2": "d1",
                    "e2": "f1"
                  },
                  {
                    "a2": "b2",
                    "c2": "d2",
                    "e2": "f2"
                  }
                ]
              }
            }

var a1 = json.order.orderDetails.map(function(obj){ return obj.a1 });
console.log(a1);

answered Jan 24, 2016 at 10:18

Sachin

1,2181 gold badge10 silver badges20 bronze badges

3 Comments

Jibin TJ Over a year ago

Thank you sachin.Im new to js and didnt knew the map(). could you also help me find the value of "b1key" incase there is nested array,like "orderDetails": [ { "a1": ["b1key": "b1value"], "c1": "d1", "e1": "f1" },

Sachin Over a year ago

well there's no nested array, but nested objects.. and your welcome :)

Sachin Over a year ago

btw value of a1 in this case is still an object, not an array. [ { "a1": {"b1key": "b1value"}, "c1": "d1", "e1": "f1" } and you will get it via same function with different return statement like this: return obj.a1.b1key

Rajesh Dixit · Accepted Answer · 2016-01-24 10:16:54Z

1

You can try something like this:

var json = {
   "order": {
     "orderDetails": [{
       "a1": "b1",
       "c1": "d1",
       "e1": "f1"
     }, {
       "a1": "b2",
       "c1": "d2",
       "e1": "f2"
     }, {
       "a1": "b3",
       "c1": "d3",
       "e1": "f3"
     }],
     "orderHeader": [{
       "a2": "b1",
       "c2": "d1",
       "e2": "f1"
     }, {
       "a2": "b2",
       "c2": "d2",
       "e2": "f2"
     }]
   }
 }

 var result = {};

// Loop over props of "order"
 for (var order in json.order){
   
   // Each prop is array. Loop over them
   json.order[order].forEach(function(item) {
     
     // Loop over each object's prop
     for (var key in item) {
       
       // Check if result has a prop with key. If not initialize it.
       if (!result[key])
         result[key] = [];

       // Push vaues to necessary array
       result[key].push(item[key]);
     }
   })
 };

 console.log(result);

answered Jan 24, 2016 at 10:16

Rajesh Dixit

25k5 gold badges52 silver badges86 bronze badges

2 Comments

Jibin TJ Over a year ago

Hi rajesh,Thank you for the help.But im looking for a library function so that there will be less code to maintain

Rajesh Dixit Over a year ago

Thats Alright. I'll still keep my answer. You can use it as a reference. :-)

Collectives™ on Stack Overflow

Get all values of a nested JSON object using any lodash

3 Answers 3

Comments

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related