How to access data in multidimensional array using jquery?

Question

I am using ajax to make a call to the server and get back some user data. The server returns back an array formatted like below:

array:6 [▼
  0 => array:17 [▼
    "id" => 334
    "provider" => "some_provider"
    "option_id" => "x124223"
    "option_title" => "title"
    "api_parameter" => "parameter"
    "chart_title" => "title"
    "chart_color" => "#6a76fc"
    "chart_target" => "2220"
    "chart_type" => "line"
    "chart_size" => "4"
    "chart_data" => array:7 [▼
      239 => array:2 [▼
        "data" => 2114
        "created_at" => "14/August"
      ]
      240 => array:2 [▼
        "data" => 2114
        "created_at" => "15/August"
      ]
      241 => array:2 [▶]
      242 => array:2 [▶]
      243 => array:2 [▶]
      244 => array:2 [▶]
      245 => array:2 [▶]
    ]
    "average" => 2122.0
    "current" => array:2 [▶]
    "last" => array:2 [▶]
    "current_status_icon" => "md-trending-neutral"
    "current_status_color" => "#3DDCF7"
    "status_message" => "hmm... The needle didnt move."
  ]
  1 => array:17 [▼
    "id" => 345
    "provider" => "some_other_provider"
    "option_id" => "x124"
    "option_title" => "Title"
    "api_parameter" => "parameter"
    "chart_title" => "title"
    "chart_color" => "#6A76FC"
    "chart_target" => "Set a target"
    "chart_type" => "line"
    "chart_size" => "4"
    "chart_data" => array:7 [▼
      202 => array:2 [▼
        "data" => 5
        "created_at" => "13/August"
      ]
      203 => array:2 [▼
        "data" => 5
        "created_at" => "14/August"
      ]
      204 => array:2 [▶]
      205 => array:2 [▶]
      206 => array:2 [▶]
      207 => array:2 [▶]
      208 => array:2 [▶]
    ]
    "average" => 5.0
    "current" => array:2 [▼
      "data" => 5
      "created_at" => "16/August"
    ]
    "last" => array:2 [▼
      "data" => 5
      "created_at" => "16/August"
    ]
    "current_status_icon" => "md-trending-neutral"
    "current_status_color" => "#3DDCF7"
    "status_message" => "hmm... The needle didnt move."
  ]

I then try to access the data within the array using a foreach loop

$.ajax({url: "/url/to/server", success: function(result){
    result.forEach(function(item) {
      console.log(item['chart_data']['data']);
    });
  }, complete: function() {
      // Schedule the next request when the current one's complete
      setTimeout(checkForUpdates, 3000);
    }
  });
});

But this just logs undefined. How do I access the chart_data nested within each of the top level arrays?

You need to access the nested array: chart_data is an array, which has elements that have the data property. So you'll need another nested loop — trincot
– trincot, Commented Aug 21, 2016 at 12:37
@trincot Thanks I tried this. I got an error that reads Uncaught TypeError: item.chart_data.forEach is not a function — kevinabraham
– kevinabraham, Commented Aug 21, 2016 at 12:45
Where is that JSON output coming from? PHP? The syntax is not correct. It would be useful if you would include in your question the output you get when doing console.log(JSON.stringify(result)). That way we will see the correct JSON. — trincot
– trincot, Commented Aug 21, 2016 at 12:47
@trincot Yes the json output is from php. Console.log shows something similar but just set as array objects. — kevinabraham
– kevinabraham, Commented Aug 21, 2016 at 12:49
All I can say is that it is not JSON (arrays with length 17 should have 17 indices, not 17 properties). Please provide the console.log output I suggested. — trincot
– trincot, Commented Aug 21, 2016 at 12:54

trincot · Accepted Answer · 2016-08-21 12:57:08Z

2

Your data structure is not clear, as the structure you have shared is output in PHP notation, and does not represent the JSON you receive in JavaScript.

But my guess is that this will work:

result.forEach(function(item) {
    Object.keys(item.chart_data).forEach(function (key) {
        console.log(item.chart_data[key].data);
    });
});

edited Aug 21, 2016 at 12:57

answered Aug 21, 2016 at 12:52

trincot

357k38 gold badges282 silver badges338 bronze badges

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

Collectives™ on Stack Overflow

How to access data in multidimensional array using jquery?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related