Guide to forming a JavaScript array from nested JSON data

Question

Guide to forming a JavaScript array from nested JSON data

Looking to parse through an array of objects related to London weather data from the OpenWeatherMap API.

How can I create three distinct arrays in JavaScript, each with variable names "dtArray", "tempMinArray", and "tempMaxArray", containing only values for "dt", "temp_min", and "temp_max" respectively in the following format:

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

Should I utilize a loop, or is there another method like map or each that would be more efficient?

My current attempt:

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

javascript arrays json

Answer 1

Answer №1

To achieve this, you can utilize the Array#map method.

$.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>

Answer 2

To achieve this, you can utilize the Array#map method.

$.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>

Answer 3

Answer №2

Methods for achieving :

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

EXAMPLE

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);

Implement Separate Array map() method for each array as suggested by 31piy.

EXAMPLE

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);

Utilize JavaScript for ... in loop to iterate through the array of objects.

EXAMPLE

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);

Answer 4

Methods for achieving :

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

EXAMPLE

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);

Implement Separate Array map() method for each array as suggested by 31piy.

EXAMPLE

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);

Utilize JavaScript for ... in loop to iterate through the array of objects.

EXAMPLE

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);

Answer 5

Answer №3

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

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

Answer 6

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

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

Guide to forming a JavaScript array from nested JSON data

Answer №1

Answer №2

Answer №3

Similar questions

Retrieving POST data from AngularJS AJAX in Python FlaskExplanation: In this

Issue with pop-up functionality on web page using HTML, CSS, and JavaScript

What is the best way to enable autocomplete in AngularJS?

optimal application of css with jquery

Reload the webpage locally without sending a request to the server

A guide on managing Ngb Bootstrap carousel slide with a button in Angular

A visually stunning image showcase with dynamic resizing and strategically placed white spaces using the m

How come an element retrieved with getElementById in Next.js comes back as null despite the presence of a defined document?

Retrieve the value of [routerLinkActive] in the component's class

Is there a way for me to create a route similar to Instagram's setup, such as localhost:3000

How come I am unable to determine the size of the element using this pointer trick?

What is the method or variable called "afterShow" used for in FancyBox V4 and how does it differ from its counterpart in JQuery-FancyBox V3?

What is the reason for having two plugin declarations within the galleriffic.js file?

Using AngularJS to Retrieve a Specific DOM Element Using its Unique Identifier

What could be causing my dropdown links to malfunction on the desktop version?

Is it possible in Java to convert a JSONObject to a JSONStringer and vice versa?

Adjust padding of elements based on scrolling movements

Ways to eliminate double slashes from URL in Next Js. Techniques for intercepting and editing a request on the server side using getServerSideProps

Tips for transforming a Vue 2 website into a progressive web application (PWA) were requested

Updating object values within a while loop using JavaScript