Improper array handling by jQuery: length= 0 bug?

Question

I don't know if this is my little knowledge of jQuery or it is just a bug, but here's what happens. I have this small piece of JSON code

{
    "planes":[
        {
            "id":1,
            "name":"Boeing 767-300",
            "height":54.9 ,
            "wingspan":47.6, 
            "vel": 851,
            "vel max":913,
            "plane width":283.3,
            "weight":86070, 
            "full weight":158760, 
            "passengers":{
                "1 class":350,
                "2 class":269,
                "3 class":218
            },
            "fuel tank":90.625,
            "engine":"2 turbofan General Electric CF6-80C2"
        },
        {
            "id":2,
            "name":"Boeing 737-800",
            "height":33.4 ,
            "wingspan":35.8, 
            "vel": 840,
            "vel max":945,
            "plane width":105.44,
            "weight":32704, 
            "full weight":56472, 
            "passengers":{
                "1 class":189
            },
            "fuel tank":90.625,
            "engine":"2 turbofan CFM56-3C1"
        }
    ]
}

which I'm then getting with jQuery's getJSON without any flaw. Then I want two separate arrays: one holding the keys and the other holding the values, and again no problem with Object.keys and Object.values. By logging the result in a single string, everything is fine. Until I try to construct an associative array using keys as indexes and values as data. By logging the result, I get an extra "length" index with value "0". here's my jQuery code

var arr=[];
$.getJSON("js/jsondata.json", function(data){
    var keys= Object.keys(data.planes[0]);
    var values= Object.values(data.planes[0]);
//im only testing on the first object, for now

    $.each(keys, function(i){
//creating the associative index and assigning the value
        arr[keys[i]]= values[i];
        console.log("Key: "+ keys[i]+", Value: "+values[i]);
//this logs the exact values and indexes
    });
    console.log(arr);
//this logs an extra "length" 0
});

I think you need to change this var arr=[]; to this var arr={}; or to this var arr=Object.create(null); — Ele
– Ele, Commented Oct 26, 2018 at 16:10
You key is not an integer so are basically just recreating the object.... var a = []; a['id] = 1; console.log(a.length) — epascarello
– epascarello, Commented Oct 26, 2018 at 16:14

Ele · Accepted Answer · 2018-10-26 16:20:31Z

1

What you really want to use is a key-value object and not an array. So you have at least to options:

Actually the arrays are objects, and you will be able to attach/add new properties, however, this kind of objects have a pre-defined prototype and properties. One of these properties is length. Cause that, you're getting an "unexpected" property length.

Changing this var arr = []; to this var arr = {};.
Changing this var arr = []; to this var arr = Object.create(null);.

Adding properties to an object array

let arr = [2];
arr['myKey'] = 'EleFromStack';

console.log(arr.myKey);
console.log(arr.length); // 1 cause length is part of Array type.

Adding properties to a key-value object

let arr = {}; // Object.create(null);
arr['myKey'] = 'EleFromStack';

console.log(arr.myKey);
console.log(arr.length); // undefined cause length is not part of the Object type.

edited Oct 26, 2018 at 16:20

answered Oct 26, 2018 at 16:13

Ele

33.8k7 gold badges43 silver badges80 bronze badges

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

Comments

Drew Knab · Accepted Answer · 2018-10-26 16:26:32Z

0

Biggest problem is there's no such beast as associative arrays in JavaScript. All arrays must have numbered indices. Association the way you want is handled with objects.

So, you can just assign the first plane in your planes array to a variable and retain your original association rather than iterate it.

Is there a particular reason you're trying to disassemble and reassemble your object to an array this way?

answered Oct 26, 2018 at 16:26

Drew Knab

544 bronze badges

Collectives™ on Stack Overflow

Improper array handling by jQuery: length= 0 bug?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related