How to create array from nested json in JavaScript?

Question

I have an array of objects - http://api.openweathermap.org/data/2.5/forecast?q=london&appid=7ce3e1102e1902e0f878c2a640e95aed

How can I create three new arrays (seperate variable names) in JavaScript that will contain "dt", "temp_min" and "temp_max" only in a format of:

dtArray = [firstvalue, secondvalue, thirdvalue, ...]
tempMinArray = [firstvalue, secondvalue, thirdvalue, ...]
tempMaxArray = [firstvalue, secondvalue, thirdvalue, ...]

Do I loop ? Or use map? each? And how?

My poor attempt:

var tempMinArray = new Array;
    for (i = 0; i < results.data.length; i++ ) {
tempMinArray = results.data.list[i].main.temp_min;

}

You need to include the relevant error messages or an example of how it is failing within your question, Please review [How to create a Minimal, Complete, and Verifiable example](https://stackoverflow.com/help/mcve) — Stefan Crain, Mar 27 '18 at 15:52

score 2 · Answer 1 · answered Mar 27 '18 at 15:41

2

You use Array#map for this:

$.get('https://api.openweathermap.org/data/2.5/forecast?q=london&appid=7ce3e1102e1902e0f878c2a640e95aed')
  .then(function(resp) {
    var dts = resp.list.map(item => item.dt);
    var tempMins = resp.list.map(item => item.main.temp_min);
    var tempMaxs = resp.list.map(item => item.main.temp_max);
    
    console.log('dt:', dts);
    console.log('temp_min:', tempMins);
    console.log('temp_max:', tempMaxs);
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

answered Mar 27 '18 at 15:41

31piy

21,164
6
40
57

What would it look like if I was to use something more 'noobie' friendly - such as for loop? And no arrow functions that are mystery to me at the minute...? – user007 Mar 27 '18 at 15:50
@user9521814 -- Don't worry about the arrow functions. You can always [convert them to regular functions](https://stackoverflow.com/questions/24900875/whats-the-meaning-of-an-arrow-formed-from-equals-greater-than-in-javas). And, if you feel that you are at the basic level, I still don't recommend using a `for` loop for this task. You should try to get familiar with these approaches; these are the swiss-knives in the battle. – 31piy Mar 27 '18 at 16:02

score 1 · Accepted Answer · answered Mar 28 '18 at 06:48

Ways to achieve :

Use Single Array filter() method and iterate the objects of an array for all the three different arrays using ES6 syntax.

DEMO

var jsonObj = {
 "list": [{
  "dt": 1522227600,
  "main": {
   "temp": 278.73,
   "temp_min": 278.73,
   "temp_max": 278.941,
   "pressure": 1006.02,
   "sea_level": 1013.69,
   "grnd_level": 1006.02,
   "humidity": 100,
   "temp_kf": -0.21
  }
 }, {
  "dt": 1522238400,
  "main": {
   "temp": 279.1,
   "temp_min": 279.1,
   "temp_max": 279.234,
   "pressure": 1004.6,
   "sea_level": 1012.13,
   "grnd_level": 1004.6,
   "humidity": 100,
   "temp_kf": -0.14
  }
 }, {
  "dt": 1522249200,
  "main": {
   "temp": 278.83,
   "temp_min": 278.83,
   "temp_max": 278.898,
   "pressure": 1005.72,
   "sea_level": 1013.37,
   "grnd_level": 1005.72,
   "humidity": 99,
   "temp_kf": -0.07
  }
 }]
};

let dtArray = [];
let tempMinArray = [];
let tempMaxArray = [];

jsonObj.list.filter(obj => {
   (obj.dt) ? dtArray.push(obj.dt) : '';
   (obj.main.temp_min) ? tempMinArray.push(obj.main.temp_min) : '';
   (obj.main.temp_max) ? tempMaxArray.push(obj.main.temp_max) : '';
});

console.log(dtArray);
console.log(tempMinArray);
console.log(tempMaxArray);

Use Seperate Array map() method for each array that we want to create as suggested by 31piy.

DEMO

var jsonObj = {
 "list": [{
  "dt": 1522227600,
  "main": {
   "temp": 278.73,
   "temp_min": 278.73,
   "temp_max": 278.941,
   "pressure": 1006.02,
   "sea_level": 1013.69,
   "grnd_level": 1006.02,
   "humidity": 100,
   "temp_kf": -0.21
  }
 }, {
  "dt": 1522238400,
  "main": {
   "temp": 279.1,
   "temp_min": 279.1,
   "temp_max": 279.234,
   "pressure": 1004.6,
   "sea_level": 1012.13,
   "grnd_level": 1004.6,
   "humidity": 100,
   "temp_kf": -0.14
  }
 }, {
  "dt": 1522249200,
  "main": {
   "temp": 278.83,
   "temp_min": 278.83,
   "temp_max": 278.898,
   "pressure": 1005.72,
   "sea_level": 1013.37,
   "grnd_level": 1005.72,
   "humidity": 99,
   "temp_kf": -0.07
  }
 }]
};

var dtArray = jsonObj.list.map(obj => obj.dt);
var tempMinArray = jsonObj.list.map(obj => obj.main.temp_min);
var tempMaxArray = jsonObj.list.map(obj => obj.main.temp_max);

console.log(dtArray);
console.log(tempMinArray);
console.log(tempMaxArray);

Use JavaScript for ... in loop to iterate the array of objects.

DEMO

var jsonObj = {
 "list": [{
  "dt": 1522227600,
  "main": {
   "temp": 278.73,
   "temp_min": 278.73,
   "temp_max": 278.941,
   "pressure": 1006.02,
   "sea_level": 1013.69,
   "grnd_level": 1006.02,
   "humidity": 100,
   "temp_kf": -0.21
  }
 }, {
  "dt": 1522238400,
  "main": {
   "temp": 279.1,
   "temp_min": 279.1,
   "temp_max": 279.234,
   "pressure": 1004.6,
   "sea_level": 1012.13,
   "grnd_level": 1004.6,
   "humidity": 100,
   "temp_kf": -0.14
  }
 }, {
  "dt": 1522249200,
  "main": {
   "temp": 278.83,
   "temp_min": 278.83,
   "temp_max": 278.898,
   "pressure": 1005.72,
   "sea_level": 1013.37,
   "grnd_level": 1005.72,
   "humidity": 99,
   "temp_kf": -0.07
  }
 }]
};

var dtArray = [];
var tempMinArray = [];
var tempMaxArray = [];

for (var i in jsonObj.list) {
  dtArray.push(jsonObj.list[i].dt);
  tempMinArray.push(jsonObj.list[i].main.temp_min);
  tempMaxArray.push(jsonObj.list[i].main.temp_max);
}

console.log(dtArray);
console.log(tempMinArray);
console.log(tempMaxArray);

score 0 · Answer 3 · answered Mar 27 '18 at 15:42

$.get("https://api.openweathermap.org/data/2.5/forecast?q=london&appid=7ce3e1102e1902e0f878c2a640e95aed", function(data, r){
  var dArray = data.list.map(a=>a.dt)
  var tempMinArray = data.list.map(a=>a.main.temp_min)
  var tempMaxArray = data.list.map(a=>a.main.temp_max)
  console.log(dArray, tempMinArray, tempMaxArray)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

How to create array from nested json in JavaScript?

3 Answers3