Comparing elements within one array to those in another array

Question

Comparing elements within one array to those in another array

I am working with two arrays containing different data sets

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

My task is to link the id values from array1 to the tags values in array2 and display the corresponding titles from array1.

As a result, the updated array2 should appear like this:

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

I managed to map the array1 data, but I encountered difficulties beyond that point.

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

javascript arrays dictionary

Answer 1

Answer №1

To create a mapping object with each unique id as a key and its corresponding title as the value, you can utilize the reduce method. Next, iterate over array2 and utilize the split method on each tags element to extract 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((res, { id, title }) => ({ ...res, [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 can also generate the mapping object using Object.fromEntries()

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

Then employ the regex pattern /\d+(?=,|$)/ to identify the numbers and substitute them with their corresponding 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, num => map[num]);
  return { tags: newTags, ...rest };
});

console.log(output)

Answer 2

To create a mapping object with each unique id as a key and its corresponding title as the value, you can utilize the reduce method. Next, iterate over array2 and utilize the split method on each tags element to extract 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((res, { id, title }) => ({ ...res, [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 can also generate the mapping object using Object.fromEntries()

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

Then employ the regex pattern /\d+(?=,|$)/ to identify the numbers and substitute them with their corresponding 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, num => map[num]);
  return { tags: newTags, ...rest };
});

console.log(output)

Answer 3

Answer №2

Here is the solution

To combine array1 and array2, I am utilizing .map, .reduce, and .replace methods.

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

Here is the solution

To combine array1 and array2, I am utilizing .map, .reduce, and .replace methods.

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 5

Answer №3

Here is a suggested approach:

Utilize Array.reduce method to transform array1 into an object where id becomes the key and title becomes the value (Step 1)
Traverse through array2 with Array.forEach to update its tags property
- For updating the tags property, start by splitting it by , to convert it to an array
- Map each value in the array to its corresponding value in the Object created in step 1
- Join the array back with , and assign it 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 6

Here is a suggested approach:

Utilize Array.reduce method to transform array1 into an object where id becomes the key and title becomes the value (Step 1)
Traverse through array2 with Array.forEach to update its tags property
- For updating the tags property, start by splitting it by , to convert it to an array
- Map each value in the array to its corresponding value in the Object created in step 1
- Join the array back with , and assign it 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 7

Answer №4

In order to achieve the desired outcome, follow the steps below to loop through array1 and replace array2 tags with their corresponding titles:

Utilize the forEach method to loop through Array1
Replace array2 tags with the title of each array1 item based on the 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 8

In order to achieve the desired outcome, follow the steps below to loop through array1 and replace array2 tags with their corresponding titles:

Utilize the forEach method to loop through Array1
Replace array2 tags with the title of each array1 item based on the 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 9

Answer №5

One approach could be to break this task into smaller, reusable functions. While it may seem like over-engineering at first, encountering similar questions frequently suggests a need to focus on foundational concepts.

To achieve our goal of looking up values in an array with potentially arbitrary field names, we can create a function called makeDictionary. This function will take field names and the array as input, returning an object that maps them accordingly, for example {'1': 'Writing', '2': 'Singing',...}.

Next, we can use the fillField function by providing a dictionary, field name, and an object to replace that field with values from the dictionary lookup. This function is more tailored to the specific issue, especially given the complexity introduced by the comma-separated string format for tags.

After defining these functions, we can easily implement useTags, which directly addresses your requirements. By using field names id and title for the dictionary and tags for main objects, we can streamline the process.

Here is the merged version of these functions:

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 some formatting adjustments were made to the tags like tags: "2,3" and tags: "Singing,Dance", but these can be easily reverted. Ideally, transitioning to using arrays for tags would streamline the process further.

Answer 10

One approach could be to break this task into smaller, reusable functions. While it may seem like over-engineering at first, encountering similar questions frequently suggests a need to focus on foundational concepts.

To achieve our goal of looking up values in an array with potentially arbitrary field names, we can create a function called makeDictionary. This function will take field names and the array as input, returning an object that maps them accordingly, for example {'1': 'Writing', '2': 'Singing',...}.

Next, we can use the fillField function by providing a dictionary, field name, and an object to replace that field with values from the dictionary lookup. This function is more tailored to the specific issue, especially given the complexity introduced by the comma-separated string format for tags.

After defining these functions, we can easily implement useTags, which directly addresses your requirements. By using field names id and title for the dictionary and tags for main objects, we can streamline the process.

Here is the merged version of these functions:

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 some formatting adjustments were made to the tags like tags: "2,3" and tags: "Singing,Dance", but these can be easily reverted. Ideally, transitioning to using arrays for tags would streamline the process further.

Answer 11

Answer №6

To convert an array using a JavaScript Map, you can assign new values to objects based on the mapping.

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

Answer 12

To convert an array using a JavaScript Map, you can assign new values to objects based on the mapping.

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

Answer 13

Answer №7

To manipulate data in JavaScript, leverage the filter, map, and join methods. Initially, split the tags and then proceed to filter them within array1.

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 14

To manipulate data in JavaScript, leverage the filter, map, and join methods. Initially, split the tags and then proceed to filter them within array1.

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

Comparing elements within one array to those in another array

Answer №1

Answer №2

Here is the solution

Answer №3

Answer №4

Answer №5

Answer №6

Answer №7

Similar questions

Pass information from Vue JS v-for to a button when it is clicked

The function _path2.default.basename does not work when using convertapi within an Angular framework

Vue.js Google Places Autocomplete Plugin

What causes the error of inputRef.current being null in CurrencyTextField?

Buttons in Laravel are shifting unexpectedly

Pressing the shortcut key will activate the function specified in ng-click,

Vue.js: EventBus.$on is not properly transmitting the received value

Repeated attempts to initiate ajax script failing to function

Issue with the back-to-top button arises when smooth-scrolling feature is activated

The CSS is not displaying correctly on Safari and Chrome browsers in Mac OS

How can I keep the cursor in place while editing a phone number field on Sencha ExtJS?

How can I identify the correct key to access a specific value within an array?

Utilize the dimensions of one image to resize others using the JavaScript method .getBoundingClientRect

playing with JSON data in angular

Running two different wdio.config.js files consecutively

Locate a specific word within a sentence using PHP

Is Jquery Mobile's Table lacking responsiveness?

Issue encountered: "require" is not recognized when attempting to access my local JSON file in Vue.js

Determining html column values using a related column and user input

What is the best method for creating table column text within a Bootstrap Modal through JSON data?