How to iterate over json array in javascript - javascript

Yes there are many post regarding this.But my doubt is little different.I have following array for example
var dictionary = {
"12Jan2013": [{
"id": "0",
"name": "ABC"
}, {
"id": "1",
"name": "DEF"
}],
"13Jan2013": [{
"id": "0",
"name": "PQR"
}, {
"id": "1",
"name": "xyz"
}]
};
Same post is there on same site BUT here in dictionary json array key is dynamic.Here it is date ie 12Jan2013.It can be any date.It is not static.I have searched for that but didn't get solution.
How to iterate over such a json array?
AND How to print json array as in same formate shown above?
EDIT
Here is my real code.And i shown a comment in following code where i wanted to iterate data ie jsonData var in getWeatherDataForCities callback
var arrAllrecords = [];
var arrCityrecordForADay = [];
function getWeatherDataForCities(cityArray, callback){
var toDaysTimestamp = Math.round((new Date()).getTime() / 1000) - (24*60*60);
for(var i in cityArray){
for(var j=1; j<=1; j++){
var jsonurl = "http://api.openweathermap.org/data/2.5/history/city?q="+cityArray[i]+"&dt="+toDaysTimestamp;
$.ajax({
url: jsonurl,
dataType: "jsonp",
mimeType: "textPlain",
crossDomain: true,
contentType: "application/json; charset=utf-8",
success: function(data){
var arrCityRecordForDay = [];
/*arrCityrecordForADay.push(data.list[0].city.name);
arrCityrecordForADay.push(data.list[0].weather[0].description);
arrCityrecordForADay.push(timeConverter(data.list[0].dt));
arrCityrecordForADay.push(data.list[0].main.temp);
arrCityrecordForADay.push(data.list[0].main.humidity);
arrCityrecordForADay.push(data.list[0].main.pressure)
arrCityrecordForADay.push(data.list[0].wind.speed);*/
//'{"pets":[{"name":"jack"},{"name":"john"},{"name":"joe"}]}';
arrCityRecordForDay.push(
{"cityName" : data.list[0].city.name},
{"weather" : data.list[0].weather[0].description}
);
var tempId = data.list[0].city.name+"-"+timeConverter(data.list[0].dt);
arrCityrecordForADay.push(
{tempId : arrCityRecordForDay}
);
if(((arrCityrecordForADay.length)) === cityArray.length) {
callback(arrCityrecordForADay);
}
} });
toDaysTimestamp = toDaysTimestamp - (24*60*60);
}
}
}
$(document ).ready(function() {
var cityArray = new Array();
cityArray[0] = "pune";
getWeatherDataForCities(cityArray, function(jsonData) {
// Here I want to iterate jsonData
});
});

Use for-in...something like:
for (var i in dictionary) {
dictionary[i].forEach(function(elem, index) {
console.log(elem, index);
});
}
where the i would iterate through your dictionary object, and then you can use forEach for every json array in the dictionary(using dictionary[i])
With this code you'll get
Object {id: "0", name: "ABC"} 0
Object {id: "1", name: "DEF"} 1
Object {id: "0", name: "PQR"} 0
Object {id: "1", name: "xyz"} 1
You can tailor the forEach function definition(replacing the console.log bit) to do whatever you want with it.
DEMO
Edit: Doing the same thing using Object.keys
Object.keys(dictionary).forEach(function(key) {
dictionary[key].forEach(function(elem, index) {
console.log(elem, index);
});
});
Edit2: Given the somewhat complicated structure of your jsonData object, you could try using a (sort of) all-purpose function that would act on each type of component separately. I've probably missed a few cases, but maybe something like:
function strung(arg) {
var ret = '';
if (arg instanceof Array) {
arg.forEach(function(elem, index) {
ret += strung(elem) + ',';
});
} else if (arg instanceof Object) {
Object.keys(arg).forEach(function(key) {
ret += key + ': /' + strung(arg[key]) + '/';
});
} else if (typeof arg === "string" || typeof arg === "number") {
ret = arg;
}
return ret;
}
document.body.innerHTML = strung(jsonData);
DEMO

Please note that yours is just a JavaScript array object. To make it simple to understand, you can iterate over it like this:
for (var i in dictionary) {
// do something with i
// here i will contain the dates
for (n = 0; n < dictionary[i].length; n++) {
// do something with the inner array of your objects
// dictionary[i][n].id contains the "id" of nth object in the object i
// dictionary[i][n].name contains the "name" of nth object in the object i
}
}
See this fiddle: http://jsfiddle.net/Ke8F5/
The iteration looks like this:
12Jan2013 : (id = 0, name = ABC) (id = 1, name = DEF)
13Jan2013 : (id = 0, name = PQR) (id = 1, name = XYZ)

You can use a for loop.
for (var i in json) {
...
}
Then, i is the current key, so, you can acess json[ i ] and get the data to the corresponding index.
And then, if you need to iterate over inner elements, you can do the same thing.

You can use for ... in but you should combine it with hasOwnProperty or you'll find yourself iterating over inherited properties likely breaking your code.
for (var key in object) {
if (object.hasOwnProperty(key)) {
// Do stuff.
}
}

Related

Merge and sum values and put them in an array

I'm retrieving values from an external source and apply a foreach loop to the results, with the code below.
angular.forEach(data, function(value, key) {
if (value.start_date > firstdayOfWeek && value.start_date < lastdayOfWeek) {
console.log(value.firstname + ' - ' + value.distance);
} else {
//do nothing
}
});
The result is console for example can be:
kees - 103,4
marco - 44,1
jared - 89,8
kees - 66,2
jef - 23,3
marco - 69,4
I would like to combine all duplicate names and sum the numbers of the duplicates and put them in an array. So the result will be like this for example:
kees - 169,6
marco - 113,5
jared - 89.8
jef - 23.3
What is the best/easiest way to accomplish this?
You cannot store key-value pair in array.
Use object to store key-value pair.
See comments inline in the code.
var obj = {}; // Initialize the object
angular.forEach(data, function(value, key) {
if (value.start_date > firstdayOfWeek && value.start_date < lastdayOfWeek) {
if (obj[value.firstname]) { // If already exists
obj[value.firstname] += value.distance; // Add value to previous value
} else {
obj[firstname] = value.distance; // Add in object
}
} else {
//do nothing
}
});
console.log(obj); // Result
Shorter Version
var obj = {}; // Initialize the object
angular.forEach(data, function(value, key) {
if (value.start_date > firstdayOfWeek && value.start_date < lastdayOfWeek) {
obj[value.firstname] = obj[value.firstname] ? obj[value.firstname] + value.distance : obj[value.firstname];
} else {
//do nothing
}
});
Alternative way is to use Underscore:
var data = [ {key: "kees", value:103.4},
{key: "marco", value:44.1},
{key: "jared", value:89.8},
{key: "kees", value:66.2},
{key: "marco", value:69.4},];
var groups = _(data).groupBy('key');
$scope.out = _(groups).map(function(gr, key) {
return {
type: key,
val: _(gr).reduce(function(m,x) {
return m + x.value;
}, 0)
};
});
Output:
[
{
"type": "kees",
"val": 169.60000000000002
},
{
"type": "marco",
"val": 113.5
},
{
"type": "jared",
"val": 89.8
}
]
demo in Fiddle

Convert a nested object with n levels into array

I have a nested object, something similar to this:
var obj = {
"prop1": {
"prop1A": "A",
"prop1B": {
"prop1BA": "BA"
},
"prop1C": "C"
}
};
My final goal is to filter this object to specific pre defined keys, according to another schema object, for example:
var filterSchema = {
"prop1":["prop1A", {"prop1B":["prop1BA"]}]
};
(The filter keys are predefined, I can structure this object differently if you have a better idea...
The output should be an array. In our case:
["A","BA"]
I managed to do this using recursion over the object. I was wondering if there is more elegant way for achieving this (tried using jQuery's map/extend with no luck)
EDIT
I know that this is a "N" level problem which should be solved by recursion. The difference here is that I have the pre-defined filter which already have the "N" levels. So I though maybe I can filter the Objet using the filter Array and than convert it into an array.
EDIT2
Thanks you all for the different answers. This is my own solution for the problem (which I was looking for a more elegant one in the beginning):
My solution
var obj = {
"prop1": {
"prop1A": "A",
//"prop1B": {
// "prop1BA": "BA"
//},
"prop1C": "C",
"prop1D": "D",
"prop1E": {"prop1E1": "444"}
},
"prop2": "12345"
};
var schemaObj = {
"prop1": {
"prop1A": "true",
"prop1B": {
"prop1BA": "true"
},
"prop1C": "true"
},
"prop2": "true"
};
var resultsArray = [];
var keys = Object.keys(schemaObj);
for(var i=0;i<keys.length;i++){
if(obj[keys[i]]){
parser(schemaObj[keys[i]], obj[keys[i]]);
}
}
function parser(v,o){
if( typeof v === "string" ){
resultsArray.push(o);
}
else{
var keys2 = Object.keys(v);
for(var j=0;j<keys2.length;j++){
if(o[keys2[j]]){
parser(v[keys2[j]], o[keys2[j]]);
}
}
}
}
console.log(resultsArray);
Just a reminder about the question - I already had the recursion solution. I am looking for a different solution
Javascript has eval that allows you to create new code at runtime. A possible solution is to using recursion only once to create a string that looks like:
code = "[obj.prop1.prop1A, obj.prop1.prop1B.prop1BA]"
then you can create a data conversion function with
f = eval("function(obj){return " + code + "]}")
and use it with f(x) to get your array.
This is also the most efficient solution if you have to extract the data many times.
For example:
function mkFilter(schema) {
var parts = [];
function xtract(s, prefix) {
if (typeof s === "string") {
parts.push(prefix + s);
} else if (s && s.constructor === Array) {
s.forEach(function(x){ xtract(x, prefix); });
} else {
for (var f in s) {
xtract(s[f], prefix + f + ".");
}
}
}
xtract(schema, "obj.");
var code = "(function(obj){ return [" + parts.join(", ") + "]; })";
return eval(code);
}
passing schemaFilter as argument mkFilter will return a function that given an object returns the array; with your input:
console.log(mkFilter(filterSchema)(obj));
displays ['A', 'BA']. Of course this approach makes sense if you need to reuse the same filter many times with different objects.
If the object may have missing parts and you don't want the filter to fail but just undefined values in the array the code generator needs to be changed slightly:
var code = "(function(obj){ return [";
parts.forEach(function(p){
var chain = p.split(".");
var expr = "";
for (var i=0; i<chain.length-1; i++) {
expr += chain.slice(0, i+1).join(".") + " && ";
}
code += expr + p + ",";
});
code += "]; })";
This will create in your example a filter evaluating
(function(obj){
return [obj && obj.prop1 && obj.prop1.prop1A,
obj && obj.prop1 && obj.prop1.prop1B &&
obj.prop1.prop1B.prop1BA,];
})
Use jquery's map function. you can try the example code snippet in the console, but jquery must be included
a = { aa: '123', ab: 'asdasd'}
$.map(a, function(key,val){
return val;
});
// The map creates an array with the value you return from the code block.
// Output is ["aa", "ab"]
for reference see
http://api.jquery.com/jQuery.map/
The following function seems to do what you want:
function filter(obj, schema, out) {
var i, schemaItems, schemaItem, isItemLevel;
if (!obj || !schema) return;
out = out || {values: []};
isItemLevel = Array.isArray(schema);
schemaItems = isItemLevel ? schema : Object.keys(schema);
for (i = 0; i < schemaItems.length; i++) {
schemaItem = schemaItems[i];
if (isItemLevel && typeof schemaItem === "string") {
out.values.push(obj[schemaItem]);
} else if (typeof schemaItem === "object") {
filter(obj, schemaItem, out);
} else if (typeof schemaItem === "string") {
filter(obj[schemaItem], schema[schemaItem], out);
}
}
return out.values;
}
called as
var obj = {
"prop1": {
"prop1A": "A",
"prop1B": {
"prop1BA": "BA"
},
"prop1C": "C"
}
};
var filterSchema = {
"prop1":["prop1A", {"prop1B":["prop1BA"]}]
};
filter(obj, filterSchema);
returns:
["A", "BA"]
Take it with a grain of salt, it is by far not tested well-enough and I certainly don't claim it's the most elegant way of solving this.
It works like this:
traverse the items of the schema (which is either an array or an object)
for each schemaItem
if we are in an array and the schemaItem is a string, output the respective property value of obj
else if the schemaItem is itself an object, recurse, but stay at the same level in obj
else if the schemaItem is a string, recurse, drilling into both obj and schema

JSON.stringify whitelisting with nested objects

Given following example:
var test = {
"company_name": "Foobar",
"example": "HelloWorld",
"address": {
"street": "My Street 12",
"example": "BarFoo",
"details": "Berlin",
}
}
console.log(JSON.stringify(test, ['company_name','address','street','example']));
// What I actually want
// console.log(JSON.stringify(test, ['company_name','address.street','address.example']));
How can I use JSON's stringify function to deal with nested objects properly?
Since I have huge JSON objects it happens that a key of a nested object is identical to it's "parent" object. I would like to specify my whitelist more granulary.
If you're willing to go to the effort of whitelisting, then you can establish an array of valid keys, which can provide the ability to nest similar to how many systems do JSON nesting (a . separator, or any separator of your choosing).
var whitelistedObj = whitelistJson(obj, ["company_name", "example", "address.street", "address.example"]);
function whitelistJson(obj, whitelist, separator) {
var object = {};
for (var i = 0, length = whitelist.length; i < length; ++i) {
var k = 0,
names = whitelist[i].split(separator || '.'),
value = obj,
name,
count = names.length - 1,
ref = object,
exists = true;
// fill in any empty objects from first name to end without
// picking up neighboring fields
while (k < count) { // walks to n - 1
name = names[k++];
value = value[name];
if (typeof value !== 'undefined') {
if (typeof object[name] === 'undefined') {
ref[name] = {};
}
ref = ref[name];
}
else {
exists = false;
break;
}
}
if (exists) {
ref[names[count]] = value[names[count]];
}
}
return object;
}
I have a JSFiddle showing its usage as well (to ensure it actually worked on my admittedly small sample set).
You can add toJSON method in your huge JSON objects:
var test = {
"company_name": "Foobar",
"example": "HelloWorld",
"address": {
"street": "My Street 12",
"example": "BarFoo",
"details": "Berlin",
},
toJSON: function () {
return {
company_name: this.company_name,
address: {
street: this.address.street,
example: this.address.example
}
}
}
}
And, you get:
console.log(JSON.stringify(test)); // "{"company_name":"Foobar","address":{"street":"My Street 12","example":"BarFoo"}}"
Or, you can use some filter function: (this function using lodash)
function filter(object, keys, sep) {
sep = sep || '.';
var result = {};
_.each(keys, function (key) {
var keyParts = key.split(sep),
res = object,
branch = {},
branchPart = branch;
for (var i = 0; i < keyParts.length; i++) {
key = keyParts[i];
if (!_.has(res, key)) {
return;
}
branchPart[key] = _.isObject(res[key]) ? {} : res[key];
branchPart = branchPart[key];
res = res[key];
}
_.merge(result, branch);
});
return result;
}
console.log(JSON.stringify(filter(test, ['company_name', 'address.street', 'address.example']))); // "{"company_name":"Foobar","address":{"street":"My Street 12","example":"BarFoo"}}"
Check out jsfiddle http://jsfiddle.net/SaKhG/

Javascript: Getting all existing keys in a JSON array

I have a JSON array like below:
var jsonArray = [{"k1":"v1"},{"k2":"v2"},{"k3":"v3"},{"k4":"v4"},{"k5":"v5"}]
I don't know which keys does exists in this array.
I want to get all the existing key from the array.
It should be possible something like this:
for(i=0;i<jsonArray.lenght;i++){
// something like- key = jsonArray[i].key
// alert(key);
}
Please tell me the method or way to get all keys existing in Json array.
Regards
Why don't you use a
var jsonObject = {"k1":"v1","k2":"v2","k3":"v3","k4":"v4","k5":"v5"}
instead of your
var jsonArray = [{"k1":"v1"},{"k2":"v2"},{"k3":"v3"},{"k4":"v4"},{"k5":"v5"}]
? Then the solution would be so simple: Object.keys(jsonObject).
Try this:
var L = jsonArray.length;
for (var i = 0; i < L; i++) {
var obj = jsonArray[i];
for (var j in obj) {
alert(j);
}
}
I've also made some modifications of your current code (like length caching).
Loop through the object properties, and select the first "real" one (which given your data schema should be the only real one).
var jsonArray = [{"k1":"v1"},{"k2":"v2"},{"k3":"v3"},{"k4":"v4"},{"k5":"v5"}]
for (var i = 0; i < jsonArray.length; i++) {
for (var prop in jsonArray[i]) {
if (jsonArray[i].hasOwnProperty(prop)) {
var key = prop;
break;
}
}
alert(key);
}
See How to loop through items in a js object? for an explanation of why it's important to use hasOwnProperty here.
Try this:
jsonArray.reduce(function(keys, element){
for (key in element) {
keys.push(key);
}
return keys;
},[]);
This should also work for multiple keys in the array objects.
If you're supporting old browsers that don't have reduce and map, then consider using a shim.
var id = { "object": "page", "entry": [{ "id": "1588811284674233", "time": 1511177084837, "messaging": [{ "sender": { "id": "1393377930761248" }, "recipient": { "id": "1588811284674233" }, "timestamp": 1511177084553, "message": { "mid": "mid.$cAAX_9pLcfu1mCnGmiVf2Sxd2erI2", "seq": 1882, "text": "a" } }] }] };
function getKey(obj, data) {
//#author dvdieukhtn#gmail.com
var data = data || [];
if (obj) {
var keys = Object.keys(obj);
for (var pos in keys) {
console.log();
data.push(keys[pos]);
if ((obj[keys[pos]].constructor === Array)) {
for (var i = 0; i < obj[keys[pos]].length; i++) {
getKey(obj[keys[pos]][i], data);
}
}
else if (obj[keys[pos]].constructor === Object) {
getKey(obj[keys[pos]], data);
}
}
return data;
}
}
console.log(getKey(id));

loop a JS Object

I have this JS object:
{
"data": {
"nid": [{
"cid": "32",
"uid": "780",
"comment": "text"
}]
},
"request_status": "found"
}
how can I loop through these items to get comment value ("comment":"text")?
You don't really need to loop to get it. Just do...
var obj = {"data":{"nid":[{"cid":"32","uid":"780","comment":"text"}]},"request_status":"found"};
var text = obj.data.nid[0].comment;
Or if there are several, you can use forEach...
obj.data.nid.forEach(function(val,i) {
alert( val.comment );
});
Or a traditional for loop...
for( var i = 0; i < obj.data.nid.length; i++ ) {
alert( obj.data.nid[i].comment );
}
Or if you want to build an Array, use map...
var arr = obj.data.nid.map(function(val,i) {
return val.comment;
});
Or again a traditional for loop...
var arr = []
for( var i = 0; i < obj.data.nid.length; i++ ) {
arr.push( obj.data.nid[i].comment );
}
Given:
var obj = {
"data": {
"nid": [{
"cid": "32",
"uid": "780",
"comment": "text"
}]
},
"request_status": "found"
};
The direct way to retrieve the comment is:
obj["data"]["nid"][0]["comment"]
// or
obj.data.nid[0].comment
As far as "looping" through the items to get the value, I'm not sure how a loop makes sense. Are you saying you might not know the structure of the object but you know it will have a "comment" field in there somewhere?
The "nid" array only has one item in it - if this was just a sample but really you'll have an array with more values you can loop through that array:
var nid = obj["data"]["nid"], // get a direct reference to the array to save
i; // repeating obj.data.nid everywhere
for (i=0; i < nid.length; i++) {
// do something with the comment in the current item
console.log(nid[i]["comment"]);
}
If you're just referring to that specific object (or if every object you are working with follows that same pattern), then you can just access the value directly:
var theObj = {"data":{"nid":[{"cid":"32","uid":"780","comment":"text"}]},"request_status":"found"};
alert(theObj.data.nid[0].comment);
If you want to do something iterative, then perhaps try this:
var theObj = {"data":{"nid":[{"cid":"32","uid":"780","comment":"text"}]},"request_status":"found"};
for (var index = 0; index < theObj.data.nid.length; index++) {
var item = theObj.data.nid[index];
if (item.comment) {
alert(item.comment);
}
}
Or if you really want to do the entire thing iteratively:
window.searchObj = function(theObj) {
if (theObj.comment) {
alert(theObj.comment);
}
if (theObj instanceof Array) {
searchArray (theObj);
}
else if (theObj instanceof Object) {
for (var key in theObj) {
searchObj(theObj[key]);
}
}
};
window.searchArray = function(theArray) {
for (var index = 0; index < theArray.length; index++) {
var item = theArray[index];
searchObj(item);
}
};
var theObj = {"data":{"nid":[{"cid":"32","uid":"780","comment":"text"}]},"request_status":"found"};
searchObj(theObj);

Categories

Resources