JavaScript：如何正确遍历数组并将值用作键？

Question

I am getting a JSON-string from a remote endpoint and want to use values as keys. So I am looping through the result like that:

(function() {
// Create the connector object
var myConnector = tableau.makeConnector();

var definitions = [];

// Define the schema
myConnector.getSchema = function(schemaCallback) {

$.ajax({
    url: apiUrl,
    type: 'GET',
    crossDomain: true,
    cache: false,
    headers: {
        'X-Auth-Token':'123',
        'X-Auth-User':'user1'
    },
    dataType: "json",
    success: function(response){

        $.each(response,function(key,value){

                console.log("inside loop");
                console.log(value);
                definitions[value.id]
                     = value.name;

        }); 

        console.log("inside ajax");
        console.log(definitions);
    }

});

console.log("done");
console.log(definitions);

// this is where I want to loop through my result
// whithout success (no console output
for (var key in definitions) {
        console.log(key);

    }

}; //     myConnector.getSchema = function(schemaCallback) {

})(); //function() {

This is the response from the API:

[
{
    "id": 123,
    "name": "Name1"
},
{
    "id": 456,
    "name": "Name2"
},
{
    "id": 789,
    "name": "Name3"
}]

This is the output of the first log command, inside the loop:

{id: 123, name: "Name1"}
id: 123
name: "Name1"
__proto__: Object

The problem is, the last log looks like this:

[123: "Name1", 456: "Name3", 789: "Name4"]
123: "Name1"
456: "Name2"
789: "Name3"
length: 0
__proto__: Array(0)

The problem is clearly: The array length is shown as zero. And this I do not understand.

Later in this script I want to loop through this array again, but because of this strange result, I am not able to address the index keys.

What is it, that I am doing wrong?

Additional information

I am working on a web connector for Tableau that will connect to an RESTful service's endpoint. Unfortunately I cannot publish the actual RESTful URL, because it provides private data.

I am using this simulator: http://tableau.github.io/webdataconnector/Simulator/

I added all the surroundings to the upper source code. There are few more lines of source code, but it's absolutely not related to my work (one more different loop and variable definitions).

I now tried the script in Firefox (Chrome before). The only result I get here is

done myConnector.js:97:5
[]
​
length: 0
​
<prototype>: Array []

All the other console.log's are not triggered.

Also Firefox complains about CORS, this is known because I already fixed the CORS-header server-side. But nevertheless at the end data is being received and populated to the simulator I am using (see URL above)! Clearly I am misunderstanding something here...

Answer 1

You can try initializing definitions as an object instead of array ie. var definitions = {} and the ids its properties. So that you can easily loop through it with a for..in loop.

As the AJAX call is async the log might run on the empty array definitions .

for (id in definitions) {
// Logic
}
var len = Object.keys(definitions).length

Answer 2

Try this. Not work in IE. For crossbrowsers support use regular for loop.

for (var object of response) {
    console.log(object.id);
    console.log(object.name);
}

Regular for

var len = response.length;

for ( var i = 0; i < len; i++ ) {
    var currentObject = response[i];

    console.log(currentObject.id);
    console.log(currentObject.name);
}

In this way you get properties and then can use they as key for looping over another array/object.

Answer 3

OK, this is on me and a misunderstanding of Ajax and asynchronious request. The comments on my question helped to see the problem.

As stated above, I am calling this script from another server ( http://tableau.github.io/webdataconnector/Simulator/ ). The script itself sends a request to a third server.

Forcing the ajax-function to work synchroniously works:

    $.ajax({
        url: apiUrl,
        type: 'GET',
        crossDomain: true,
        cache: false,
        async: false,

        ...})

Now the console show the array as actually filled:

(790) [empty × 123, "Name1", empty × 123, "Name2", empty × 333, "Name3"]
123: "Name1"
456: "Name2"
789: "Name3"
length: 929
__proto__: Array(0)

So finally, it's not about referencing the array / object the wrong way, it's about the asynchronious call.