Accessing Simple Array values in javascript

Question

I am literally exhausted right now and failing to access simplest array values in javascript, Okay, i have printed console.log(dataArray)

Console Output:

[]
 account_level : "-"
 address : "-"
 atm_issued : "-"
 avatar : "-"
 branch : "-"
 cnic : "-"

enter image description here

This is what i am trying to access by this:

console.log(dataArray['cnic'])

By this

console.log(dataArray.cnic)

And by this

console.log(dataArray[cnic])

And if i do

console.log(dataArray.cnic)

It prints undefined

console.log(dataArray.length, dataArray instanceof Array, dataArray instanceof Object);

Output of above:

0 true true

How do I access this property?

• M0nst3R: Noman please add to your question the output of console.log(dataArray.length, dataArray instanceof Array, dataArray instanceof Object);
• Felix Kling: While you can add arbitrary properties to an array, it’s rather unconventional, which is why you get so many confused comments and answers. How is the data actually added to the array and when/how aren’t you trying to access it? I think you’re accesing the array before the properties have been added.
• Felix Kling: This only means that the properties exist at the time you expanded the array in the console, not at the time you are logging the array. The order of operations could very well be: 1. Log array. 2. Log property. 3. Add property. 4. Inspect array in console.
• M0nst3R: Noman if you don't mind also printing the output of console.log(dataArray.__proto__);.
• Felix Kling: Because when inspecting an object in the console it is evaluated when you expand it. By that time it may have changed. That is what the little blue i is telling you.

Answer 1

In your case you can't define an array like this beacause the syntax is not compatible.

I suggest you instead of this to use OBJECT SYNTAX as the following code snippet shows:

var obj={
 account_level : "DATA",
 address : "-",
 atm_issued : "-",
 avatar : "-",
 branch : "-",
 cnic : "-"
};
console.log(obj.account_level);

---

You can Also fill the object dynamically like this:

var obj={};
obj["address"] = "DATA1";
obj["atm_issued"] = "DATA2";
obj["avatar"] = "DATA3";
obj["branch"] = "DATA4";
obj["cnic"] = "DATA5";
console.log(obj.cnic);
console.log(obj);

• Lix: That is not an array. It is an object. The OP's confusion probably stemmed from this misunderstanding.
• Mehdi Bouzidi: @Lix can you take a look to my edit please & give me your feedback ?
• Alex: its not json syntax. its object syntax.
• Lix: @MehdiBouzidi - good edits! Definitely an improvement from your first version :)
• Felix Kling: "In your case you can't define an array like this" One can easily do var arr = []; arr.cnic = 'foo';. The OP should not use an array for their purposes, but it's possible.

Answer 2

The syntax you are using is how you would access an object.

let object = {
 account_level: "-"
 address: "-"
 atm_issued: "-"
 avatar: "-"
 branch: "-"
 cnic: "-"
};
console.log(object.cnic);

To access an array you use its index.

let array = ['Chelsea', 'Liverpool', 'Arsenal'];
console.log(array[0]);

• Felix Kling: "The syntax you are using is how you would access an object." Well, arrays are objects. If an array has a property cnic, then using array.cnic will work perfectly fine. After all, accessing array.length works fine too.
• Paul Fitzgerald: @FelixKling you are correct that arrays are objects. What I don't understand is the second point If an array has a property cnic, then using array.cnic... in the example I provide if I do array.Chelsea ir returns undefined. How can an array have a property? Im confused :-S
• Felix Kling: var arr = []; arr.Chelsea = 'foo';. In your example, array does not have a Chelsea property, it has the string value 'Chelsea' as one of it's elements. That's different.
• Paul Fitzgerald: @FelixKling weird, i have never seen that before. Is that a new thing with JS, or has it been around for a long time? Do you have any link where I could read more about this
• Felix Kling: It's been around for as long as arrays have been around. It's just not a common thing to do. I don't know of any specific resource that covers this in depth. Usually it is just explained with the fact that arrays are objects. And objects can have arbitrary properties.

Answer 3

JS arrays always have integers as index. If your key is a text, that means it is an object.

you can access an object these ways

var a = {key1 : "value1", key2 : "value2"};
//METHOD 1
console.log(a.key1);
//METHOD 2
console.log(a['key1']);

This is array

var a = ["value1","value2"];
console.log(a[0]); 

• Felix Kling: Don’t use the term JSON when talking about JavaScript objects. It’s wrong and confusing.
• Himan: agree. Removed.

Answer 4

What you have specify is something like object not an array. In case of object the key:value pair are separated by , which is missing in your format. So the final format is like:

var obj = { "account_level" : "-",
 "address" : "-",
 "atm_issued" : "-",
 "avatar" : "-",
 "branch" : "-",
 "cnic" : "-" };
 
console.log(obj.cnic);

• Alex: he is printing the log, not defining so the format does not apply. and arrays are objects, also.

Answer 5

It looks like something weird is going on with the way your array/object is being filled, please try creating a new one from it as follows :

dataArray = Object.assign({}, dataArray);
console.log(console.log(dataArray.cnic));

• Felix Kling: How would that help? If dataArray doesn't have such a property, how does copying a non-existing property make it appear?
• M0nst3R: But it exists from what the console log is showing.
• Felix Kling: See my comment here. If it's not possible to access the property with dataArray.cnic, then won't be possible to access it after copying it.
• M0nst3R: I do not know the internal workings of Object.assign but my reasoning was that maybe it would resolve this kind of weird glitch he is facing. Ok sure he cannot access the property directly but the console still sees it.
• Felix Kling: As I said in the comment, that's most likely because at the time they expand the value in the console, it will have those properties. At that time they could access them via dataArray.cnic as well. Try this in the console: var obj1 = {}; console.log(obj1); var obj2 = Object.assign({}, obj1); obj1.foo = 42; console.log(obj2);. Notice how expanding obj1 shows the property (even though it could not have possibly existed at the time we logged the object) and obj2 does not.

Answer 6

It was a pain, but i was using firebase, and accessing properties before they were being populated. So first i have let them be populated then access them.