从JavaScript对象检索属性

Question

Update: This code just works :) Other logic in my page caused a problem

I'm reading out a JavaScript object from a jQuery data object:

$('body').data('myvals', {var1:"lorem",var2:"ipsum",var3:"dolores",var4:"amet"});
var obj = $('body').data('myvals');

I can successfully access the contents of this object

console.log(Object.entries(obj));

This returns (in Firefox console):

[["var1", "lorem"], ["var2", "ipsum"], ["var3", "dolores"], ["var4", "amet"]]

But I don't succeed in retrieving a specific property (getting 'lorem' by accessing 'var1'). Following attempts return undefined :

console.log(obj.var1);
console.log(obj[var1]);

What am I doing wrong?

Answer 1

This :

[["var1", "lorem"], ["var2", "ipsum"], ["var3", "dolores"], ["var4", "amet"]]

is an array with indexes as keys.Its is not an Object (Even though in Javascript pretty much everything is an Object) So when you try obj.var1 you will get undefined. Cause there is no obj.var1 in there. There is obj[0] which holds array("var1", "lorem"); inside it.

This :

{"var1":"lorem"}, {"var2":"ipsum"},{"var3":"dolores"},{"var4":"amet"}

is an Object , in this one if you type console.log(obj.var1) you will get "lorem".

You added more code since i replied so i knopw need to change my annswer. Your issue is " Object.entries() " , this will return an Array , you need to use

Object.keys(obj) .forEach(function(key){
 console.log(key);
});

Addition Your question layout and provided info have been a bit confusing. Avoiding what you wrote at the start and focusing only on your last addition to your question , your only error is the:

console.log(obj[var1]);

it should be

console.log(obj["var1"]);

Other than that it should work as expected.

Answer 2

this works just fine, I don't see what's the problem: DEMO

$('body').data('myvals', {var1:"lorem",var2:"ipsum",var3:"dolores",var4:"amet"});
var obj = $('body').data('myvals');
console.log(obj.var1);
console.log(obj['var1']);

if the code above doesn't work try console.log($('body').data('myvals')); and see if it returns any value.

if it returns undefined then you've probably forgotten to use document ready, just try wrapping your code in $(function(){ ... })

Answer 3

You can access the entries returned as pairs from Object.entries using destructuring as below:

Object.entries(obj).forEach(([key, value]) => {
  console.log(key);
  console.log(value);
})

An alternative way to iterate using for-of loop

 let obj = { one: 1, two: 2 }; for (let [k,v] of Object.entries(obj)) { console.log(`${k}: ${v}`); } 

Answer 4

Instead of printing Object.entries(obj) to the console, it would be clearer for you to print the object itself to the console. The entry list is a distraction from the issue you're dealing with. What I mean is this:

var obj = $('body').data('myvals');
console.log(obj);

//or this
console.log(JSON.stringify(obj));

That will show you the actual content of the associative array. From there, either of these should work. Don't forget to use string quotes for the array index:

console.log(obj.var1);
console.log(obj["var1"]); // obj[var1] is incorrect, need quotes

If you see "var1" as a key in the full object printout above, then individual property should also be shown here. Otherwise, some other part of your code must have made changes to the content of obj or $('body).data('myvals') by the time you extract "var1"