map array of object by property - javascript

I have this (says it's Object A)
[{grade:1},{grade:2},{grade:3}] till 100th.
how to map this existing data (says its name is object B) into them?
[
{grade:1,name:'alice',address:{poscode:123},tel:324}
{grade:5,name:'wonder',address:{poscode:123},tel:1234223},
{grade:90,name:'james',address:{poscode:234},tel:324}]
]
Says grade 50, it doesn't match any of Object B, the final result should also have the name and address property, assign the value null to them to make the array consistent. I issue is what if there's other property in Object B if I loop using Object A?

If I understand the issue correctly, you can use Object A as your map source, then use Object.assign to copy individual properties from Object B as well as adding in some defaults:
const objA = [{grade:1},{grade:2},{grade:3}];
const objB = [
{grade:1,name:'alice',address:{poscode:123},tel:324},
{grade:5,name:'wonder',address:{poscode:123},tel:1234223},
{grade:90,name:'james',address:{poscode:234},tel:324}
];
const objC = objA.map(rootObject => Object.assign(
// A new object with some defaults
{ name: null, address: null, tel: null },
// The source object from objA
rootObject,
// The data object from objB, if any
objB.find(detail => detail.grade === rootObject.grade)
)
);
console.log(objC);

You can achieve that using convenient Array methods. See snippet below:
const a = [
{grade: 1},
{grade: 2},
{grade: 3},
{grade: 4},
{grade: 5},
{grade: 90},
{grade: 100}
];
const b = [
{grade:1,name:'alice',address:{poscode:123},tel:324},
{grade:5,name:'wonder',address:{poscode:123},tel:1234223},
{grade:90,name:'james',address:{poscode:234},tel:324}
];
let result = a.map(aItem => {
let match = b.find( bItem => aItem.grade === bItem.grade );
if(!match){
return Object.assign({}, aItem, { name: null, address: {}, tel: null });
} else {
return match;
}
});
console.log(result);

Related

How to map or assign an entry to an array-item based on some of this item's conditions?

I have array of objects,
if the name is xx then push xitems to that object and
if the name is yy then push yitems to that object
Below is the code tried , and also should not use spread operator
const result = [];
var ss=arrobj.forEach(function(e){
if(e.name === 'xx'){
result.push({id: e.id, name: e.name, country:e.country, others: xitems})
}
if(e.name === 'yy'){
result.push({id: e.id, name: e.name, country:e.country, others: yitems})
}
return result;
});
var arrobj =[
{id:1, name: "xx", country: "IN"},
{id:2, name: "yy", country: "MY"},
]
xitems =[
{title: "Finance", valid: true}
]
yitems =[
{title: "Sales", valid: true}
]
Expected Output
[
{id:1, name: "xx", country: "IN",
others:[
{title: "Finance", valid: true}
]
},
{id:2, name: "yy", country: "MY",
others: [
{title: "Sales", valid: true}
]
},
]
You should use .map for this.
const arrobj = [
{ id: 1, name: "xx", country: "IN" },
{ id: 2, name: "yy", country: "MY" },
];
const xitems = [{ title: "Finance", valid: true }];
const yitems = [{ title: "Sales", valid: true }];
const result = arrobj.map((item) => {
if (item.name === "xx") {
item.others = xitems;
} else if (item.name === "yy") {
item.others = yitems;
}
return item;
});
console.log(result);
Your code works, the only issue that I identified are.
There is no need to assign var ss with arrobj.forEach. Because Array.forEach donot return a value.
No need of return result; inside Array.forEach.
Also as an improvement you can simply assign the object with key others like Object.assign({}, e, { others: xitems }), rather than returning individual key value.
Working Fiddle
const arrobj = [
{ id: 1, name: "xx", country: "IN" },
{ id: 2, name: "yy", country: "MY" },
]
const xitems = [
{ title: "Finance", valid: true }
]
const yitems = [
{ title: "Sales", valid: true }
]
const result = [];
arrobj.forEach(function (e) {
if (e.name === 'xx') {
result.push(Object.assign({}, e, { others: xitems }))
}
if (e.name === 'yy') {
result.push(Object.assign({}, e, { others: yitems }))
}
});
console.log(result)
Variables are references to an object that has a value, variables do not store values. It is pointless to try to use a variable in that manner unless you have specific parameters. If you insist on a condition then you need to identify xitems and yitems by the objects values and/or properties or by the order they came in. If you have dynamic data how would you know what xitems or yitems really is?
The example below has been made reusable as long as you meet these requirements:
Must have an array of objects as a primary parameter.
Must have at least one array of objects for each object in the primary array. If there's more the rest will be ignored.
The secondary array of objects must be in the order you want then to end up as.
The second parameter is a rest parameter (not a spread operator, although I have no idea why OP does not want to use it). This will allow us to stuff in as many object arrays as we want.
const distOther = (main, ...oAs) => {...
Next we create an array of pairs from all of the secondary arrays
let others = oAs.map(sub => ['others', sub]);
// [['others', [{...}]], [['others', [{...}]], ...]
Then we turn our attention to the primary array. We'll work our way from the inside out. .map() each object as an array of pairs by Object.entries():
main.map((obj, idx) =>
// ...
Object.entries(obj)
// ...
// [{A: 1, B: 2}, {...}] => [[['A', 1], ['B', 2]], [[...], [...]]]
Then .concat() (a spead operator would be more succinct) each array of pairs with that of the secondary array of pairs corresponding to the current index (you'll need to wrap each secondary array in another array, so the return will level off correctly):
// main.map((obj, idx) =>
// ...
// Object.entries(obj)
.concat([others[idx]])));
// [[['A', 1], ['B', 2], ['others', [{...}]], [[...], [...], ['others', [{...}]]]
Finally we'll use Object.fromEntries() to convert each array of pairs into an object.
// main.map((obj, idx) =>
Object.fromEntries(
// Object.entries(obj)
// .concat([others[idx]])));
// [{'A': 1, 'B': 2, 'others': [{...}]},...]
const objArr =[
{id:1, name: "xx", country: "IN"},
{id:2, name: "yy", country: "MY"},
];
const x =[
{title: "Finance", valid: true}
]
const y =[
{title: "Sales", valid: true}
]
const distOther = (main, ...oAs) => {
let others = oAs.map(sub => ['others', sub]);
return main.map((obj, idx) =>
Object.fromEntries(
Object.entries(obj)
.concat([others[idx]])));
};
console.log(distOther(objArr, x, y));
I would choose a map based approach as well but without the if clauses which explicitly check for expected values of the mapped item's name property.
The approach instead utilizes map's 2nd thisArg parameter which gets applied as the mapper functions this context. Such an additional object can be provided as a map/index of custom key value pairs where key equals a mapped item's name.
Thus the mapper implementation features generic code, and due to the this binding it will be provided as function statement which makes it also re-usable and, if properly named, readable / comprehensible / maintainable too.
function assignBoundNamedValueAsOthers(item) {
// the bound key value pairs.
const index = this;
// create new object and assign, according to
// `item.name`, bound named value as `others`.
return Object.assign(
{},
item,
{ others: index[item.name] ?? [] },
);
}
const arrobj = [
{ id: 1, name: "xx", country: "IN" },
{ id: 2, name: "yy", country: "MY" },
];
const xitems = [{ title: "Finance", valid: true }];
const yitems = [{ title: "Sales", valid: true }];
const result = arrobj
.map(assignBoundNamedValueAsOthers, {
// each `key` equals an expected item's `name`.
xx: xitems,
yy: yitems,
});
console.log({
result,
arrobj,
xitems,
yitems,
});
.as-console-wrapper { min-height: 100%!important; top: 0; }
As one can see, the above implementation via Object.assign creates a new object from each mapped arrobj item. Thus the original item-references remains untouched / non mutated. It does not apply for the items of xitems and yitems since both array references are directly assigned each to its newly created others property. The above log does reflect this.
In case the goal was an entirely reference free data structure one needs to slightly change the Object.assign part of assignBoundNamedValueAsOthers ...
function assignBoundNamedValueAsOthers(item) {
// the bound key value pairs.
const index = this;
// create new object and assign, according to
// `item.name`, bound named value as `others`.
return Object.assign(
{},
item, {
others: (index[item.name] ?? [])
// dereference the `others` items as well.
.map(othersItem =>
Object.assign({}, othersItem)
)
},
);
}
const arrobj = [
{ id: 1, name: "xx", country: "IN" },
{ id: 2, name: "yy", country: "MY" },
];
const xitems = [{ title: "Finance", valid: true }];
const yitems = [{ title: "Sales", valid: true }];
const result = arrobj
.map(assignBoundNamedValueAsOthers, {
// each `key` equals an expected item's `name`.
xx: xitems,
yy: yitems,
});
console.log({
result,
arrobj,
xitems,
yitems,
});
.as-console-wrapper { min-height: 100%!important; top: 0; }
In case the OP does not need to care about immutability, the entire process then changes from a map task to a forEach task, where assignBoundNamedValueAsOthers does directly change/mutate each currently processed item of arrobj, thus forEach does not return any data but always the undefined value ...
function assignBoundNamedValueAsOthers(item) {
// the bound key value pairs.
const index = this;
// mutate the original reference of the currently
// processed `item` by directly assigning, according
// to `item.name`, the bound named value as `others`.
Object.assign(
item,
{ others: index[item.name] ?? [] },
);
// no explicit return value due to
// going to be used as a `forEach` task.
}
const arrobj = [
{ id: 1, name: "xx", country: "IN" },
{ id: 2, name: "yy", country: "MY" },
];
const xitems = [{ title: "Finance", valid: true }];
const yitems = [{ title: "Sales", valid: true }];
// mutates each item of `arrobj`.
arrobj.forEach(assignBoundNamedValueAsOthers, {
// each `key` equals an expected item's `name`.
xx: xitems,
yy: yitems,
});
console.log({
arrobj,
xitems,
yitems,
});
.as-console-wrapper { min-height: 100%!important; top: 0; }

how to assign Object keys to a same property and create an array of objects with name and value pair-Javascript

I have an object:
obj= {
sside: "1",
id: 222,
env: "Windows",
platform: "Windows33",
model: "IE9"
}
Now I want to convert this above object into this:
obj2 = [{name: "sside", value:"1"},{name:"id", value:"222",name:"env",value:"Windows"}];
I'm able to get all the keys in the array:
var keysArray= Object.keys(obj);
But im not sure how can I assign "name" field to every key inside the keysArray
Is this possible to do?
Try this:
const obj2 = Object.keys(obj).map(key => ({name: key, value: obj[key]}))
You can loop through the object and get each key and value and push this into an array.
obj = {
sside: "1",
id: 222,
env: "Windows",
platform: "Windows33",
model: "IE9"
};
arr = [];
Object.keys(obj)
.forEach(function splitObj(key) {
arr.push({name: key, value: obj[key]})
});
console.log(arr);

Destructuring data from a multidimensional array

I have an array of nested objects, like so:
const objArr = [{obj, obj, objIWant}, {obj, obj, objIWant}, {obj, obj, objIWant}]
Is there a way to get to objIWant without having to loop twice like:
ObjArr.map((obj)=> obj.map(({ objIWant }) => myFunc(objIWant)))
I was hoping I could perhaps leverage destructuring but trying something like [{ objIWant }] = objArr only returns the first objIWant. Am I missing something about destructuring syntax that would allow for this? Many thanks!
No - the only way to do it is with nested map calls.
ObjArr.map(obj => obj.map(({ objIWant }) => myFunc(objIWant));
If you are able to do so, you could change myFunc:
myFunc({ objIWant }) {...}
And then change your code to do this:
ObjArr.map(obj => obj.map(myFunc));
But there's no way using destructuring to do what you're asking.
Destructuring will not make it look cleaner. This is the only way to destructure the properties you want. Using the map function as you are now is a cleaner way of doing it.
const objArr = [{obj:1, obj2:2, objIWant:3}, {obj:4, obj2:5, objIWant:6}, {obj:7, obj2:8, objIWant:9}];
const [{objIWant}, {objIWant:test2}, {objIWant:test3}] = objArr;
window.console.log(objIWant);
window.console.log(test2);
window.console.log(test3);
Not sure if your structure is expected to return an array of objects - or an array of values from each object. But the solution would be the same - use .map() on the original array to return the values (or objects) that you want.
const objArr = [
{id: 1, name: 'first item', value: 1},
{id: 2, name: 'second item', value: 2},
{id: 3, name: 'third item', value: 3}
];
const objIWant = 'value';
const result = objArr.map(item => item[objIWant]);
console.log(result);
// expected output: Array ["1", "2", "3"]
if its a nested object then same deal - use .map() on the original array to construct a new array of the desired objects.
const objArr = [
{"obj": {id: 1}, "obj": { id:1 } , "objIWant": { id:1 }},
{"obj": {id: 1}, "obj": { id:1 } , "objIWant": { id:2 }},
{"obj": {id: 1}, "obj": { id:1 } , "objIWant": { id:3 }}
];
const objIWant = 'objIWant';
const result = objArr.map(item => item[objIWant]);
console.log(result);
// expected output: Array [{"id": 1},{"id": 2},{"id": 3}]

Creating and accessing array of objects in Javascript

I'm having trouble figuring out how to access data in an array of objects. I've spent hours trying to find some example of this, but all I find is you must reference arrays by an index number, which doesn't seem efficient.
For example, I have a table of animals and the number of legs on that animal. How do I access the value (number of legs) for that animal based on the name of the animal. If I pass "human" to a function I want to be able to return "2".
Is this concept called something I'm not yet familiar with yet? Is it just not possible to use a "key" to access data in an array? Do I really have to use a loop to search through the entire array to fine the right entry if I don't know the index number?
What is the simplest way to do this?
let animalsLegs = [{animal: "human", legs: 2},
{animal: "horse", legs: 4},
{animal: "fish", legs: 0}]
function findLegs(animalToFind) {
return animalLegs[animalToFind];
}
console.log(findLegs("human"));
I would expect an output of 2.
Use an object instead of an array:
const animalLegsByAnimalName = {
human: 2,
horse: 4,
fish: 0
};
function findLegs(animalToFind) {
return animalLegsByAnimalName[animalToFind];
}
console.log(findLegs("human"));
If you want to keep using the array, but also use an object for quick, easy lookup, just reduce the initial array into the above object first:
const animalsLegs = [{animal: "human", legs: 2},
{animal: "horse", legs: 4},
{animal: "fish", legs: 0}];
const animalLegsByAnimalName = animalsLegs.reduce((a, { animal, legs }) => {
a[animal] = legs;
return a;
}, {});
function findLegs(animalToFind) {
return animalLegsByAnimalName[animalToFind];
}
console.log(findLegs("human"));
If the object in the array is more complicated than that, and you (for example) want access to additional properties, you can have the object's values be the object in the array, instead of just the value of the leg property:
const animalsLegs = [{animal: "human", legs: 2},
{animal: "horse", legs: 4},
{animal: "fish", legs: 0}];
const animalLegsByAnimalName = animalsLegs.reduce((a, animalObj) => {
a[animalObj.animal] = animalObj;
return a;
}, {});
function findLegs(animalToFind) {
const foundAnimal = animalLegsByAnimalName[animalToFind];
if (!foundAnimal) {
return 'No animal found with that name!';
}
return foundAnimal.legs;
}
console.log(findLegs("human"));
If you want to keep the Array data structure:
function findLegs(animalToFind) {
const animal = animalsLegs.find(animal => animal.name === animalToFind);
return animal.legs;
}
PS: An array data structure is more inefficient than an object, it will take O(n) to find an item, while an object is like a hash table, you can find values in O(1). You can read more about Big O notation here.
I think an array is best for this kind of data, you simply have to write a small function to retrieve what you want.
const animals = [
{ animal: "human", legs: 2 },
{ animal: "horse", legs: 4 },
{ animal: "fish", legs: 0 }
]
function getAnimalByName(name) {
return animals.reduce((a, b) => b.animal !== name ? a : b, null)
}
// Human?!
console.log(getAnimalByName('fish'))

How do I get a specific object from an immutable js map by value?

I created an immutable map (with Immutable-JS) from a list of objects:
var result = [{'id': 2}, {'id': 4}];
var map = Immutable.fromJS(result);
Now i want to get the object with id = 4.
Is there an easier way than this:
var object = map.filter(function(obj){
return obj.get('id') === 4
}).first();
Essentially, no: you're performing a list lookup by value, not by index, so it will always be a linear traversal.
An improvement would be to use find instead of filter:
var result = map.find(function(obj){return obj.get('id') === 4;});
The first thing to note is that you're not actually creating a map, you're creating a list:
var result = [{'id': 2}, {'id': 4}];
var map = Immutable.fromJS(result);
Immutable.Map.isMap(map); // false
Immutable.List.isList(map); // true
In order to create a map you can use a reviver argument in your toJS call (docs), but it's certainly not the most intuitive api, alternatively you can do something like:
// lets use letters rather than numbers as numbers get coerced to strings anyway
var result = [{'id': 'a'}, {'id': 'b'}];
var map = Immutable.Map(result.reduce(function(previous, current) {
previous[ current.id ] = current;
return previous;
}, {}));
Immutable.Map.isMap(map); // true
Now we have a proper Immutable.js map which has a get method
var item = Map.get('a'); // {id: 'a'}
It may be important to guarantee the order of the array. If that's the case:
Use an OrderedMap
Do a set method on the OrderedMap at each iteration of your source array
The example below uses "withMutations" for better performance.
var OrderedMap = Immutable.OrderedMap
// Get new OrderedMap
function getOm(arr) {
return OrderedMap().withMutations(map => {
arr.forEach(item => map.set(item.id, item))
})
}
// Source collection
var srcArray = [
{
id: 123,
value: 'foo'
},
{
id: 456,
value: 'bar'
}
]
var myOrderedMap = getOm(srcArray)
myOrderedMap.get(123)
// --> { id: 123, value: 'foo' }
myOrderedMap.toObject()
// --> { 123: {id: 123, value: 'foo'}, 456: {id: 456, value: 'bar'} }
myOrderedMap.toArray()
// --> [ {id: 123, value: 'foo'}, { id: 456, value: 'bar' } ]
When using fromJS for array, you'll get List not map. It will be better and easier if you create a map. The following code will convert the result into Immutable map.
const map = result.reduce((map, json) =>
map.set(json.id, Immutable.fromJS(json))
, Map());
Now, you can
map.get('2'); //{'id': 2}
Note, if the result has nested structure and if that has array, it will be a List with the above code.
With ES2015 syntax (and constants):
const result = map.find(o => o.get('id') === 4);
Is there already a way thats easier? I don't know. but you can write your own function. Something like this should work:
var myFunc = function(id){
var object = map.filter(function(obj){return obj.get('id') === id}).first();
return object;
}
Then you would just do:
var myObj = myFunc(4);

Categories

Resources