Related
var jsonObj = [
{
property1 : "one",
property2 : "two",
property3 : "three",
property4 : [
{
name: "nicholas",
name1: "cage"
},
{
name: "stuart",
name1: "walker"
}
]
}
];
var strBuilder = [];
for(var key in jsonObj){
if (jsonObj.hasOwnProperty(key)) {
strBuilder.push("Key is " + key + ", value is " + jsonObj[key] + "\n");
}
}
alert(strBuilder.join(""));
I am getting object object when it reached near to property 4,
but I want to access the whole code with a loop.
As you can see, The object is casted to string itself not what's inside the object. You might want to get the content first.
So I modified your code into a recursive function.
var jsonObj = [
{
property1 : "one",
property2 : "two",
property3 : "three",
property4 : [
{
name: "nicholas",
name1: "cage"
},
{
name: "stuart",
name1: "walker"
}
]
}
];
function objectStringer(obj){
var strBuilder = [];
for(var key in obj){
if (obj.hasOwnProperty(key)) {
if(typeof(obj[key]) == 'object')
strBuilder.push(objectStringer(obj[key]).join(""))
else
strBuilder.push("Key is " + key + ", value is " + obj[key] + "\n");
}
}
return strBuilder;
}
console.log(objectStringer(jsonObj).join(""));
When you get to property4 your function tries to turn an array of objects into a string, which as you noticed doesn't work very well. You need to take each of those objects in the array and process them in the same way you're processing the current object. One way to do that is to create a function that takes an object, prints the keys, just like you are, but when it sees an array, it takes each one of them and passes it back through the function. This is called recursion. It's a good way to handed nested data especially if you don't know ahead of time how the data will be nested.
Here's something to get it started:
var jsonObj={property1 : "one",property2 : "two",property3 : "three",property4 : [{name: "nicholas",name1: "cage"},{name: "stuart",name1: "walker"}]};
var strBuilder = [];
function stringer(obj) {
for (var key in obj) {
if (obj.hasOwnProperty(key)) {
if (Array.isArray(obj[key])) {
strBuilder.push("Key is " + key + ", value is an array containing: \n")
obj[key].forEach(item => stringer(item)) // call it recursively
} else {
strBuilder.push("Key is " + key + ", value is " + obj[key] + "\n");
}
}
}
}
stringer(jsonObj)
console.log(strBuilder.join(''))
You should be able to modify this for better formatting and to handle different kinds of nested things (like objects) if you want.
Create another loop while key is an object
for(var key in jsonObj){
if (jsonObj.hasOwnProperty(key)) {
strBuilder.push("Key is " + key + ", value is " + jsonObj[key] + "\n");
}
if(typeof key==object){
for(var x in key){
if (jsonObj.hasOwnProperty(x)) {
strBuilder.push("Key is " + x + ", value is " + key[x] + "\n");
}
}
I have an object in JavaScript:
{
abc: '...',
bca: '...',
zzz: '...',
xxx: '...',
ccc: '...',
// ...
}
I want to use a for loop to get its properties. And I want to iterate it in parts (not all object properties at once).
With a simple array I can do it with a standard for loop:
for (i = 0; i < 100; i++) { ... } // first part
for (i = 100; i < 300; i++) { ... } // second
for (i = 300; i < arr.length; i++) { ... } // last
But how to do it with objects?
For iterating on keys of Arrays, Strings, or Objects, use for .. in :
for (let key in yourobject) {
console.log(key, yourobject[key]);
}
With ES6, if you need both keys and values simultaneously, do
for (let [key, value] of Object.entries(yourobject)) {
console.log(key, value);
}
To avoid logging inherited properties, check with hasOwnProperty :
for (let key in yourobject) {
if (yourobject.hasOwnProperty(key)) {
console.log(key, yourobject[key]);
}
}
You don't need to check hasOwnProperty when iterating on keys if you're using a simple object (for example one you made yourself with {}).
This MDN documentation explains more generally how to deal with objects and their properties.
If you want to do it "in chunks", the best is to extract the keys in an array. As the order isn't guaranteed, this is the proper way. In modern browsers, you can use
let keys = Object.keys(yourobject);
To be more compatible, you'd better do this :
let keys = [];
for (let key in yourobject) {
if (yourobject.hasOwnProperty(key)) keys.push(key);
}
Then you can iterate on your properties by index: yourobject[keys[i]] :
for (let i=300; i < keys.length && i < 600; i++) {
console.log(keys[i], yourobject[keys[i]]);
}
Here is another iteration solution for modern browsers:
Object.keys(obj)
.filter((k, i) => i >= 100 && i < 300)
.forEach(k => console.log(obj[k]));
Or without the filter function:
Object.keys(obj).forEach((k, i) => {
if (i >= 100 && i < 300) {
console.log(obj[k]);
}
});
However you must consider that properties in JavaScript object are not sorted, i.e. have no order.
Using Object.entries you do something like this.
// array like object with random key ordering
const anObj = { 100: 'a', 2: 'b', 7: 'c' };
console.log(Object.entries(anObj)); // [ ['2', 'b'],['7', 'c'],['100', 'a'] ]
The Object.entries() method returns an array of a given object's own enumerable property [key, value]
So you can iterate over the Object and have key and value for each of the object and get something like this.
const anObj = { 100: 'a', 2: 'b', 7: 'c' };
Object.entries(anObj).map(obj => {
const key = obj[0];
const value = obj[1];
// do whatever you want with those values.
});
or like this
// Or, using array extras
Object.entries(obj).forEach(([key, value]) => {
console.log(`${key} ${value}`); // "a 5", "b 7", "c 9"
});
For a reference have a look at the MDN docs for Object Entries
With the new ES6/ES2015 features, you don't have to use an object anymore to iterate over a hash. You can use a Map. Javascript Maps keep keys in insertion order, meaning you can iterate over them without having to check the hasOwnProperty, which was always really a hack.
Iterate over a map:
var myMap = new Map();
myMap.set(0, "zero");
myMap.set(1, "one");
for (var [key, value] of myMap) {
console.log(key + " = " + value);
}
// Will show 2 logs; first with "0 = zero" and second with "1 = one"
for (var key of myMap.keys()) {
console.log(key);
}
// Will show 2 logs; first with "0" and second with "1"
for (var value of myMap.values()) {
console.log(value);
}
// Will show 2 logs; first with "zero" and second with "one"
for (var [key, value] of myMap.entries()) {
console.log(key + " = " + value);
}
// Will show 2 logs; first with "0 = zero" and second with "1 = one"
or use forEach:
myMap.forEach(function(value, key) {
console.log(key + " = " + value);
}, myMap)
// Will show 2 logs; first with "0 = zero" and second with "1 = one"
If you want the key and value when iterating, you can use a for...of loop with Object.entries.
const myObj = {a: 1, b: 2}
for (let [key, value] of Object.entries(myObj)) {
console.log(`key=${key} value=${value}`)
}
// output:
// key=a value=1
// key=b value=2
The only reliable way to do this would be to save your object data to 2 arrays, one of keys, and one for the data:
var keys = [];
var data = [];
for (var key in obj) {
if (obj.hasOwnProperty(key)) {
keys.push(key);
data.push(obj[key]); // Not necessary, but cleaner, in my opinion. See the example below.
}
}
You can then iterate over the arrays like you normally would:
for(var i = 0; i < 100; i++){
console.log(keys[i], data[i]);
//or
console.log(keys[i], obj[keys[i]]); // harder to read, I think.
}
for(var i = 100; i < 300; i++){
console.log(keys[i], data[i]);
}
I am not using Object.keys(obj), because that's IE 9+.
->if we iterate over a JavaScript object using and find key of array of
objects
Object.keys(Array).forEach(key => {
console.log('key',key)
})
If you have a simple object you can iterate through it using the following code:
let myObj = {
abc: '...',
bca: '...',
zzz: '...',
xxx: '...',
ccc: '...',
// ...
};
let objKeys = Object.keys(myObj);
//Now we can use objKeys to iterate over myObj
for (item of objKeys) {
//this will print out the keys
console.log('key:', item);
//this will print out the values
console.log('value:', myObj[item]);
}
If you have a nested object you can iterate through it using the following code:
let b = {
one: {
a: 1,
b: 2,
c: 3
},
two: {
a: 4,
b: 5,
c: 6
},
three: {
a: 7,
b: 8,
c: 9
}
};
let myKeys = Object.keys(b);
for (item of myKeys) {
//print the key
console.log('Key', item)
//print the value (which will be another object)
console.log('Value', b[item])
//print the nested value
console.log('Nested value', b[item]['a'])
}
If you have array of objects you can iterate through it using the following code:
let c = [
{
a: 1,
b: 2
},
{
a: 3,
b: 4
}
];
for(item of c){
//print the whole object individually
console.log('object', item);
//print the value inside the object
console.log('value', item['a']);
}
const o = {
name: "Max",
location: "London"
};
for (const [key, value] of Object.entries(o)) {
console.log(`${key}: ${value}`);
}
Try online
Define object in arguments and avoid selectors & subscripts
There are a number of syntax choices but this one defines the object upfront in the closure's arguments which eliminates the need for selectors or subscripts in the iterator. k is key, v is value, i is index.
const obj = {
kiwi: true,
mango: false,
pineapple: 500
};
Object.entries(obj).forEach(([k, v], i) => {
console.log(k, v, i);
});
// kiwi true 0
// mango false 1
// pineapple 500 2
If you wanted to iterate the whole object at once you could use for in loop:
for (var i in obj) {
...
}
But if you want to divide the object into parts in fact you cannot. There's no guarantee that properties in the object are in any specified order. Therefore, I can think of two solutions.
First of them is to "remove" already read properties:
var i = 0;
for (var key in obj) {
console.log(obj[key]);
delete obj[key];
if ( ++i > 300) break;
}
Another solution I can think of is to use Array of Arrays instead of the object:
var obj = [['key1', 'value1'], ['key2', 'value2']];
Then, standard for loop will work.
I finally came up with a handy utility function with a unified interface to iterate Objects, Strings, Arrays, TypedArrays, Maps, Sets, (any Iterables).
const iterate = require('#a-z/iterate-it');
const obj = { a: 1, b: 2, c: 3 };
iterate(obj, (value, key) => console.log(key, value));
// a 1
// b 2
// c 3
https://github.com/alrik/iterate-javascript
Really a PITA this is not part of standard Javascript.
/**
* Iterates the keys and values of an object. Object.keys is used to extract the keys.
* #param object The object to iterate
* #param fn (value,key)=>{}
*/
function objectForEach(object, fn) {
Object.keys(object).forEach(key => {
fn(object[key],key, object)
})
}
Note: I switched the callback parameters to (value,key) and added a third object to make the API consistent other APIs.
Use it like this
const o = {a:1, b:true};
objectForEach(o, (value, key, obj)=>{
// do something
});
For object iteration we usually use a for..in loop. This structure will loop through all enumerable properties, including ones who are inherited via prototypal inheritance. For example:
let obj = {
prop1: '1',
prop2: '2'
}
for(let el in obj) {
console.log(el);
console.log(obj[el]);
}
However, for..in will loop over all enumerable elements and this will not able us to split the iteration in chunks. To achieve this we can use the built in Object.keys() function to retrieve all the keys of an object in an array. We then can split up the iteration into multiple for loops and access the properties using the keys array. For example:
let obj = {
prop1: '1',
prop2: '2',
prop3: '3',
prop4: '4',
};
const keys = Object.keys(obj);
console.log(keys);
for (let i = 0; i < 2; i++) {
console.log(obj[keys[i]]);
}
for (let i = 2; i < 4; i++) {
console.log(obj[keys[i]]);
}
Yes. You can loop through an object using for loop. Here is an example
var myObj = {
abc: 'ABC',
bca: 'BCA',
zzz: 'ZZZ',
xxx: 'XXX',
ccc: 'CCC',
}
var k = Object.keys (myObj);
for (var i = 0; i < k.length; i++) {
console.log (k[i] + ": " + myObj[k[i]]);
}
NOTE: the example mentioned above will only work in IE9+. See Objec.keys browser support here.
Here is a Hand Made Solution:
function iterationForObject() {
let base = 0,
Keys= Object.keys(this);
return {
next: () => {
return {
value: {
"key": Keys[base],
"value": this[Keys[base]]
},
done: !(base++ < Keys.length)
};
}
};
}
Object.prototype[Symbol.iterator] = iterationForObject;
And Then You Can Loop Any Object:
for ( let keyAndValuePair of (Object Here) ) {
console.log(`${keyAndValuePair.key} => ${keyAndValuePair.value}`);
}
<script type="text/javascript">
// method 1
var images = {};
images['name'] = {};
images['family'] = {};
images[1] = {};
images['name'][5] = "Mehdi";
images['family'][8] = "Mohammadpour";
images['family']['ok'] = 123456;
images[1][22] = 2602;
images[1][22] = 2602;
images[1][22] = 2602;
images[1][22] = 2602;
images[1][23] = 2602;
for (const [key1, value1] of Object.entries(images)){
for (const [key2, value2] of Object.entries(value1)){
console.log(`${key1} => ${key2}: ${value2}`);
}
}
console.log("=============================");
// method 2
var arr = [];
for(var x = 0; x < 5; x++){
arr[x] = [];
for(var y = 0; y < 5; y++){
arr[x][y] = x*y;
}
}
for(var i = 0; i < arr.length; i++) {
var cube = arr[i];
for(var j = 0; j < cube.length; j++) {
console.log("cube[" + i + "][" + j + "] = " + cube[j]);
}
}
</script>
var Dictionary = {
If: {
you: {
can: '',
make: ''
},
sense: ''
},
of: {
the: {
sentence: {
it: '',
worked: ''
}
}
}
};
function Iterate(obj) {
for (prop in obj) {
if (obj.hasOwnProperty(prop) && isNaN(prop)) {
console.log(prop + ': ' + obj[prop]);
Iterate(obj[prop]);
}
}
}
Iterate(Dictionary);
You can try using lodash- A modern JavaScript utility library delivering modularity, performance & extras js to fast object iterate:-
var users = {
'fred': {
'user': 'fred',
'age': 40
},
'pebbles': {
'user': 'pebbles',
'age': 1
}
};
_.mapValues(users, function(o) {
return o.age;
});
// => { 'fred': 40, 'pebbles': 1 } (iteration order is not guaranteed)
// The `_.property` iteratee shorthand.
console.log(_.mapValues(users, 'age')); // returns age property & value
console.log(_.mapValues(users, 'user')); // returns user property & value
console.log(_.mapValues(users)); // returns all objects
// => { 'fred': 40, 'pebbles': 1 } (iteration order is not guaranteed)
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash-compat/3.10.2/lodash.js"></script>
I have object as var obj = [{"PRODUCT_ID":"P01","M01":1,"M02":2, "M03": null}] . I want to get key and value this sample
PRODUCT_ID is P01
M01 is 1
M02 is 2
M03 is null
I try with as follow
for (var key in obj) {
if (obj.hasOwnProperty(key)) {
console.log(key + " is " + obj[key]);
}
}
It't not working , it's show wrong with format.
0 is [
1 is {
2 is "
3 is P
4 is R
5 is O
6 is D
...etc
I using javascript to this. If maybe can convert to json and show this .
My guess is that the object you receive is a string not an actual object or array. This is why with your code, it gives the output.
To convert to an actual JS object use JSON.parse() and it will return an array as expected.
For instance,
const myArray = JSON.parse(obj);
myArray.forEach(x => Object.entries(x).map(([key, value]) => console.log(`${key} is ${value}\n`)))
Observation :
for...in statement iterates over the enumerable properties of an object. Hence, As per the code in OP :
var obj = [{
"PRODUCT_ID": "P01",
"M01": 1,
"M02": 2,
"M03": null
}];
for (var key in obj) {
console.log(key); // 0
}
Try this :
var obj = [{
"PRODUCT_ID": "P01",
"M01": 1,
"M02": 2,
"M03": null
}];
for (var i of obj) {
for (var j in Object.keys(i)) {
console.log(Object.keys(i)[j] + " is " + i[Object.keys(i)[j]]);
}
}
the problem is you are querying obj, while the actual obj is obj[0]. obj is an array with 1 element. try this
var obj = [{"PRODUCT_ID":"P01","M01":1,"M02":2, "M03": null}];
for (var key in obj[0]) {
if (obj[0].hasOwnProperty(key)) {
console.log(key + " is " + obj[0][key]);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
use Object.keys() method to access the keys in your object and then simply concatenate the key with its value.
this is not the most elegant solution, but it will help you understand.
var obj = '[{"PRODUCT_ID":"P01","M01":1,"M02":2, "M03": null}]' //string
obj = JSON.parse(obj);
console.log(Object.keys(obj[0])) //so that you can see what this does
obj.forEach(object => {
Object.keys(object).forEach(key => {
$("#values").append($("<p>"+key +" is "+ object[key]+"</p>"));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="values">
</div>
The thing here is that you are treating an array like an object. Change your code for:
for(x=0;x <obj.length;x++){
// Here you have each object of your array.
var json = obj[x];
var arrayOfKeys = Object.keys (json);
//other code.
}
See Object.entries(), Array.prototype.map(), and Template Literals for more info.
// Input.
const input = [{"PRODUCT_ID":"P01","M01":1,"M02":2, "M03": null}]
// Output.
input.map(x => Object.entries(x).map(([key, value]) => console.log(`${key} is ${value}\n`)))
You can use Object.entries() like:
const jsonString = '[{"PRODUCT_ID":"P01","M01":1,"M02":2, "M03": null}]'
// parse your json string first
const arr = JSON.parse( jsonString );
// Get the object from the array
const obj = arr[0] || {};
for (const [key, value] of Object.entries(obj)) {
console.log(key + ' is '+value);
}
Your code almost correct. But as you have data array not object you need to loop trough the object to achieve desire output.
Guessing OP has:
var obj = '[{"PRODUCT_ID":"P01","M01":1,"M02":2, "M03": null}]';
for (var key in obj) {
console.log(key + " is " + obj[key]);
}
//var obj = [{"PRODUCT_ID":"P01","M01":1,"M02":2, "M03": null}]
var obj = '[{"PRODUCT_ID":"P01","M01":1,"M02":2, "M03": null}]';
obj = JSON.parse(obj);
for (var key in obj) {
for (var k in obj[key]){
console.log(k + " is " + obj[key][k]);
}
}
Alternative:
//var obj = [{"PRODUCT_ID":"P01","M01":1,"M02":2, "M03": null}]
var obj = '[{"PRODUCT_ID":"P01","M01":1,"M02":2, "M03": null}]';
obj = JSON.parse(obj);
obj.map(e => Object.entries(e).map(([k, v]) => console.log(k, "is", v)))
I have a JavaScript object array. When write console.log(myarry) it will show in the console in the below form.
Array[2]
0: Object
one: "one"
1: Object
two: "two"
length: 2
In this array my key and value are same and am trying to get the key or value to a variable and print it. When am trying the below code it showing:
object object
for (var key in myarry) {
alert("Key is " + key + ", value is" + myarry[key]);
}
check this snippet
var obj = [{
"1": "one"
}, {
"2": "two"
}]
obj.forEach(function(item) {
Object.keys(item).forEach(function(key) {
console.log("key:" + key + "value:" + item[key]);
});
});
Hope it helps
Use for-loop instead of for-in to iterate array.
Use Object.keys to get keys of object
var arr = [{
one: 'one'
}, {
two: 'two'
}];
for (var i = 0, l = arr.length; i < l; i++) {
var keys = Object.keys(arr[i]);
for (var j = 0, k = keys.length; j < k; j++) {
console.log("Key:" + keys[j] + " Value:" + arr[i][keys[j]]);
}
}
I think you have two main options to get keys of an object using Object.keys these are: forEach; or a simple for.
1. Use forEach
If you're using an environment that supports the Array features of ES5 (directly or using a shim), you can use the new forEach:
var myarray = [{one: 'one'}, {two: 'two'}];
myarray.forEach(function(item) {
var items = Object.keys(item);
items.forEach(function(key) {
console.log('this is a key-> ' + key + ' & this is its value-> ' + item[key]);
});
});
forEach accepts an iterator function and, optionally, a value to use as this when calling that iterator function (not used above). The iterator function is called for each entry in the array, in order, skipping non-existent entries in sparse arrays. Although
forEach has the benefit that you don't have to declare indexing and value variables in the containing scope, as they're supplied as arguments to the iteration function, and so nicely scoped to just that iteration.
If you're worried about the runtime cost of making a function call for each array entry, don't be; technical details.
2. Use a simple for
Sometimes the old ways are the best:
var myarray = [{one: 'one'}, {two: 'two'}];
for (var i = 0, l = myarray.length; i < l; i++) {
var items = myarray[i];
var keys = Object.keys(items);
for (var j = 0, k = keys.length; j < k; j++) {
console.log('this is a key-> ' + keys[j] + ' & this is its value-> ' + items[keys[j]]);
}
}
Depending on your construction, you can do
const arr = [{ key1: 'val1' }, { key2: 'val2' }]
arr.forEach((a, i) =>
console.log(i, [{ key: Object.keys(a) }, { val: Object.values(a) }])
)
and to answer your question
arr.forEach((a, i) =>
alert("Key is "+ Object.keys(a) + ", value is " + Object.values(a))
)
am trying to get the key or value to a variable and print it.
then you could
var myarry = [{ one: 'one' }, { two: 'two' }];
for (var key in myarry) {
var value = myarry[key];
console.log(key, value)
}
you can do it in this way
const a = [{ one: 'one' }, { two: 'two' }];
a.forEach(function(value,key) {
console.log(value,key);
});
You can take key and value in a variable and use them.
Here's an interesting way to do it.
const arr = [{ one: 'one' }, { two: 'two' }];
Object.entries(arr).forEach(([_, obj]) => {
const key = Object.keys(obj)[0];
console.log(`Key is ${key}, value is ${obj[key]}.`);
});
I have an array in JavaScript. The user enters string and the data placed in this array in the form of value and name.
if(!_.isUndefined(args[1]) && !_.isUndefined(args[2])) {
if(args[1].length !== 0 && args[2].length !== 0) {
var dataObj = {
name : args[1],
value : args[2]
};
formateArray.push({name: dataObj.name, value:dataObj.value});
How can I remove duplicated value from array and replace it with the latest value the user enters?
So when the user enters: value_1 100, value_2 200, value_1 500
I expect to see: value_1 500, value_2 200 (replace the duplicates with new data)
You can iterate your array replace the value if the name already exists.
function push(array, newVal) {
var found = false;
for (var i = 0; i < array.length && !found; i++) {
if (array[i].name === newVal.name) {
array[i].value = newVal.value;
found = true;
}
}
if (!found) {
array.push(newVal);
}
}
function printNameValue(array) {
var out = '';
for (var i = 0; i < array.length; i++) {
out += array[i].name + ' ' + array[i].value + ', ';
}
return out;
}
var myArray = [];
push(myArray, {
name: 'value_1',
value: 100
});
push(myArray, {
name: 'value_2',
value: 200
});
push(myArray, {
name: 'value_1',
value: 500
});
alert(printNameValue(myArray));
Since your values can be associated with meaningful keys, perhaps you should use an object map rather than an array to store your values. Avoiding duplicates now becomes trivial since you cannot have duplicate keys.
var valuesMap = {};
//setting value
valuesMap.value_1 = 100;
//setting another value
valuesMap.value_2 = 200;
//replacing it
valuesMap.value_1 = 500;
Otherwise it's still quite simple, but less efficient:
function add(arr, obj) {
var key = obj.name, i, len;
for (i = 0, len = arr.length; i < len; i++) {
if (arr[i].name === key) {
arr[i] = obj;
return;
}
}
arr.push(obj);
}
var values = [];
add(values, { name: 'test', value: 1 });
add(values, { name: 'test', value: 2 });
values.length; //1
Instead of the array object, i suggest you to use an object that will act like a hashtable. You can define on this way var formateArray = {};
When you want to add or edit the data, instead of using push, you can do it like this:
formateArray[dataObj.name] = {name: dataObj.name, value:dataObj.value};
If the key does not exist dataObj.name, it will be added. It the key exist, the value would set with the new value.
If you want the size of you array, you get it this way Object.keys(formateArray).length
If you want to loop on your data, you can do it this way:
for (var k in formateArray) {
// use hasOwnProperty to filter out keys from the Object.prototype
if (formateArray.hasOwnProperty(k)) {
alert('key is: ' + k + ', value is: ' + formateArray[k].value);
}
}
Here is a jsfiddle that illustrate this.