这两种在JavaScript中创建数组列表的方法有什么区别？

Question

How do I dynamically create a list of arrays in JavaScript, that actually shows up in the Developer console as a list of arrays?

Just rephrased this question; there are plenty of examples how to do this, and my code is working, but I'm getting 2 very different results from these 2 methods:

I tried this:

var volume = [];
for (i = 0; i < json.length; i++) {
    var item = new Array(2);
    item[0] = json[i].json_date;
    item[1] = json[i].volume;
    volume.push(item);
    }

So, this code works, and seems to create an array of arrays, but in the developer console the result of console.log(typeof volume[0]) is undefined.

If I create the array manually, it works much better:

var volume = [
    [1313964000000,23.17],
    [1314050400000,23.78],
    [1314741600000,25.24],
    [1314828000000,24.77],
    [1440021600000,82.69]
];

Now console.log(typeof volume[0]) is object. And console.log(volume) results in: (5) [Array(2), Array(2), Array(2), Array(2), Array(2)]. That's what I need, not just [].

I've spent the entire day searching for answers, and have tried many variations of this code, but can't seem to find code that will dynamically create that volume array to correctly show up as an array of arrays.

Has anyone else run into this?

Here is the full code:

var volume = [];

fetch("http://localhost:3000/api/v1/TSLA").then(function(response) {
    if(response.ok) {
        response.json().then(function(json) {
            for (i = 0; i < Object.keys(json).length; i++){
                volume.push(new Array(json[i].json_date, json[i].volume));
                }

            });
        } else {
            console.log('Network request failed with response ' + 
response.status + ': ' + response.statusText);
        }
        });

        console.log(volume);

So, the answer from oknawe helped me to solve this problem; however in a way the question has still not been answered, because the volume array is only usable inside that fetch function. Later in the code, the data is still there, but individual elements test as undefined...

Answer 1

That should work fine, assuming the variable json is structured as you expect. You can also try:

let volume = json.map((i) => [i.json_date, i.volume]);

(Provided your environment lets you use ES6.)

Instead of manually looping over the array, you can iterate over the contents of the array with the map function.

Answer 2

The length of a JSON object will be undefined since objects do not have a length value. You can use Object.keys to get size but that won't do you much good since object values cannot be accessed by index:

var volume = [];
for (i = 0; i < Object.keys(json).length; i++) {
    // can't access using json[i] here
}

However, you can use Object.keys(json) or Object.values(json) and do something like below: (you'll need to have code inside the json callback)

let volume = [];
fetch('/api/foo/bar').then((data) => {
    return data.json();
}).then((json) => {
    console.log(json);
    Object.keys(json).forEach((obj) => {
        // obj = {"json_date": 1313964000000, "volume": 23.17, ...}
        console.log(obj);
        volume.push(new Array(obj["json_date"], obj["volume"]));
    });
    console.log(volume);
}).catch((e) => {
    console.error('There was a problem with the request');
})

Answer 3

Thanks to oknawe, I got it working. Using that code works, provided I use that volume array inside the fetch code. Outside that, the volume array still contains data, but individual elements are undefined. Many thanks to everyone who posted here!