Related
How to compare two arrays and return another one?
I'm trying to compare two arrays to compare records by id and then render a new array
const arr1 = [
{ id: 1, title: "Admin" },
{ id: 2, title: "Vip" }
];
const arr2 = [
{
id: 1,
root: 1
},
{
id: 2,
root: 0
}
];
let intersection = arr1.filter(({ id }) => arr2.includes(id));
need:
const needArr = [
{ id: 1, title: "Admin", root: 1 },
{ id: 2, title: "Vip", root: 0 }
];
You could make use of map() and find() and iterate over the first array arr1:
const needArr = arr1.map(entry => {
const root = arr2.find(arr2Entry => entry.id === arr2Entry.id)?.root
return {...entry, root: root}
} )
The root property will be set to undefined for each entry in the needArr result if there is no entry with the same id in arr2 as in arr1.
Something like this could work,
const giveNew = (a, b) => {
let shorter, longer;
if(a.length>b.length){
longer = a;
shorter = b;
} else {
longer = b;
shorter = a;
}
return longer.map((v, i)=> {
const matched = shorter.find(val=> val.id === v.id);
if(matched){
return {
...v, ...matched
}
}
})
}
Assuming there's a 1:1 relationship between the arrays - map over one of the arrays, find the corresponding object in the other array by its id, and then return a new updated object.
const arr1=[{id:1,title:"Admin"},{id:2,title:"Vip"}],arr2=[{id:1,root:1},{id:2,root:0}];
const out = arr2.map(obj => {
return {
...arr1.find(inner => inner.id === obj.id),
root: obj.root
};
});
console.log(out);
As is pointed out in Merge two array of objects based on a key, you can do this:
let intersection = arr1.map(item => ({...item, ...arr2.find(item2 => item.id === item2.id)}));
I tried this worked.
const arr1 = [
{ id: 1, title: "Admin" },
{ id: 2, title: "Vip"}
];
const arr2 = [
{
id: 1,
root: 1
},
{
id: 2,
root: 0
}
];
for(var i=0 ;i < arr2.length; i++)
{
objIndex = arr1.findIndex((obj => obj.id == arr2[i].id));
arr1[objIndex].root = arr2[i].root;
}
console.log(arr1);
Hope this satisfies your use case. This also works in the case where there is no 1:1 mappings.
const arr1 = [
{ id: 1, title: "Admin" , root: 0 },
{ id: 2, title: "Vip" , root: 0 },
{ id: 100, title: "NotExistInArr2" , root: 0 }
];
const arr2 = [
{
id: 1,
root: 1
},
{
id: 2,
root: 0
},
{
id: 200,
root: 0
}
];
const consolidatedIds = arr1.map(a => a.id).concat(arr2.map(a => a.id));
//console.log(consolidatedIds);
const consolidatedDedupedIds = arrayUnique(consolidatedIds);
//console.log(consolidatedDedupedIds);
const needArr = consolidatedDedupedIds.map(entry => {
const arr1Item = arr1.find(arr1Entry => entry === arr1Entry.id);
const arr2Item = arr2.find(arr2Entry => entry === arr2Entry.id);
return {...arr1Item, ...arr2Item}
} )
console.log(needArr)
//--- utility function
function arrayUnique(array) {
var a = array.concat();
for(var i=0; i<a.length; ++i) {
for(var j=i+1; j<a.length; ++j) {
if(a[i] === a[j])
a.splice(j--, 1);
}
}
return a;
}
Note: improvised version of other questions, inspired from other answers
Below code which I am using for creating the new array if the id is the same in arr1 and arr2. But doesn't work since arr1 and arr2 are different. array 1 has index and arr2 is without index. screenshot for your reference. Can someone help?
Note: ID in arr1 is the same as EmpId in arr2
for(let i=0; i<arr1.length; i++) {
merged.push({
...arr1[i],
...(arr2.find((itmInner) => itmInner.id === arr1[i].id))}
);
}
console.log(merged);
Array1 looks like this :
[{"Active":1,"Id":1},
{"Active":1,"Id":3},
{"Active":1,"Id":2}]
Array2 looks something like this:
Below is the sample code on how I am framing array 2:
renderElement(activity){
var arr2 = [] ;
for(var i = 0; i < activity.length; i++) {
obj = activity[i];
if(obj.Id == 28){
fetch(geturl)
.then(function (response) {
return response.json();
})
.then(function (data) {
res = data;
arr2.push(res)
})
}
else{
// Do nothing
}
}
return arr2
}
Calling Render method like below:
outputarray = currentComponent.renderElement(activity);
console.log('output', outputarray)
Expected Output:
[{"Active":1,"Id":1,"Param1": true},
{"Active":1,"Id":3}, / Keep it as such if nothing exists in other array
{"Active":1,"Id":2, "Param2": false}]
You can try this approach instead:
Example #1
const arr1 = [
{ "Active":1, "Id":1 },
{ "Active":1, "Id":3 },
{ "Active":1, "Id":2 }
];
const arr2 = [
{
0: [
{
EmpId1: 1, Param1: true
}
]
},
{
1: [
{
EmpId2: 2,Param2: false
}
]
},
{
2: [
{
EmpId3: 2
}
]
},
];
const response = arr1
.reduce((acc, value) => {
const secondaryData = arr2.map((val, index) => {
const { [`EmpId${index + 1}`]: Id, ...others } = val[Object.keys(val)][0];
return { Id, ...others };
});
const match = secondaryData.findIndex(({ Id }) => Id === value.Id);
if (match >= 0) acc.push({...value, ...secondaryData[match]})
else acc.push(value);
return acc;
}, []);
console.log(response);
Example #2
const arr1 = [
{ "Active":1, "Id":1 },
{ "Active":1, "Id":3 },
{ "Active":1, "Id":2 }
];
const arr2 = [
[
{
EmpId1: 1,
Param1: true
}
],
[
{
EmpId2: 2,
Param2: false
}
],
[
{
EmpId3: 2
}
],
]
const response = arr1
.reduce((acc, value) => {
const secondaryData = arr2.map(([val], index) => {
const { [`EmpId${index + 1}`]: Id, ...others } = val;
return { Id, ...others };
});
const match = secondaryData.findIndex(({ Id }) => Id === value.Id);
if (match >= 0) acc.push({...value, ...secondaryData[match]})
else acc.push(value);
return acc;
}, []);
console.log(response);
Basically you can create a hash map by a object property and join on that property all the arrays, i.e. reduce an array of arrays into a result object, then convert the object's values back to an array. Since each array is reduced this means each array is only traversed once O(n) and the map object provides constant time O(1) lookup to match objects. This keeps the solution closer to O(n) rather than other solutions with a nested O(n) findIndex search, which yields a solution closer to O(n^2).
const mergeByField = (...arrays) => {
return Object.values(
arrays.reduce(
(result, { data, field }) => ({
...data.flat().reduce(
(obj, el) => ({
...obj,
[el[field]]: {
...obj[el[field]],
...el
}
}),
result
)
}),
{}
)
);
};
Load each array into a payload object that specifies the field key to match on. This will return all fields used to match by, but these can safely be ignored later, or removed, whatever you need. Example:
mergeByField(
{ data: arr1, field: "Id" },
{ data: arr2, field: "EmpId" },
);
const arr1 = [
{
Active: 1,
Id: 1
},
{
Active: 1,
Id: 2
},
{
Active: 1,
Id: 3
}
];
const arr2 = [[{ EmpId: 1, Param1: true }], [{ EmpId: 3, Param2: false }]];
const mergeByField = (...arrays) => {
return Object.values(
arrays.reduce(
(result, { data, field }) => ({
...data.flat().reduce(
(obj, el) => ({
...obj,
[el[field]]: {
...obj[el[field]],
...el
}
}),
result
)
}),
{}
)
);
};
console.log(
mergeByField({ data: arr1, field: "Id" }, { data: arr2, field: "EmpId" })
);
I have a temp array which originally looks something like this :
[{emp_id:1, acitivty:'run'}, {emp_id: 2, activity:'climb'}, {emp_id:1,activity:'swim'} .....]
Now, what I want is to merge the objects with the same emp_id. It should look like this:
[{emp_id:1, activity:'run', activity2:'swim'}, {emp_id:'2',activity:'climb'} .....]
Instead, I only got this, not showing the rest of the objects in the array:
[{emp_id:'1', activity:'run', activity2:'swim'}]
In my code, when the condition is met and the merging and splicing is done, I decrement the z because I think after splicing, the array will be reindexed and I think the array length will still be as is.
What seems to be the problem?
for(var z = 0; z < temp.length; z++) {
for(var x = 1; x < temp.length; x++) {
if(temp[z].emp_id == temp[x].emp_id) {
var ot_key = 'ot_time'+x+1;
var status_key = 'status'+x+1;
var dtr_key = 'dtr_out'+x+1;
Object.assign(temp[z], {
[ot_key] : temp[x].ot_time,
[status_key] : temp[x].status,
[dtr_key] : temp[x].dtr_out
})
temp.splice(x, 1);
z--;
}
}
}
Beside the spelling, you could take an object and store the wanted postfix in the objects. later take the payload.
For example have a look to the final object before getting the values and mapping only the payload property:
{
1: {
index: 3,
payload: { emp_id: 1, activity: "run", activity2: "swim" }
},
2: {
index: 2,
payload: { emp_id: 2, activity: "climb" }
}
}
Here emp_id is taken as key for grouping and because of the wanted structure an index is grouped as well for having a value for futher activities.
var data = [{ emp_id: 1, activity: 'run' }, { emp_id: 2, activity: 'climb' }, { emp_id: 1, activity: 'swim' }],
result = Object
.values(data.reduce((r, { emp_id, activity }) => {
if (r[emp_id]) r[emp_id].payload['activity' + r[emp_id].index++] = activity;
else r[emp_id] = { index: 2, payload: { emp_id, activity } };
return r;
}, {}))
.map(({ payload }) => payload);
console.log(result);
.as-console-wrapper { max-height: 100% !important; top: 0; }
A better approach is to use an array for the activities.
var data = [{ emp_id: 1, activity: 'run' }, { emp_id: 2, activity: 'climb' }, { emp_id: 1, activity: 'swim' }],
result = Object.values(data.reduce((r, { emp_id, activity }) => {
if (r[emp_id]) r[emp_id].activity.push(activity);
else r[emp_id] = { emp_id, activity: [activity] };
return r;
}, {}));
console.log(result);
.as-console-wrapper { max-height: 100% !important; top: 0; }
You can use array .reduce() method to get an array of activities grouped by emp_id which I think much cleaner.
const temp = [{emp_id:1,activity:"run"},{emp_id:2,activity:"climb"},{emp_id:1,activity:"swim"}];
const res = Object.values(temp.reduce((ac, { emp_id, activity }) => {
ac[emp_id] = ac[emp_id] || {emp_id, activity: []}
ac[emp_id].activity.push(activity)
return ac;
}, {}));
console.log(res);
.as-console-wrapper { max-height: 100% !important; top: 0; }
Everything you can do in 2 loop, one for reduce another to collect output array.values.
Fast and better.
Note : If you dont want to use Object.keys, use 2nd solution
const data = [
{ emp_id: 1, activity: "run" },
{ emp_id: 2, activity: "climb" },
{ emp_id: 1, activity: "swim" }
];
const result = data.reduce((obj, { emp_id, activity }) => {
if (!obj[emp_id]) obj[emp_id] = { emp_id };
const count = Object.keys(obj[emp_id]).length;
obj[emp_id] = {
...obj[emp_id],
[`activity_${count}`]: activity
};
return obj;
}, {});
let finalResult = Object.values(result)
console.log(finalResult);
// If you dont want to use Object.keys
const result2 = data.reduce((obj, { emp_id, activity }) => {
if (!obj[emp_id]) obj[emp_id] = { count: 0, data: {} };
const count = obj[emp_id].count + 1;
obj[emp_id] = {
data: {
...obj[emp_id].data,
[`activity_${count}`]: activity
},
count: count
};
return obj;
}, {});
let finalResult2 = [];
for (let key in result2) {
const { data } = result2[key];
finalResult2.push(data);
}
console.log(finalResult2);
.as-console-wrapper { max-height: 100% !important; top: 0; color: blue!important; }
maybe like this
var data = [{
emp_id: 1, activity: 'run'
}, {
emp_id: 2, activity: 'climb'
}, {
emp_id: 1, activity: 'swim'
}];
var lookup = {};
var counter = {};
for (var i = 0; i < data.length; i++) {
var item = data[i];
if (lookup[item.emp_id]) {
var found = lookup[item.emp_id];
lookup[item.emp_id]['activity' + counter[item.emp_id]] = item.activity;
counter[item.emp_id]++;
data.splice(i, 1);
i--;
} else {
lookup[item.emp_id] = item;
counter[item.emp_id] = 2;
}
}
console.log(data);
You could use array.reduce() like this:
Be careful, your initial array has a spelling mistake in activity property.
let x =[
{emp_id:1, activity:'run'},
{emp_id: 2, activity:'climb'},
{emp_id:1,activity:'swim'}
];
let finalResult =
x.reduce((result, currentValue, currentIndex, arr) =>
{
return [...result,
arr.filter(f => f.emp_id === currentValue.emp_id &&
!result.find(r=>r.emp_id === f.emp_id)
)
.reduce((subResult, currentItem, index) =>
{
return {emp_id:currentItem.emp_id, ...subResult, ...{[`activity${index ==0 ? '' : '_' + (index+1)}`]:currentItem.activity}};
}, undefined)
];
}, [])
.filter(item=> !!item);
console.log(finalResult);
I would heed #NinaScholz's advice to use an array for activity values which will be much easier to handle afterwards when compared to testing for different related properties (and to fix the spelling of acitivty), but take a naive approach in creating a result array by using forEach(), which I find more readable. For example:
const source = [{emp_id: 1, activity: 'run'}, {emp_id: 2, activity: 'climb'}, {emp_id: 1, activity: 'swim'}];
let results = [];
// For each source item, check whether a result object with the current emp_id exists.
source.forEach(o => results.filter(r => r.emp_id === o.emp_id).length == 1
// Add activity to existing result object.
? results[o.emp_id].activity.push(o.activity)
// Create a new result object
: results.push({ emp_id: o.emp_id, activity: [o.activity] })
);
console.log(results);
.as-console-wrapper { max-height: 100% !important; top: 0; }
this solution will also take care if you have more then two
activity have same id
var x=[{emp_id:1, acitivty:'run'}, {emp_id: 2, activity:'climb'}, {emp_id:1,activity:'swim'},{emp_id:1,activity:'swim3'} ]
let myMap = new Map()
x.forEach(element =>{
let alreadyExist=myMap.has(element.emp_id)
if(alreadyExist){
let tempelement=myMap.get(element.emp_id)
tempelement.count=tempelement.count?++tempelement.count:2;
tempelement['acitivty'+tempelement.count]=element.activity
myMap.set(element.emp_id, tempelement)
}else{
myMap.set(element.emp_id, element)
}
});
//convert map to Array
let newArray=Array.from(myMap.values())
console.log(JSON.stringify(newArray))
//[{"emp_id":1,"acitivty":"run","count":3,"acitivty2":"swim","acitivty3":"swim3"},{"emp_id":2,"activity":"climb"}]
I have an array which I need to combine with comma-separated of the same level and form a new array.
Input:
let arr = [
[{ LEVEL: 1, NAME: 'Mark' }, { LEVEL: 1, NAME: 'Adams' }, { LEVEL: 2, NAME: 'Robin' }],
[{ LEVEL: 3, NAME: 'Williams' }],
[{ LEVEL: 4, NAME: 'Matthew' }, { LEVEL: 4, NAME: 'Robert' }],
];
Output
[
[{ LEVEL: 1, NAME: 'Mark,Adams' }, { LEVEL: 2, NAME: 'Robin' }],
[{ LEVEL: 3, NAME: 'Williams' }],
[{ LEVEL: 4, NAME: 'Matthew,Robert' }],
];
I tried with the following code but not getting the correct result
let finalArr = [];
arr.forEach(o => {
let temp = finalArr.find(x => {
if (x && x.LEVEL === o.LEVEL) {
x.NAME += ', ' + o.NAME;
return true;
}
if (!temp) finalArr.push(o);
});
});
console.log(finalArr);
You could map the outer array and reduce the inner array by finding the same level and add NAME, if found. Otherwise create a new object.
var data = [[{ LEVEL: 1, NAME: "Mark" }, { LEVEL: 1, NAME: "Adams" }, { LEVEL: 2, NAME: "Robin"}], [{ LEVEL: 3, NAME: "Williams" }], [{ LEVEL: 4, NAME: "Matthew" }, { LEVEL: 4, NAME: "Robert" }]],
result = data.map(a => a.reduce((r, { LEVEL, NAME }) => {
var temp = r.find(q => q.LEVEL === LEVEL);
if (temp) temp.NAME += ',' + NAME;
else r.push({ LEVEL, NAME });
return r;
}, []));
console.log(result);
.as-console-wrapper { max-height: 100% !important; top: 0; }
Assuming you only want to merge within the same array and not across arrays, and assuming there aren't all that many entries (e.g., fewer than several hundred thousand), the simple thing is to build a new array checking to see if it already has the same level in it:
let result = arr.map(entry => {
let newEntry = [];
for (const {LEVEL, NAME} of entry) {
const existing = newEntry.find(e => e.LEVEL === LEVEL);
if (existing) {
existing.NAME += "," + NAME;
} else {
newEntry.push({LEVEL, NAME});
}
}
return newEntry;
});
let arr= [
[{"LEVEL":1,"NAME":"Mark"},
{"LEVEL":1,"NAME":"Adams"},
{"LEVEL":2,"NAME":"Robin"} ],
[{"LEVEL":3,"NAME":"Williams"}],
[{"LEVEL":4,"NAME":"Matthew"},
{"LEVEL":4,"NAME":"Robert"}]
];
let result = arr.map(entry => {
let newEntry = [];
for (const {LEVEL, NAME} of entry) {
const existing = newEntry.find(e => e.LEVEL === LEVEL);
if (existing) {
existing.NAME += "," + NAME;
} else {
newEntry.push({LEVEL, NAME});
}
}
return newEntry;
});
console.log(result);
If the nested arrays can be truly massively long, you'd want to build a map rather than doing the linear search (.find) each time.
I'd try to do as much of this in constant time as possible.
var m = new Map();
array.forEach( refine.bind(m) );
function refine({ LABEL, NAME }) {
var o = this.get(NAME)
, has = !!o
, name = NAME
;
if (has) name = `${NAME}, ${o.NAME}`;
this.delete(NAME);
this.set(name, { NAME: name, LABEL });
}
var result = Array.from( m.values() );
I haven't tested this as I wrote it on my phone at the airport, but this should at least convey the approach I would advise.
EDIT
Well... looks like the question was edited... So... I'd recommend adding a check at the top of the function to see if it's an array and, if so, call refine with an early return. Something like:
var m = new Map();
array.forEach( refine.bind(m) );
function refine(item) {
var { LABEL, NAME } = item;
if (!NAME) return item.forEach( refine.bind(this) ); // assume array
var o = this.get(NAME)
, has = !!o
, name = NAME
;
if (has) name = `${NAME}, ${o.NAME}`;
this.delete(NAME);
this.set(name, { NAME: name, LABEL });
}
var result = Array.from( m.values() );
That way, it should work with both your original question and your edit.
EDIT
Looks like the question changed again... I give up.
Map the array values: every element to an intermediate object, then create the desired object from the resulting entries:
const basicArr = [
[{"LEVEL":1,"NAME":"Mark"},
{"LEVEL":1,"NAME":"Adams"},
{"LEVEL":2,"NAME":"Robin"} ],
[{"LEVEL":3,"NAME":"Williams"}],
[{"LEVEL":4,"NAME":"Matthew"},
{"LEVEL":4,"NAME":"Robert"}]
];
const leveled = basicArr.map( val => {
let obj = {};
val.forEach(v => {
obj[v.LEVEL] = obj[v.LEVEL] || {NAME: []};
obj[v.LEVEL].NAME = obj[v.LEVEL].NAME.concat(v.NAME);
});
return Object.entries(obj)
.map( ([key, val]) => ({LEVEL: +key, NAME: val.NAME.join(", ")}));
}
);
console.log(leveled);
.as-console-wrapper { top: 0; max-height: 100% !important; }
if you want to flatten all levels
const basicArr = [
[{"LEVEL":1,"NAME":"Mark"},
{"LEVEL":1,"NAME":"Adams"},
{"LEVEL":2,"NAME":"Robin"} ],
[{"LEVEL":3,"NAME":"Williams"}],
[{"LEVEL":4,"NAME":"Matthew"},
{"LEVEL":4,"NAME":"Robert"},
{"LEVEL":2,"NAME":"Cynthia"}],
[{"LEVEL":3,"NAME":"Jean"},
{"LEVEL":4,"NAME":"Martha"},
{"LEVEL":2,"NAME":"Jeff"}],
];
const leveled = basicArr.map( val => Object.entries (
val.reduce( (acc, val) => {
acc[val.LEVEL] = acc[val.LEVEL] || {NAME: []};
acc[val.LEVEL].NAME = acc[val.LEVEL].NAME.concat(val.NAME);
return acc;
}, {}))
.map( ([key, val]) => ({LEVEL: +key, NAME: val.NAME.join(", ")})) )
.flat() // (use .reduce((acc, val) => acc.concat(val), []) for IE/Edge)
.reduce( (acc, val) => {
const exists = acc.filter(x => x.LEVEL === val.LEVEL);
if (exists.length) {
exists[0].NAME = `${val.NAME}, ${exists.map(v => v.NAME).join(", ")}`;
return acc;
}
return [... acc, val];
}, [] );
console.log(leveled);
.as-console-wrapper { top: 0; max-height: 100% !important; }
ES6 way:
let say attributes is multidimensional array having multimple entries which need to combine like following:
let combinedArray = [];
attributes.map( attributes => {
combined = combinedArray.concat(...attributes);
});
I have two arrays, with nested objects, downloaded as part of calls to API endpoints, one (preview) has just numbers.
Example:
[{
obj1:[1, 2],
obj2:[3, 4]
}]
I had to make a second call to another endpoint, to get a list of IDs with strings
Example:
[{
obj1:[{
id:1,
name:'string_name1'
}, {
id:2,
name:'string_name2'
}]
}, {
obj2:[{
id:3,
name:'string_name3'
}, {
id:4,
name:'string_name4'
}]
}];
I need to match the IDs to the first array of objects numbers, so I have strings/text values to display on my web page
I have 2 functions
The first one, pulls the numbers from the preview array and pushes them to my own editable array that I will use to display on the page
This is the array before function runs
objName = [['obj1'], ['obj2']];
This is the first function, matches the names in preview to the names in my array and pushes values
setNumbers(){
for(let i = 0; i < this.objName.length; i++){
for(var name in this.preview[0]) {
if (name == this.objName[i][0]){
for(var val in this.preview[0][name]) {
this.objName[i].push(this.preview[0][name][val])
}
}
}
}
this.setStrings()
}
The second matches the IDs in fields to the numbers in objName and replaces with the string value
public setStrings(){
let feildId, feildName;
for(let i = 0; i < this.fields.length; i++){
var obj = this.fields[i]
for(var name in obj) {
if(this.objName[i][0] == name){
for(let j = 0; j < obj[name].length; j++){
feildId = obj[name][j].id
feildName = obj[name][j].name;
for(let x = 0; x < this.objName[i].length; x++){
if (this.objName[i][x] == feildId){
var index = this.objName[i].indexOf(feildId)
if (index !== -1) {
this.objName[i][index] = feildName;
}
}
}
}
}
}
}
console.log(this.objName)
}
The objName array, for output, ends up looking like:
[['obj1', 'string_name1', 'string_name2'], ['obj2', 'string_name3', 'string_name4']]
It works, but makes my eyes hurt, there must be an easier cleaner way of doing this?
Plunker link:
https://plnkr.co/edit/KBDu3ZehHl04er6eut6r?p=preview
Your data structures are not ideal for this kind of transformation. For instance, it would have been better if the display strings could be addressed directly given an "obj"-property and array index, without having to iterate through arrays.
Anyway, using the existing structure, you can still improve by using array functions, such as find and map:
class App {
constructor(preview, objName, fields) {
this.preview = preview;
this.objName = objName;
this.fields = fields;
this.setNumbers();
}
setNumbers() {
this.objName = this.objName.map( arr => arr.concat(this.preview[0][arr[0]]) );
this.setStrings();
}
setStrings() {
this.objName = this.objName.map( arr =>
[arr[0]].concat(arr.slice(1).map( val =>
this.fields.find( field => arr[0] in field )[arr[0]]
.find( item => item.id === val ).name
))
);
console.log(this.objName);
}
}
var objName = [['obj1'], ['obj2']],
preview = [{
obj1: [1, 2],
obj2: [3, 4]
}],
fields = [{
obj1:[{
id:1,
name:'string_name1'
}, {
id:2,
name:'string_name2'
}]
}, {
obj2:[{
id:3,
name:'string_name3'
}, {
id:4,
name:'string_name4'
}]
}];
new App(preview, objName, fields);
.as-console-wrapper { max-height: 100% !important; top: 0; }
Note that this code assumes all searches lead to matches. If this is not your case, you'll have to add some code to define which values should be returned in case of non-matching references.
Here is such a variant of the code:
class App {
constructor(preview, objName, fields) {
this.preview = preview;
this.objName = objName;
this.fields = fields;
this.setNumbers();
}
setNumbers() {
this.objName = this.objName.map( arr =>
arr[0] in this.preview[0]
? arr.concat(this.preview[0][arr[0]])
: arr
);
this.setStrings();
}
setStrings() {
this.objName = this.objName.map( arr =>
[arr[0]].concat(arr.slice(1).map( val => {
let find = this.fields.find( field => arr[0] in field );
if (find) find = find[arr[0]].find( item => item.id === val );
return find ? find.name : val;
}))
);
console.log(this.objName);
}
}
var objName = [['obj1'], ['obj2'], ['obj3']],
preview = [{
obj1: [1, 2],
obj2: [3, 4, 5],
}],
fields = [{
obj1:[{
id:1,
name:'string_name1'
}, {
id:2,
name:'string_name2'
}]
}, {
obj2:[{
id:3,
name:'string_name3'
}, {
id:4,
name:'string_name4'
}]
}];
new App(preview, objName, fields);
.as-console-wrapper { max-height: 100% !important; top: 0; }
It's easier and cleaner to do this if you break it down into smaller pieces:
let objsToMap = [{
obj1: [1, 2, 7],
obj2: [3, 4],
obj3: [1, 2]
}]
let objValues = [{
obj1: [{
id: 1,
name: 'string_name1'
}, {
id: 2,
name: 'string_name2'
}]
}, {
obj2: [{
id: 3,
name: 'string_name3'
}, {
id: 4,
name: 'string_name4'
}]
}];
function findValueForId(objDef, id) {
let idKeyMap = objDef.find(item => item.id === id);
return idKeyMap ? idKeyMap.name : null;
}
function findObjectValues(valueMapping, key) {
let objectWithObjectValues = valueMapping.find(item => key in item);
return objectWithObjectValues ? objectWithObjectValues[key] : null;
}
// returns an array containing key followed by the values corresponding to the specified ids
function lookupObject(key, ids, valueMapping) {
let objDef = findObjectValues(valueMapping, key) || [];
let valuesForIds = ids.map(id => findValueForId(objDef, id));
let valuesWithoutBlanks = valuesForIds.filter(value => value);
return [key].concat(valuesWithoutBlanks);
}
let result = Object.entries(objsToMap[0]).map(([k, v]) => lookupObject(k, v, objValues));
console.log(result);
You'll notice that this approach uses .find() in two places because your second data structure nests everything into arrays instead of having direct property references. This isn't very good because it's not good for performance and makes the code more convoluted than it has to be.
Another option is to rearrange the second array before consuming it, so that it's like this:
let objValues = {
obj1: {
'1': 'string_name1',
'2': 'string_name2'
},
obj2: {
'3': 'string_name3',
'4': 'string_name4'
}
};
Here's how you could do that:
let objsToMap = [{
obj1: [1, 2, 7],
obj2: [3, 4],
obj3: [1, 2]
}]
let objValuesRaw = [{
obj1: [{
id: 1,
name: 'string_name1'
}, {
id: 2,
name: 'string_name2'
}]
}, {
obj2: [{
id: 3,
name: 'string_name3'
}, {
id: 4,
name: 'string_name4'
}]
}];
function cleanupObjDef(objDef) {
return objDef.reduce(function(acc, el) {
acc[el.id] = el.name;
return acc;
}, {});
}
function cleanupObjValues(objValues) {
let allCombined = Object.assign({}, ...objValues);
return Object.entries(allCombined).reduce(function (acc, [k, v]) {
acc[k] = cleanupObjDef(v);
return acc;
}, {});
}
// returns an array containing key followed by the values corresponding to the specified ids
function lookupObject(key, ids, valueMapping) {
let objDef = valueMapping[key] || {};
let valuesForIds = ids.map(id => objDef[id]);
let valuesWithoutBlanks = valuesForIds.filter(value => value);
return [key].concat(valuesWithoutBlanks);
}
let objValues = cleanupObjValues(objValuesRaw);
let result = Object.keys(objsToMap[0]).map(key => lookupObject(key, objsToMap[0][key], objValues));
console.log(result);