Given a JavaScript array of objects, how can I get the key and value of each object?
The code below shows what I'd like to do, but obviously doesn't work:
var top_brands = [ { 'Adidas' : 100 }, { 'Nike' : 50 }];
var brand_options = $("#top-brands");
$.each(top_brands, function() {
brand_options.append($("<option />").val(this.key).text(this.key + " " + this.value));
});
So, how can I get this.key and this.value for each entry in the array?
Change your object.
var top_brands = [
{ key: 'Adidas', value: 100 },
{ key: 'Nike', value: 50 }
];
var $brand_options = $("#top-brands");
$.each(top_brands, function(brand) {
$brand_options.append(
$("<option />").val(brand.key).text(brand.key + " " + brand.value)
);
});
As a rule of thumb:
An object has data and structure.
'Adidas', 'Nike', 100 and 50 are data.
Object keys are structure. Using data as the object key is semantically wrong. Avoid it.
There are no semantics in {Nike: 50}. What's "Nike"? What's 50?
{key: 'Nike', value: 50} is a little better, since now you can iterate an array of these objects and values are at predictable places. This makes it easy to write code that handles them.
Better still would be {vendor: 'Nike', itemsSold: 50}, because now values are not only at predictable places, they also have meaningful names. Technically that's the same thing as above, but now a person would also understand what the values are supposed to mean.
$.each(top_brands, function() {
var key = Object.keys(this)[0];
var value = this[key];
brand_options.append($("<option />").val(key).text(key + " " + value));
});
If this is all the object is going to store, then best literal would be
var top_brands = {
'Adidas' : 100,
'Nike' : 50
};
Then all you need is a for...in loop.
for (var key in top_brands){
console.log(key, top_brands[key]);
}
$.each(top_brands, function(index, el) {
for (var key in el) {
if (el.hasOwnProperty(key)) {
brand_options.append($("<option />").val(key).text(key+ " " + el[key]));
}
}
});
But if your data structure is var top_brands = {'Adidas': 100, 'Nike': 50};, then thing will be much more simple.
for (var key in top_brands) {
if (top_brands.hasOwnProperty(key)) {
brand_options.append($("<option />").val(key).text(key+ " " + el[key]));
}
}
Or use the jquery each:
$.each(top_brands, function(key, value) {
brand_options.append($("<option />").val(key).text(key + " " + value));
});
for (var i in a) {
console.log(a[i],i)
}
Object.keys(top_brands).forEach(function(key) {
var value = top_brands[key];
// use "key" and "value" here...
});
Btw, note that Object.keys and forEach are not available in ancient browsers, but you should use some polyfill anyway.
Related
https://jsfiddle.net/MauroBros/f1j0qepm/28/#&togetherjs=qedN5gf7SF
I have a JSON object as follows:
var values = [
{"aname":"account1", "pname":"pname1", "vname":"vname1", "vid":"xxx"},
{"aname":"account2", "pname":"pname2", "vname":"vname2", "vid":"xxx"},
{"aname":"account2", "pname":"pname2", "vname":"vname3", "vid":"xxx"},
{"aname":"account2", "pname":"pname3", "vname":"vname1", "vid":"xxx"},
]
I grouped the "vname" by "pname"
var groups = {};
$.each(values, function(key, values) {
if (!groups.hasOwnProperty(values.pname)) {
groups[values.pname] = {
aname : values.aname,
aid : values.aname,
pname : values.pname,
pid : values.pid,
vid: [],
vname: []
};
}
groups[values.pname].vname.push({
vname: values.vname,
vid: values.vid
});
});
Now I'm trying to loop:
$.each(groups, function(key, groups) {
$('#provider-accounts')
.append($("<optgroup></optgroup>")
.attr("label"," " + groups.aname))
.append($("<optgroup></optgroup>")
.attr("label"," " + groups.pname))
.append($("<option></option>")
.attr("value",groups.vid)
.text(" " + groups.vname[0].vname));
});
ISSUE
The output doesn't return all the options "vname" but only the first one.
How can I insert a loop in the loop. Something like this:
$.each(groups, function(key, groups) {
$('#provider-accounts')
.append($("<optgroup></optgroup>")
.attr("label"," " + groups.aname))
.append($("<optgroup></optgroup>")
.attr("label"," " + groups.pname))
for (var i = 0; i < groups.vname[0].vname.length; i++) {
.append($("<option></option>")
.attr("value",groups.vid)
.text(" " + groups.vname[0].vname[i]));
}
});
Any help?
Thanks
Instead of trying to chain it all into one chain I would create a separate object for the groups first. Then loop through the array and append the various options to the second group and finally append the groups to the select.
This seems to be easier to read also than the chained appends you are currently using
$.each(groups, function(key, groups) {
var $group1 = $("<optgroup>").attr("label", " " + groups.aname);
var $group2 = $("<optgroup>").attr("label", " " + groups.pname);
groups.vname.forEach(function(el) {
$group2.append(new Option(el.vname, el.vid));
});
$('#provider-accounts').append($group1, $group2);
});
#charlietfl's answer does it, and I agree that it would make your code more readable. But if you're still interested if such looping is possible - yes it is. You can use Array .map() for this and append the resulting array of Option elements.
.append(
groups.vname.map( vItem =>
$("<option></option>")
.attr("value",groups.vid)
.text(" " + vItem.vname)
));
I tried to fork your fiddle here: https://jsfiddle.net/b2yg5jvm/
Below part of json response, how can i get to objects in rows object, i need to do loop for all id and others attributes. , it is'nt a array so active_chats.rows[1].id not work. Thanks in advance for answers
{
"active_chats":{
"rows":{
"2":{
"id":"2",
"nick":"bart",
"status":"1",
"time":"1453463784",
"user_id":"2",
"hash":"183c12afef48ea9942e5c0a7a263ef441039d832",
"ip":"::1",
"dep_id":"2",
"support_informed":"1",
"has_unread_messages":"1",
"last_user_msg_time":"1453476440",
"last_msg_id":"11",
"wait_time":"5171",
"user_tz_identifier":"Europe/Paris",
"nc_cb_executed":"1",
"user_closed_ts":"1453470674",
"department_name":"ECODEMO"
},
"3":{
"id":"3",
"nick":"robert",
"status":"1",
"time":"1453470058",
"user_id":"2",
"hash":"0fae69094667e452b5401552541602d5c2bd73ef",
"ip":"127.0.0.1",
"dep_id":"2",
"user_status":"1",
"support_informed":"1",
"user_typing":"1453479978",
"user_typing_txt":"Gość opuścił chat!",
"last_msg_id":"10",
"wait_time":"3285",
"user_tz_identifier":"Europe/Paris",
"nc_cb_executed":"1",
"user_closed_ts":"1453479983",
"unanswered_chat":"1",
"department_name":"ECODEMO"
}
},
"size":2
Just do
for (var key in p) {
if (p.hasOwnProperty(key)) {
console.info(key + " => " + p[key]);
}
}
where p is your json response object
did some tests here, your json is invalid.. but if fixed:
for(var row in response.active_chats.rows)
{
for (var key in response.active_chats.rows[row]) {
console.log(key + " => " + response.active_chats.rows[row][key]);
}
}
fiddle example (printing to console)
should do the trick
In order to access the id you would have to do:
var number = 2
var idVal = obj.active_chats.rows[number].id; // idVal = 2
Here obj being whatever variable you saved the JSON in. Looping through the length of active_chats and rows would then help you step through each value.
Also, you can toss your JSON to the text box on this site to get a better picture of what is going on: http://jsbeautifier.org
I often need to monitor the contents of variables when testing programs like this:
var anObject = {aProperty:true}; // this is just an example.
console.log('anObject.aProperty: ' + anObject.aProperty); <-- typed it twice.
I type the name of the variable into a string followed by typing the same thing again to reference the value.
It seems like an unnecessary duplication to write the same thing twice every time. Is there a way to do this by having to only write the name once using a function?
For example:
function show(value) {
console.log("'" + ??? + "':" + value):
}
so it can be used like this (or something similar):
show(anObject.aProperty);
The above is just a simple example. Basically what I'm asking is whether there is a way to get the name of the variable that was passed into a function so that the name can then be output as part of a string showing the value of the variable.
Haters are gonna hate:
http://jsfiddle.net/coma/6HTnB/
var anObject = {
aProperty: ['uno', 'dos', 'tres']
};
var log = function(object, property) {
var evil = 'object.' + property;
console.log(evil, eval(evil));
};
log(anObject, 'aProperty[2]');
Or even worse:
http://jsfiddle.net/coma/6HTnB/2/
var anObject = {
aProperty: ['uno', 'dos', 'tres']
};
var show = function(a) {
console.log(a + ':', eval(a));
};
show('anObject.aProperty[2]');
Well, eval is not evil per se, but the second approach is kind of ugly since the function needs to be in the correct scope.
Here is how I would write such a show() function:
function show(object, property) {
console.log(property + ":", object[property]);
}
To use it:
var mouse = { x: 100, y: 200 };
show(mouse, 'x');
And if you want to test it: http://jsfiddle.net/IQAndreas/c9SUm/
You don't print out the name of the object (and due to the way JavaScript variables and references work, there is no easy way to do so), you only get the name of the property you want to access. If you want the name of the object as well, you could manually print it out before listing the properties:
var mouse = { x: 100, y: 200 };
console.log("== mouse ==");
show(mouse, 'x');
show(mouse, 'y');
Which outputs:
"== mouse =="
"x:" 100
"y:" 200
You can however print the type of the object, (if you are using JavaScript's class features that is, otherwise, anything created with {} is just said to be an Object):
function show(object, property) {
var className = object.constructor.name;
console.log(className + "#" + property + ":", object[property]);
}
Sample output (assuming you have created the Mouse class):
"Mouse#x:" 100
"Mouse#y:" 200
And if you want to test it: http://jsfiddle.net/IQAndreas/c9SUm/2/
Based on coma's answer, I think this may be the solution:
function show() {
return function (value) {
console.log(value + ':', eval(value));
};
};
function aTest() {
obj = {x:1, y:2}; show()('obj');
};
function bTest() {
obj = {x:3, y:4}; show()('obj');
};
aTest(); // obj: { x: 1, y: 2 }
bTest(); // obj: { x: 3, y: 4 }
I have a JSON object that I am looping over with each() to add table rows to a table. I can't ensure the completeness of the data presented in the JSON arrays and I occasionally run into some NULLs.
For instance:
// A GOOD ARRAY
{
id: "193",
location: {
city: "Atlanta",
state: "GA"
},
name: "John"
},
// NOW WE STUMBLE UPON A BAD ARRAY WITH A NULL
{
id: "194",
location: {
city: "Boise",
state: null
},
name: "Frank"
},
{...}
Now, when I am dealing with JSON objects that have no NULL values, the each() loops over with no problems. As soon as I encounter a member with NULL anywhere in the array, the looping breaks.
This is how I am looping over this:
$.getJSON("/getstuff/jsonprovider.php", function (data) {
var results = data.parentnode;
var tableThing = $(".myTable tbody");
var i = 0;
$.each(results, function () {
tableThing.append('<tr><td></td><td>' + results[i].id + '</td><td>' + results[i].name + '</td><td>' + results[i].location.city + ', ' + results[i].location.state + '</td></tr>');
i++;
});
});
Should I be investigating something other than each() here, or should I be using a completely different method?
Thank you
Since your data may have nulls, you need to make sure that the data exists before you attempt to use it. It is also more efficient to only use .append once. Below i'm using a default empty object and $.extend deep copy to ensure that the object we are pulling data from always has all data values defined, even if the value isn't in the json. I'm still not sure how null's will be handled at this point.
var emptyObj = {
id: "",
name: "",
location: {
city: "",
state: ""
}
},htmlToAppend = "";
$.each(results, function (i,obj) {
var newObj = $.extend(true,{},emptyObj,obj);
htmlToAppend += '<tr><td></td><td>' + newObj.id + '</td><td>' + newObj.name + '</td><td>' + newObj.location.city + ', ' + newObj.location.state + '</td></tr>';
});
tableThing.append(htmlToAppend);
The proper way to do a $.each is like this:
var myObj = {...};
$.each(myObj, function(k, v){
//..
});
You need two parameters above:
k holds the index or the key
v holds the value at that index or key
If you were going to use a counter variable like i you might as well use JavaScripts for in loop:
for(var i in myObj){
//..
}
I have created a var and passed JSON data(comma seperated values) to it, but when I want to display json data - it only returns null. Here's the code:
<script type="text/javascript">
var data1 = [
{order:"145",country:"Dubai",employee:"permanent",customer:"self"}
];
document.write(data1);
</script>
You can either do it like this:
var data1 = [{order:"145",country:"Dubai",employee:"permanent",customer:"self"} ];
data1.forEach(function(data){
document.write(data.order);
document.write(data.country);
document.write(data.employee);
document.write(data.customer);
});
or you can do it like this
var data1 = [
{order:"145",country:"Dubai",employee:"permanent",customer:"self"}
];
$.each(data1[0], function(key, value){
document.write(key + " " + value);
});
Either way, storing just one object in the list makes this answer a bit redundant unless I show you how to loop over multiple objects.
var data1 = [
{order:"145",country:"Dubai",employee:"permanent",customer:"self"},
{order:"212",country:"Abu-Dhabi",employee:"permanent",customer:"Tom"}
];
data1.forEach(function(data){
$.each(data, function(key, value){
document.write(key+" "+value);
});
});
I'm using a mix of jQuery here aswell, which might not be optimal but atleast it serves to show that there are multiple ways to accomplishing what you need.
Also, the forEach() method on arrays is a MDN developed method so it might not be crossbrowser compliant, just a heads up!
If you want pure JS this is one of the ways to go
var data1 = [
{order:"145",country:"Dubai",employee:"permanent",customer:"self"},
{order:"212",country:"Abu-Dhabi",employee:"permanent",customer:"Tom"}
];
for(json in data1){
for(objs in data1[json]){
document.write(objs + " : " + data1[json][objs]);
}
}
For simple and quick printing of JSON, one can do something like below and pretty much same goes for objects as well;
var json = {
"title" : "something",
"status" : true,
"socialMedia": [{
"facebook": 'http://facebook.com/something'
}, {
"twitter": 'http://twitter.com/something'
}, {
"flickr": 'http://flickr.com/something'
}, {
"youtube": 'http://youtube.com/something'
}]
};
and now to print on screen, a simple for in loop is enough, but please not e, it won't print array instead will print [object Object]. for simplicity of answer, i won't go in deep to print arrays key and value in screen.
Hope that this will be usefull for someone. Cheers!
for(var i in json) {
document.writeln('<strong>' + i + '</strong>' +json[i] + '<br>');
console.log(i + ' ' + json[i])
}