We Keep Coding

How to convert an array of objects into an array of objects with mapped key-value pairs [duplicate]

This question already has answers here:
How do I convert array of Objects into one Object in JavaScript?
(17 answers)
Closed 5 months ago.
It is hard to put into words, so If anyone could help me with the title of the question, thanks in advance. At the end of the day, I have an array like so;
[
{
field: "firstname",
value: "John"
},
{
field: "lastname",
value: "Doe"
},
{
field: "hobbies",
value: "singing, basketball"
},
]
and the desired output will be like below;
[
{
"firstname":"John"
},
{
"lastname":"Doe"
},
{
"hobbies" :"singing, basketball"
},
]
The closest question I could find similar to mine was this one: How to convert an array into an object in javascript with mapped key-value pairs?

Use map and return object, where key will be obj.field and value as obj.value
i.e. {[obj.field]: obj.value}
let output = [
{
field: "firstname",
value: "John"
},
{
field: "lastname",
value: "Doe"
},
{
field: "hobbies",
value: "singing, basketball"
},
].map(a => ({[a.field]: a.value}))
console.log(output)

You can use map to set the field property to the key, and value property to the value
const data = [ {
field: "firstname",
value: "John"
},
{
field: "lastname",
value: "Doe"
},
{
field: "hobbies",
value: "singing, basketball"
} ]
let result = data.map(({ field, value }) => ({[field]: value}));
console.log(result)

find and update property of nested object with lodash

I have been scanning through stackoverflow topics and couldn't find answer to the problem i am having.
What i need to do is to find object inside nested (2 depths) array by some of the values and then update other of its values. I managed to put together the finding and also setting seems to work, the problem is that lodash does return main object and it updates main object, not the nested one i actually need.
lets take this structure:
var data = [
{
name: 'I',
status: "0",
categories: [
{
name: 'I1',
status: "0",
specifics: [
{
name: "I1a",
status: "0",
}
]
}
]
}
];
i need to find object inside specifics by its name and then update its status.
so lets try simple find first:
var find = _.find(data, { categories: [ { specifics: [ { name: "I1a" } ] } ]});
this is working but it returns the object with name: I so first main one.
so then if i try to update with this:
var set = _.set(_.find(data, { categories: [ { specifics: [ { name: "I1a" } ] } ]}), 'status', "1");
It also does work but it updates status of I instead of what i was looking for which is I1a.
Is there a way to make finding and therefore setting to return / work on actually queried object ?
var data = [
{
name: 'I',
status: "0",
categories: [
{
name: 'I1',
status: "0",
specifics: [
{
name: "I1a",
status: "0",
}
]
}
]
}
];
var find = _.find(data, { categories: [ { specifics: [ { name: "I1a" } ] } ]})
console.log('find', find);
var set = _.set(_.find(data, { categories: [ { specifics: [ { name: "I1a" } ] } ]}), 'status', "1");
console.log('set', set);
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>

How to map this data to a json array within React?

I have a Rest API which returns data in json of the form :
["1.6.3","1.6.4","1.6.5","1.6.6","1.7.0","1.7.2"]
I need the data in this format:
var options = [{ value: 'one', label: 'One' }, { value: 'two', label: 'Two', clearableValue: false }
];
After fetching the data I am using the following code to map the data in the required format:
if (this.state.coreversions) {
var options = [
this.state.coreversions.map(versions =>
`{ value: '${versions}', label: '${versions}' },`
)
];
}
Here the variable version is equal to a single value of the data returned by the Rest API
Any help would be appreciated.

Array#map returns an array, therefore you do not have to enclose it within square brackets.
Amend your code as follows:
if (this.state.coreversions) {
var options = this.state.coreversions.map(
versions => ({value: versions, label: versions})
);
}
// simplified this.state.coreversions to just coreversions
// only for the purposes of this snippet
var coreversions = ["1.6.3","1.6.4","1.6.5","1.6.6","1.7.0","1.7.2"];
if (coreversions) {
var options = coreversions.map(
versions => ({value: versions, label: versions})
);
}
console.log(options);
// logs out an array of objects:
// [
// { value: '1.6.3', label: '1.6.3' },
// { value: '1.6.4', label: '1.6.4' },
// { value: '1.6.5', label: '1.6.5' },
// { value: '1.6.6', label: '1.6.6' },
// { value: '1.7.0', label: '1.7.0' },
// { value: '1.7.2', label: '1.7.2' }
// ]

I think your map function is returning an array of strings instead of objects. Should be like:
return { value: '${versions}', label: '${versions}' }
Note how the above does not have the ticks surrounding the entire line.

React-Select expects an array of objects, not an array of strings.
You can loop through the data, put these values in a object and push it in an array like the following:
var results = ["1.6.3", "1.6.4", "1.6.5", "1.6.6", "1.7.0", "1.7.2"];
var selectData= [];
for (result of results) {
selectData.push({
value: result,
label: result
});
}
console.log(selectData);

How to generate new array of objects from existing array of objects using lodash

Can someone help me generate a new array of objects from an existing one using lodash? I've been trying a combination of _.zipObject and map but to no avail... basically, I have an array of objects like:
const names = [
{
first_name: 'nedd',
given_name: 'cersei'
},
{
first_name: 'tyrion',
given_name: 'tywin'
}
]
However, I want it to look like:
[
{
name: 'nedd'
},
{
name: 'cersei'
},
{
name: 'tyrion'
},
{
name: 'tywin'
},
]
I have tried various iterations of:
const newArray = _.zipObject( names, _.fill( Array(names.length), {name: ['first_name' || 'given_name']} ) );
But without any luck... can someone help?
Thanks in advance!

This might work:
_.flatMap(names, (n)=> [{name: n.first_name}, {name: n.given_name}]);

Use _.flatMap combined with _.map:
_.flatMap(names, (nameObj) => _.map(nameObj, (objVal) => { return { name: objVal }; }));

Compare value and add if matches to an array

Im trying to merge 2 data sources in 1, I wanna loop through them and if a specefic value matches than add it to the first object with the same value and add the in the emty array what is already there. No matter how much objects I have.
So lets say I have this information
Source 1
one = {
"teams": [
{
name: 'ABC',
members: [],
rooms: '0'
},
{
name: 'DEF',
members: [],
rooms: '1'
}
]
}
Source 2
two = {
"persons": [
{
name: 'Foo',
gender: 'male',
room: '1'
},
{
name: 'Bar',
gender: 'female',
room: '2'
}
]
}
And what I want is that the 'persons' array merge to the members array if the 'room and rooms' value matches.
What I would assume is something similar like this:
for(var i = 0 ; i < two.persons.length; i++) {
if (one.teams[i].rooms == two.persons[i].room) {
data.teams[i].members.push(two.persons[i]);
}
}

using higher order methods you can do:
one = {
"teams": [
{
name: 'ABC',
members: [],
rooms: '0'
},
{
name: 'DEF',
members: [],
rooms: '1'
}
]
};
two = {
"persons": [
{
name: 'Foo',
gender: 'male',
room: '1'
},
{
name: 'Bar',
gender: 'female',
room: '2'
}
]
};
var ttt = one.teams.map(function(x){
var roomVal= x.rooms;
x.members = two.persons.filter(function(t){
return t.room == roomVal});
return x;
})
one.teams = ttt;
console.log(one)

The problem with your code is that once you iterate the two array, then you do not go back and see if the previous element matched with the current one.
For example, if [0] on each arrays does not match and you iterate to index [1] in the for-loop, you do not have a way to check if two[1] matched one[0].
To do a complete search, you could directly iterate the arrays for each value of two:
two.persons.forEach(function(person) {
one.teams.forEach(function(team) {
if (team.rooms == person.room) {
team.members.push(person);
}
});
});

There are many strategies to do this. But most important you should iterate each array separately. I would use an Array.forEach();
one.teams.forEach(function (team, teamsIndex, teamsArray) {
two.persons.forEach(function (person, personsIndex, personsArray) {
if (team.room == person.room) {
// Do what you need to do.
}
});
});
Didn't check syntax so be aware to read Array.forEach(); documentation.