I'm new to JS and experimenting the things. I have following object:
var data = {'name': 'john', 'old': 18, 'place': 'USA'}
How can I switch the keys of this object with the following array?
var array = ['First Name', 'age', 'country']
To look following:
{'First Name': 'john', 'age': 18, 'country': 'USA'}
The only way to rename a key of an object is to assign the value of the old key to the new key and then delete the old key
Object[ new_key ] = Object[ old_key ];
delete Object[ old_key ];
Another way is to create a completely new object (with the new keys), assign the values to the new keys and then delete the old object.
var array = ['First Name', 'age', 'country'];
var data = {'name': 'john', 'old': 18, 'place': 'USA'};
var keys = Object.keys(data);
var newData = {};
for (var a in array) {
//using new obj
newData[array[a]] = data[keys[a]];
//editing same obj
data[array[a]] = data[keys[a]];
delete data[keys[a]];
}
console.log(data);
console.log(newData);
var array = ['First Name', 'age', 'country'];
var list = [
{ 'name': 'john 1', 'old': 18, 'place': 'USA' },
{ 'name': 'john 2', 'old': 19, 'place': 'USB' },
{ 'name': 'john 3', 'old': 20, 'place': 'USC' },
];
var newList = [];
for (var item in list) {
var newData = {};
for (var a in array) {
newData[array[a]] = list[item][Object.keys(list[item])[a]];
}
newList.push(newData);
}
console.log(newList);
You can use Object.assign(), Object.entries(), .map(), spread element and computed properties to assign the property name to a new object having value to to current index of property, value within iteration, set identifier for original object to result of Object.assign() call
let array = ['First Name', 'age', 'country']
let data = {'name': 'john', 'old': 18, 'place': 'USA'}
data = Object.assign({}, ...Object.entries(data)
.map(([, prop], index) => ({[array[index]]: prop})));
console.log(data);
Rather than switching the object keys; which cannot be done and you'd have to delete keys and add the new one, you could simply create a new object with the desired keys:
var data2 = {};
data2['First Name'] = data.name;
data2.age = data.old;
data2country = data.place;
You could use an object with the replacement keys and iterate it for changing the keys.
var data = { name: 'john', old: 18, place: 'USA' },
newKeys = { name: 'First Name', old: 'age', place: 'country' };
Object.keys(newKeys).forEach(function (k) {
data[newKeys[k]] = data[k];
delete data[k];
});
console.log(data);
var data = {'name': 'john', 'old': 18, 'place': 'USA'}
var ary = ['First Name', 'age', 'country']
// create key-value pairs array
var obj_entries = Object.entries(data)
var new_data =ary.reduce((acc, value, idx)=>{
acc[value]=obj_entries[idx][1];
return acc;
}, {})
console.log(new_data)
Maybe a functional approach
Related
My failed attempt:
temp.map((obj,i) => ({
obj[`person${++i}`] = obj.person.name
})
I want to produce something like this
[{id:324, person1:'mike'},{id:23, person2:'jane'}]
But I'm stuck on making the property dynamic with concatenation using template literal string.
Issue with you code is, you are directly returning the data by using
() => ({....})
and there you are using obj[...] that is not a valid key.
map return the a new array so store the result in a new variable, if you want to modify the same array then better to use forEach.
Check this snippet:
let arr = [{id: 10, name: 'A'}, {id: 20, name: 'B'}];
let newArr = arr.map((el,i) => ({
id: el.id,
[`name${i+1}`]: el.name
}));
console.log('new array', newArr);
Modifying the same data using forEach:
let arr = [{id: 10, name: 'A'}, {id: 20, name: 'B'}];
arr.forEach((el,i) => {
el[`person${i+1}`] = el.name;
})
console.log('modified array', arr);
This should do it:
var myInput = ["John", "Jane", "Steven", "Alice"];
var myOutput = myInput.map ((name, index) => {
var out = {};
out[`person${index}`] = name;
return out;
}); // myOutput is [{person1:"John"}, {person2:"Jane"} ... etc.
map creates a new array rather than modifying the existing one. The values of the array are made out of the return values of the function, so if you want your values to be objects, you must create new objects and then assign your properties to them.
How about this?
describe("sample test", () => {
it("Dynamic property in ES6", () => {
const temp = [
{ id: 324, person: { name: "mike" } },
{ id: 23, person: { name: "jane" } }
];
console.log(
temp.map((obj, i) => ({
id: obj.id,
[`person${i + 1}`]: obj.person.name
}))
);
});
});
Output:
[ { id: 324, person1: 'mike' }, { id: 23, person2: 'jane' } ]
I'm trying to convert an array of arrays to a list of JSON objects.
var headers = ['first name','last name','age']
var data = [ [ 'John', 'Gill', '21' ], [ 'Sai', 'Varun', '21' ] ]
When we use the above two lists to generate a list of JSON's, output will be like,
[ { 'First name': 'John', 'Last name': 'Gill', age: '21' },
{ 'First name': 'Sai', 'Last name': 'Varun', age: '21' } ]
But I'm in need of the output to be as, (double quoted strings and the JSON should not be a string but should be a JSON object)
[ {"First name":"John","Last name":"Gill","age":"21"},
{"First name":"Sai","Last name":"Varun","age":"21"} ]
I tried using JSON.stringify but the result won't be a JSON object right, it'll be a JSON string which would prevent accessing each of the JSON's from the list as a whole.
I have gone through many such answers but in vain. Can someone shed some light on this?!
You could generate an array with the objects first and the stringify the array.
var headers = ['first name', 'last name', 'age'],
data = [['John', 'Gill', '21'], ['Sai', 'Varun', '21']],
result = data.map(function (a) {
var object = {};
headers.forEach(function (k, i) {
object[k] = a[i];
});
return object;
});
console.log(JSON.stringify(result));
console.log(result);
.as-console-wrapper { max-height: 100% !important; top: 0; }
ES6
var headers = ['first name', 'last name', 'age'],
data = [['John', 'Gill', '21'], ['Sai', 'Varun', '21']],
result = data.map(a => headers.reduce((r, k, i) => Object.assign(r, { [k]: a[i] }), {}));
console.log(JSON.stringify(result));
console.log(result);
.as-console-wrapper { max-height: 100% !important; top: 0; }
var headers = ['first name','last name','age']
var data = [ [ 'John', 'Gill', '21' ], [ 'Sai', 'Varun', '21' ] ]
function createItem(item) {
newObject = {}
item.map((val,i)=>newObject[headers[i]]=val)
return newObject
}
console.log(data.map(item=>createItem(item)))
DEMO
var headers = ['first name','last name','age'];
var data = [['John', 'Gill', '21'],['Sai', 'Varun', '21']];
var res = data.map(function(item) {
var obj = {};
for (var i in headers) {
obj[headers[i]] = item[i];
}
return obj;
});
console.log(res);
Let us assume that we have an array
var mRegions = [];
This array get's populated with following object
$.ajax(settings).done(function (response) {
for (var i in response.items[0].devices)
{
mRegions.push(
{
id: response.items[0].devices[i].id,
name: response.items[0].devices[i].name,
description: response.items[0].devices[i].description,
uid: response.items[0].devices[i].beacon.iBeacon.uid,
major: response.items[0].devices[i].beacon.iBeacon.major,
minor: response.items[0].devices[i].beacon.iBeacon.minor,
});
}
var myId = 'b1';
At some point of time, I need to get an object from this array of objects whose id matches with the given id (myID)
Is there a way to achieve this without a for...in loop?
Array.prototype.find(). Make sure you read the browser compatibility section.
myRegions.find(region => region.id === myId)
or the legacy version
myRegions.find(function(r){return r.id === myId})
let myRegions = [{
id: 'a1',
name: 'A 1'
}, {
id: 'a2',
name: 'A 2'
}, {
id: 'a3',
name: 'A 3'
}, {
id: 'b1',
name: 'B 1'
}, {
id: 'b2',
name: 'B 2'
}];
let myId = 'b1';
let pre = document.createElement('pre');
pre.textContent = JSON.stringify(myRegions.find(region => region.id === myId), null, ' ');
document.body.appendChild(pre);
If it is an option, you can use an object istead of an array, and set the keys as ids.
var mRegions = {};
$.ajax(settings).done(function (response) {
for (var i in response.items[0].devices) {
mRegions[response.items[0].devices[i].id] = {
id: response.items[0].devices[i].id,
name: response.items[0].devices[i].name,
description: response.items[0].devices[i].description,
uid: response.items[0].devices[i].beacon.iBeacon.uid,
major: response.items[0].devices[i].beacon.iBeacon.major,
minor: response.items[0].devices[i].beacon.iBeacon.minor,
};
}
});
Then access the values with the following notation:
var region = mRegions.theId
Or:
var myId = 123;
var region = mRegions[myId];
let array = [
{id: 1, name: 'Name1'},
{id: 3, name: 'Name3'},
{id: 5, name: 'Name5'},
{id: 7, name: 'Name7'}
];
let result = array.filter(function( obj ) {
return obj.id === 5;
});
Also consider .find() function from #Phil answer.
.filter definition:
The filter() method creates a new array with all elements that pass
the test implemented by the provided function.
.find definition:
The find() method returns a value in the array, if an element in the
array satisfies the provided testing function. Otherwise undefined is
returned.
The default object is:
var employee = {
'name': 'Hermione',
'salary': 1000
};
My question is, how to copy that to another object with this formatting?
var employee = {
'Hermione': 1000
};
I've tried:
for (var prop in employee) {
console.log(prop, employee[prop]); // 'name' 'Hermione'
// what next?
}
UPDATE:
var employees = [];
employees.push({ 'name': 'name1', 'salary': 1000 });
employees.push({ 'name': 'name2', 'salary': 2000 });
employees.push({ 'name': 'name3', 'salary': 3000 });
What I want to achieve:
var employees = [
{'name1': 1000},
{'name2': 2000},
{'name3': 3000}
];
Do you have an array of those objects?
For single object the case is rather simple:
var employee2 = {};
employee2[employee['name']] = employee['salary'];
or for modern browsers:
var employee2 = {
[employee['name']]: employee['salary']
};
update
for array of objects:
var employees = [
{ name: 'name1', salary: 1000 },
{ name: 'name2', salary: 2000 },
{ name: 'name3', salary: 3000 }
];
var employees2 = employees.map(employee => ({[employee.name]: employee.salary}));
console.dir(employees2);
for older browsers:
var employees2 = employees.map(function(employee) {
var result = {};
result[employee['name']] = employee['salary'];
return result;
});
You should use Array.prototype.filter Or Array.prototype.map
var employees = [];
employees.push({ 'name': 'n1', 'salary': 1000 });
employees.push({ 'name': 'n2', 'salary': 2000 });
employees.push({ 'name': 'n3', 'salary': 3000 });
var reduced = employees
.reduce((res, val) => {
res[val.name] = val.salary;
return res;
}, Object.create(null))
;
console.log('reduced', reduced);
var mapped = employees
.map(i => ({[i.name] : i.salary}))
;
console.log('mapped', mapped);
newobj = {}; newobj[oldObj.name] = oldObj.salary
I'm looking for a way to take an array of JavaScript objects and get an associative array of those objects keyed by some attribute.
For example, given this array of objects:
var data = [
{'id': 100, name: 'bob', foo: 'bar'},
{'id': 200, name: 'john', foo: 'qux'}
];
I want to be able to look up each object by its id, so I want an object like this:
var new_data = {
100: {name: 'bob', foo: 'bar'},
200: {name: 'john', foo: 'qux'}
}
// now I can use new_data[200] to access `john`
While I'm sure it's easy enough to construct a new object and then iterate over each object in the original array and append a new key:value pair to new object, I was wondering if there was a more concise way of doing it.
In ES6:
Object.assign({}, ...data.map(({id, name, foo}) => ({[id]: {name, foo}})))
This maps each object in the input into a single-property object with the id as key, then spreads those into parameters to Object.assign which will glue them together for you.
Or,
construct a new object and then iterate over each object in the original array and append a new key:value pair to new object
You can do essentially what you just said but in relatively concise form using reduce:
data.reduce((result, {id, name, foo}) => {
result[id] = {name, foo};
return result;
}, {})
You may try this:
var data = [
{'id': 100, name: 'bob', foo: 'bar'},
{'id': 200, name: 'john', foo: 'qux'}
];
data.reduce(function(p, c){
p[c.id] = {name:c.name, foo: c.foo};
return p;
}, {});
Here is a solution using Array maps:
var data = [{
'id': 100,
name: 'bob',
foo: 'bar'
}, {
'id': 200,
name: 'john',
foo: 'qux'
}];
var new_data = {};
// Iterate over data
data.map(obj => {
// Create new object from old
new_data[obj.id] = {
'name': obj.name,
'foo': obj.foo
}
});
console.log(new_data);
In ES5:
working JSBIN: https://jsbin.com/qudeze/edit?js,console
var data = [
{'id': 100, name: 'bob', foo: 'bar'},
{'id': 200, name: 'john', foo: 'qux'}
];
var new_data = {
100: {name: 'bob', foo: 'bar'},
200: {name: 'john', foo: 'qux'}
};
var y = data.reduce(function(result, next) {
result[next.id] = {name: next.name, foo: next.foo};
return result;
}, {});
console.log(y);
Your code should be go like this....
<script type="text/javascript">
var data = [
{'id': 100, name: 'bob', foo: 'bar'},
{'id': 200, name: 'john', foo: 'qux'}
];
var new_data = {};
for(var i=0; i<data.length; i++){
var element = {};
element["name"] = data[i].name;
element["foo"] = data[i].foo;
new_data[data[i].id] = element;
}
console.log(JSON.stringify(new_data));
I don't think we could use map method. Because our output is not an array but an object. We could use each method to help us. Here is a sample code:
var data = [
{'id': 100, name: 'bob', foo: 'bar'},
{'id': 200, name: 'john', foo: 'qux'}
];
var result = {};
data.forEach(function(item){
var key = item.id;
//remove id from item
delete item.id;
result[key] = item;
});
console.log(result);
Note, this solution will modify the original array. If you don't want change the original one, just copy one.