将数组元素与其他数组映射

Question

I have two arrays

array1 = [{id:"1",title:"Writing"},{id:"2",title:"Singing"},{id:"3",title:"Dance"}];

array2 = [{tags: "1",title: "USA",type: "text"},
{tags: "1,2,3",title: "Japan",type: "image"},
{tags: "2,3",title: "Japan",type: "image"}];

I have to map the id of the array1 to tags of the array2 and display the corresponding title from the array1.

The new array2 should look like,

array2=[{tags:"Writing",title:"USA", type:"text"},
{tags: "Writing,Singing,Dance",title: "Japan",type: "image"},
{tags: "Singing,Dance",title: "Japan",type: "image"}];

I did this to get the array1 mapping and got stuck after that.

var newtags= (array1).map(obj=>{
var rObj={};
rObj[obj.id]=obj.title;
return rObj;
});

Answer 1

You can create a mapping object with each id as key and title as value using reduce . Then map over array2 and split each tags to get the new tags

 const array1=[{id:"1",title:"Writing"},{id:"2",title:"Singing"},{id:"3",title:"Dance"}], array2=[{tags:"1",title:"USA",type:"text"},{tags:"1,2,3",title:"Japan",type:"image"},{tags:"2,3",title:"Japan",type:"image"}] const map = array1.reduce((r, { id, title }) => ({ ...r, [id]: title }), {}); const output = array2.map(({ tags, ...rest }) => { const newTags = tags.split(',').map(id => map[id]).join(',') return { tags: newTags, ...rest } }) console.log(output) 

You could also get the mapping object using Object.fromEntries()

const map = Object.fromEntries(array1.map(({ id, title }) => [id, title]));

Then use the regex /\\d+(?=,|$)/ to match the numbers and replace them with their respective title s

 const array1=[{id:"1",title:"Writing"},{id:"2",title:"Singing"},{id:"3",title:"Dance"}], array2=[{tags:"1",title:"USA",type:"text"},{tags:"1,2,3",title:"Japan",type:"image"},{tags:"2,3",title:"Japan",type:"image"}] const map = Object.fromEntries(array1.map(({ id, title }) => [id, title])); const output = array2.map(({ tags, ...rest }) => { const newTags = tags.replace(/\\d+(?=,|$)/g, n => map[n]) return { tags: newTags, ...rest } }) console.log(output) 

Answer 2

You can use filter , map and join method, split tags and filter tags in array1 first.

var newtags= (array2).map(obj=>{
   let tags = obj.tags.split(",");
   let titles = array1.filter(c=>tags.includes(c.id)).map(c=>c.title);
   obj.tags = titles.join();
   return obj;
});

 array1 = [{id:"1",title:"Writing"},{id:"2",title:"Singing"},{id:"3",title:"Dance"}]; array2 = [{tags: "1",title: "USA",type: "text"}, {tags: "1,2,3",title: "Japan",type: "image"}, {tags: "2,3",title: "Japan",type: "image"}]; var newtags= (array2).map(obj=>{ let tags = obj.tags.split(","); let titles = array1.filter(c=>tags.includes(c.id)).map(c=>c.title); obj.tags = titles.join(); return obj; }); console.log(newtags); 

Answer 3

Here's a solution

I'm using .map, .reduce and .replace to join array1 and array2 together.

 const array1 = [ { id: "1", title: "Writing" }, { id: "2", title: "Singing" }, { id: "3", title: "Dance" } ] const array2 = [ { tags: "1", title: "USA", type: "text" }, { tags: "1,2,3", title: "Japan", type: "image" }, { tags: "2,3", title: "Japan", type: "image" } ] const array3 = array2.map(item => ({ ...item, tags: array1.reduce((tags, {id, title}) => tags.replace(id, title), item.tags), })) console.log(array3) 

Answer 4

You can try following

• Use Array.reduce to convert array1 into an object with id as key and title as value ( Step 1 )
• Iterate over array2 using Array.forEach to update its tags property
  • To update tags property first split it by , to convert into an array
  • Map each value in array to its corresponding value in Object created in step 1
  • Join back the array with , and assign back to tags

 let array1 = [{id:"1",title:"Writing"},{id:"2",title:"Singing"},{id:"3",title:"Dance"}]; let array2 = [{tags: "1",title: "USA",type: "text"},{tags: "1,2,3",title: "Japan",type: "image"},{tags: "2,3",title: "Japan",type: "image"}]; let obj = array1.reduce((a,c) => Object.assign(a, {[c.id] : c.title}), {}); array2.forEach(o => o.tags = o.tags.split(",").map(v => obj[v]).join(",")); console.log(array2); 

Answer 5

To achieve expected result, use below option of looping array1 and replacing array2 tags with title

1. Loop Array1 using forEach
2. Replace array2 tags with each array1 title using array id

 array1 = [{id:"1",title:"Writing"},{id:"2",title:"Singing"},{id:"3",title:"Dance"}]; array2 = [{tags: "1",title: "USA",type: "text"}, {tags: "1,2,3",title: "Japan",type: "image"}, {tags: "2,3",title: "Japan",type: "image"}]; array1.forEach(v =>{ const re = new RegExp(v.id, "g"); array2 = JSON.parse(JSON.stringify(array2).replace(re, v.title)) }) console.log(array2); 

Answer 6

I would consider breaking this down into several reusable functions. Of course it might be premature abstraction, but I've seen variants of this questions like often enough here that it makes sense to me to look toward the fundamentals.

We want to be able to look up the values in a list stored as an array with what might be arbitrary field names. So we use a function makeDictionary that takes both the field names and the array and returns an object that maps them, such as {'1': 'Writing', '2': 'Singing',...}`.

Then we can use fillField supplying a dictionary, a field name, and an object, and replace that field with the result of looking up the tags in the dictionary. This is a little more specific to the problem, mostly because the comma-separated string format for your tags is a little more cumbersome than it might be if it were an array.

With these, useTags is simple to write, and it is the first function here focused directly on your needs. It combines the above, supplying the field names id and title for the dictionary and tags for your main objects.

This is what it looks like combined:

 const makeDictionary = (keyName, valName) => (arr) => arr .reduce ( (a, {[keyName]: k, [valName]: v}) => ({...a, [k]: v}) , {} ) const fillField = (field, dict) => ({[field]: f, ...rest}) => ({ ...rest, [field]: f .split (/,\\s*/) .map (t => dict[t]) .join (', ') }) const useTags = (tags, dict = makeDictionary ('id', 'title') (tags) ) => (objs) => objs .map ( fillField ('tags', dict) ) const tags = [{id: "1", title: "Writing"}, {id: "2", title: "Singing"}, {id: "3", title: "Dance"}]; const updateTags = useTags (tags) const items = [{tags: "1", title: "USA", type: "text"}, {tags: "1, 2, 3", title: "Japan", type: "image"}, {tags: "2, 3", title: "Japan", type: "image"}]; console .log ( updateTags (items) ) 

Note that I took a little liberty with the tags: "2,3" and tags: "Singing,Dance" formats, adding a little white space. It's trivial to take this out. But even better, if possible, would be to change this to use arrays for your tags.

Answer 7

You could take a real Map and map the values to the new objects.

 var array1 = [{ id: "1", title: "Writing" }, { id: "2", title: "Singing" }, { id: "3", title: "Dance" }], array2 = [{ tags: "1", title: "USA", type: "text" }, { tags: "1,2,3", title: "Japan", type: "image" }, { tags: "2,3", title: "Japan", type: "image" }], tags = array1.reduce((m, { id, title }) => m.set(id, title), new Map), result = array2.map(o => ({ ...o, tags: o.tags.split(',').map(Map.prototype.get, tags).join() })); console.log(result); 

 .as-console-wrapper { max-height: 100% !important; top: 0; }