How to access nested array inside a JSON object from javascript

Question

I am working with a json object that has nested arrays as well as names with spaces such as Account ID. I need to display just the Account ID's in my Vue.js application. I am able to get my entire response.data json object but not too sure how to get just the Account ID when it's nested like the example below.

JSON

"response": {
    "result": {
      "Accounts": {
        "row": [
          {
            "no": "1",
            "FL": [
              {
                "val": "ACCOUNT ID",
                "content": "123456789"
              },
              ...

Vue.js

<script>
        import axios from "axios";
        export default {
            name: 'HelloWorld',
            data () {
                return {
                    accounts: [],
                    accountIDs: []
                }
            },
            mounted() {
              var self = this;
              axios.get('https://MYAPIGETREQUEST')
                .then( function(res){
                    self.accounts = res.data;
                    self.accountIDs = //This is where I want to get the Account ID
                    console.log('Data: ', res.data);
                })
                .catch( function(error){
                    console.log('Error: ', error);
                })
            }
        }
    </script>

if you know the shape of the json data structure, why can't you access it directly? with es6 destructuring, it's even easier — codemax
– codemax, Commented Mar 20, 2018 at 1:00
I do feel like it should be that simple but not sure what I'm doing wrong. I'm trying to display the 'Account ID' in a text area to see if I am grabbing the data but nothing is appearing. I was trying res.data.response.result.row[0].FL[0].val["ACCOUNT ID'].content, but I know I'm doing something wrong — Tim
– Tim, Commented Mar 20, 2018 at 1:04
i don't think it's res.data. it should be res.response or res.result — codemax
– codemax, Commented Mar 20, 2018 at 1:05
You just need to walk down the object structure... jsfiddle.net/7jkuhuah/3 — John
– John, Commented Mar 20, 2018 at 1:09

jonhid · Accepted Answer · 2018-03-20 01:11:42Z

1

Try something like this

if(res.data.response.result.Accounts.row[0].FL[0].val === 'ACCOUNT ID') {

   self.accountIDs = res.data.response.result.Accounts.row[0].FL[0].content;

   ...
}

answered Mar 20, 2018 at 1:11

jonhid

2,1451 gold badge14 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Tim Over a year ago

I realized that I was missing part of my data structure. I had res.data.result... but I needed to have res.data.response.result... However, I do like this solution for additional validation of my response object if I ever need to do this.

Zohaib Jawaid · Accepted Answer · 2018-03-21 04:08:57Z

0

You can also try something like this:

let rowAccounts = response.result.Accounts.row
   .map(row => row.FL
       .filter(FL => FL.val === 'ACCOUNT ID')
       .map(acc => acc.content)
    );

self.accountIDs = [].concat.apply([], rowAccounts);

In rowAccounts, you get and array of accounts array per row like:

[
   0: ['acc row 1', 'another acc row1'],
   1: ['acc row 2'....]
]

Now it all depends upon your implementation the way you like it.

edited Mar 21, 2018 at 4:08

answered Mar 20, 2018 at 1:51

Zohaib Jawaid

1436 bronze badges

Collectives™ on Stack Overflow

How to access nested array inside a JSON object from javascript

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related