0

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;
});
Improve this question

7 Answers 7

Reset to default
2

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 titles

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)

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

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)

Improve this answer

2 Comments

Thanks. Can you please explain the operation?
If there are ids greater than 10, it will replace 1 and it will become Writing0
0

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);

Improve this answer

Comments

0

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);

Improve this answer

Comments

0

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.

Improve this answer

Comments

0

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; }

Improve this answer

Comments

0

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);

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.