Javascript: Generate a fresh array of interconnected objects (B) by pairing objects from an existing array of objects (A)

Question

Javascript: Generate a fresh array of interconnected objects (B) by pairing objects from an existing array of objects (A)

Since yesterday, I have successfully tackled my algorithm problem.

Recognizing that the title may be a bit vague, I will do my best to clarify my thoughts.

What I aim to do is transform a table of objects (A) into a new table of objects (B).

The array of objects (A) is structured like this:

{
  id : "REC-001",
  text: "Facebook",
  link: ["REC-002", "REC-003"]
},
{
  id : "REC-002",
  text: "Instagram",
  link: ["REC-003"]
},
{
  id : "REC-003",
  text: "Snapshat",
  link: ["REC-001", "REC-002"]
}

The desired structure for object array (B) is as follows:

{
  id : "REC-001",
  text: "Facebook",
  link: [
    {
      key: "REC-002",
      text: "Instagram"
    },
    {
      key: "REC-003",
      text: "Snapshat"
    }
  ]
},
{
  id : "REC-002",
  text: "Instagram",
  link: [
    {
      key: "REC-003",
      text: "Snapshat"
    }
  ]
},
{
  id : "REC-003",
  text: "Snapshat",
  link: [
    {
      key: "REC-001",
      text: "Facebook"
    },
    {
      key: "REC-002",
      text: "Instagram"
    }
  ]
}

Currently, the only code snippet that partially aligns with my goal looks like this (everything else has been discarded):

 for (let i = 0; i < objectA.length; i++) {
   for (let j = 0; j < objectA[i].link.length; j++) {
     console.log(i, j, objectA[i].link[j])
   };
 };

The output of the console.log is:

0 0 'REC-002'
0 1 'REC-003'
1 0 'REC-003'
2 0 'REC-001'
2 1 'REC-002'

Unfortunately, I am struggling to generate an array of "link" objects associated with the main "id". Any assistance would be greatly appreciated!

Thank you,

Sam.

javascript arrays loops

Answer 1

Answer №1

let data = [
  {
    id : "REC-001",
    text: "Facebook",
    link: ["REC-002", "REC-003"]
  },
  {
    id : "REC-002",
    text: "Instagram",
    link: ["REC-003"]
  },
  {
    id : "REC-003",
    text: "Snapshat",
    link: ["REC-001", "REC-002"]
  }
];

let newData = data.map(item => ({
  id: item.id,
  text: item.text,
  link: item.link.map(l => {
    let foundItem = data.find(a => a.id === l);
    return {
      key: foundItem.id,
      text: foundItem.text
    };
  })
}));

console.log(newData);

Answer 2

let data = [
  {
    id : "REC-001",
    text: "Facebook",
    link: ["REC-002", "REC-003"]
  },
  {
    id : "REC-002",
    text: "Instagram",
    link: ["REC-003"]
  },
  {
    id : "REC-003",
    text: "Snapshat",
    link: ["REC-001", "REC-002"]
  }
];

let newData = data.map(item => ({
  id: item.id,
  text: item.text,
  link: item.link.map(l => {
    let foundItem = data.find(a => a.id === l);
    return {
      key: foundItem.id,
      text: foundItem.text
    };
  })
}));

console.log(newData);

Answer 3

Answer №2

To start, extract the id and then construct the desired nested arrays.

var data = [{ id : "REC-001", text: "Facebook", link: ["REC-002", "REC-003"] }, { id : "REC-002", text: "Instagram", link: ["REC-003"] }, { id : "REC-003", text: "Snapshat", link: ["REC-001", "REC-002"] }], ids = data.reduce((m, { id: key, text }) => m.set(key, { key, text }), new Map), result = data.map(o => ({ ...o, link: o.link.map(id => ids.get(id)) }));

console.log(result);

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

An alternate method involves a single loop with a closure over a hash table to gather values later.

var data = [{ id : "REC-001", text: "Facebook", link: ["REC-002", "REC-003"] }, { id : "REC-002", text: "Instagram", link: ["REC-003"] }, { id : "REC-003", text: "Snapshat", link: ["REC-001", "REC-002"] }], result = data.map(
(m => o => (
Object.assign(m[o.id] = m[o.id] || {}, { key: o.id, text: o.text }),
{ ...o, link: o.link.map(id => m[id] = m[id] || {}) })
)
({})
);

console.log(result);

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

Answer 4

To start, extract the id and then construct the desired nested arrays.

var data = [{ id : "REC-001", text: "Facebook", link: ["REC-002", "REC-003"] }, { id : "REC-002", text: "Instagram", link: ["REC-003"] }, { id : "REC-003", text: "Snapshat", link: ["REC-001", "REC-002"] }], ids = data.reduce((m, { id: key, text }) => m.set(key, { key, text }), new Map), result = data.map(o => ({ ...o, link: o.link.map(id => ids.get(id)) }));

console.log(result);

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

An alternate method involves a single loop with a closure over a hash table to gather values later.

var data = [{ id : "REC-001", text: "Facebook", link: ["REC-002", "REC-003"] }, { id : "REC-002", text: "Instagram", link: ["REC-003"] }, { id : "REC-003", text: "Snapshat", link: ["REC-001", "REC-002"] }], result = data.map(
(m => o => (
Object.assign(m[o.id] = m[o.id] || {}, { key: o.id, text: o.text }),
{ ...o, link: o.link.map(id => m[id] = m[id] || {}) })
)
({})
);

console.log(result);

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

Answer 5

Answer №3

Here is a solution to help resolve the issue:

let originalArray = [{
  id : "REC-001",
  text: "Facebook",
  link: ["REC-002", "REC-003"]
},
{
  id : "REC-002",
  text: "Instagram",
  link: ["REC-003"]
},
{
  id : "REC-003",
  text: "Snapshat",
  link: ["REC-001", "REC-002"]
}];

let modifiedArray = originalArray.map( item => {
return {
  ...item,
    link: [{key: item.link[0], text: 'Instagram'}, {key: item.link[1], text: 'Facebook'}]
  }
});

console.log(modifiedArray);

Answer 6

Here is a solution to help resolve the issue:

let originalArray = [{
  id : "REC-001",
  text: "Facebook",
  link: ["REC-002", "REC-003"]
},
{
  id : "REC-002",
  text: "Instagram",
  link: ["REC-003"]
},
{
  id : "REC-003",
  text: "Snapshat",
  link: ["REC-001", "REC-002"]
}];

let modifiedArray = originalArray.map( item => {
return {
  ...item,
    link: [{key: item.link[0], text: 'Instagram'}, {key: item.link[1], text: 'Facebook'}]
  }
});

console.log(modifiedArray);

Answer 7

Answer №4

This implementation should do the job, please let me know if you encounter any issues and feel free to adjust the variable names as required. (Please note that this solution is greedy and lacks optimization)

 var items = [{
      id : "REC-001",
      text: "Facebook",
      link: ["REC-002", "REC-003"]
    },
    {
      id : "REC-002",
      text: "Instagram",
      link: ["REC-003"]
    },
    {
      id : "REC-003",
      text: "Snapshat",
      link: ["REC-001", "REC-002"]
    }];
    
    items.forEach(function(item){
      let newLinks = [];
      item.link.forEach(function(linkId){
        items.forEach(function(obj){
          if(linkId === obj.id){
            newLinks.push({key : obj.id, text : obj.text });
          }
        });
         item.link = newLinks;
      });
    });
    
    console.log(items);

Answer 8

This implementation should do the job, please let me know if you encounter any issues and feel free to adjust the variable names as required. (Please note that this solution is greedy and lacks optimization)

 var items = [{
      id : "REC-001",
      text: "Facebook",
      link: ["REC-002", "REC-003"]
    },
    {
      id : "REC-002",
      text: "Instagram",
      link: ["REC-003"]
    },
    {
      id : "REC-003",
      text: "Snapshat",
      link: ["REC-001", "REC-002"]
    }];
    
    items.forEach(function(item){
      let newLinks = [];
      item.link.forEach(function(linkId){
        items.forEach(function(obj){
          if(linkId === obj.id){
            newLinks.push({key : obj.id, text : obj.text });
          }
        });
         item.link = newLinks;
      });
    });
    
    console.log(items);

Answer 9

Answer №5

Here is some code that may be useful to you:

var ArrayX = [{
  id : "ITEM-001",
  description: "Apple",
  connection: ["ITEM-002", "ITEM-003"]
},
{
  id : "ITEM-002",
  description: "Banana",
  connection: ["ITEM-003"]
},
{
  id : "ITEM-003",
  description: "Cherry",
  connection: ["ITEM-001", "ITEM-002"]
}]

function getModifiedArray(array) {
  const formatConnection = (key) => ({
    key,
    description: array.find(el => el.id === key).description
  });

  return array.map((item) => (
    item.connection ? { ...item, connection: item.connection.map(formatConnection) } : item
  ));
}

console.log(getModifiedArray(ArrayX));

Answer 10

Here is some code that may be useful to you:

var ArrayX = [{
  id : "ITEM-001",
  description: "Apple",
  connection: ["ITEM-002", "ITEM-003"]
},
{
  id : "ITEM-002",
  description: "Banana",
  connection: ["ITEM-003"]
},
{
  id : "ITEM-003",
  description: "Cherry",
  connection: ["ITEM-001", "ITEM-002"]
}]

function getModifiedArray(array) {
  const formatConnection = (key) => ({
    key,
    description: array.find(el => el.id === key).description
  });

  return array.map((item) => (
    item.connection ? { ...item, connection: item.connection.map(formatConnection) } : item
  ));
}

console.log(getModifiedArray(ArrayX));

Answer 11

Answer №6

If you want to change the first array into a specific format, you can utilize the array methods map and find.

The Array.map method allows you to iterate over each element in the original array and modify it as needed.

On the other hand, the Array.find method is used to search for a specific element within an array based on certain criteria.

const arrayA = [
{
id: 'REC-001',
text: 'Facebook',
link: ['REC-002', 'REC-003'],
},
{
id: 'REC-002',
text: 'Instagram',
link: ['REC-003'],
},
{
id: 'REC-003',
text: 'Snapshat',
link: ['REC-001', 'REC-002'],
},
]

const arrayB = arrayA.map((mapArrayAChild) => {
return {
...mapArrayAChild,
link: mapArrayAChild.link.map((mapLinkChild) => {
const linkObject = arrayA.find((findLinkChild) => {
return findLinkChild.id === mapLinkChild
})
return {
key: linkObject.id,
text: linkObject.text,
}
}),
}
})

console.log(JSON.stringify(arrayB, null, '\t'))

To explain the process:

We iterate through the elements of arrayA and create a new array with transformed elements.

const arraB = arrayA.map(functionTransformingEachChild)

For each iteration, we copy the properties of the current element and paste them into a new object using the spread operator.

return {
    ...childInCurrentIteration
}

We update the link property with a new array created using the map method.

return {
    ...childInCurrentIteration,
    link: childInCurrentIteration.link.map(otherFunctionTransformingEachChild)
}

While transforming each element of the link array, we locate the corresponding object in the original arrayA using the key string from the current iteration (e.g., "REC-002").

mapArrayAChild.link.map(
    (mapLinkChild) => {
        const linkObject = arrayA.find(
            (linkKeyStringInCurrentIteration) => {
                return linkKeyStringInCurrentIteration.key === mapLinkChild
            }
        )
        // ...
    }
)

We replace the string in the link array with a new object containing the necessary properties.

return {
    key: linkObject.id,
    text: linkObject.text
}

Answer 12

If you want to change the first array into a specific format, you can utilize the array methods map and find.

The Array.map method allows you to iterate over each element in the original array and modify it as needed.

On the other hand, the Array.find method is used to search for a specific element within an array based on certain criteria.

const arrayA = [
{
id: 'REC-001',
text: 'Facebook',
link: ['REC-002', 'REC-003'],
},
{
id: 'REC-002',
text: 'Instagram',
link: ['REC-003'],
},
{
id: 'REC-003',
text: 'Snapshat',
link: ['REC-001', 'REC-002'],
},
]

const arrayB = arrayA.map((mapArrayAChild) => {
return {
...mapArrayAChild,
link: mapArrayAChild.link.map((mapLinkChild) => {
const linkObject = arrayA.find((findLinkChild) => {
return findLinkChild.id === mapLinkChild
})
return {
key: linkObject.id,
text: linkObject.text,
}
}),
}
})

console.log(JSON.stringify(arrayB, null, '\t'))

To explain the process:

We iterate through the elements of arrayA and create a new array with transformed elements.

const arraB = arrayA.map(functionTransformingEachChild)

For each iteration, we copy the properties of the current element and paste them into a new object using the spread operator.

return {
    ...childInCurrentIteration
}

We update the link property with a new array created using the map method.

return {
    ...childInCurrentIteration,
    link: childInCurrentIteration.link.map(otherFunctionTransformingEachChild)
}

While transforming each element of the link array, we locate the corresponding object in the original arrayA using the key string from the current iteration (e.g., "REC-002").

mapArrayAChild.link.map(
    (mapLinkChild) => {
        const linkObject = arrayA.find(
            (linkKeyStringInCurrentIteration) => {
                return linkKeyStringInCurrentIteration.key === mapLinkChild
            }
        )
        // ...
    }
)

We replace the string in the link array with a new object containing the necessary properties.

return {
    key: linkObject.id,
    text: linkObject.text
}

Javascript: Generate a fresh array of interconnected objects (B) by pairing objects from an existing array of objects (A)

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

Utilizing the power of jQuery's $.each method to dynamically generate HTML select options within an AJAX

Trigger the function upon choosing the identical option in the select HTML tag

Ways to retrieve a file from a specific location using fetch/axios?

How should we structure our JavaScript code: MVC or self-rendering components?

The POST variable consistently remains void

Are JS promises compatible with any function in Angular?

Uploading a file with AngularJS and storing it in a database

Sending an array of dictionary objects to a JavaScript function

What is the process for setting up a Schema and express router in the MERN stack?

The combination of autocomplete and keydown functionality is a powerful tool

AngularJS implemented to trigger a popup alert after a certain duration of time has elapsed since the

The dropdown arrow icon fails to display downward direction when double-clicked

Building a Timekeeping Tool with Javascript

The time module in Python consistently displays a time difference of 0 when measuring the time between two lines of code

Update the CSS for InputLabel

Node.js: Implementing user redirection after successfully signing up/login on a nodejs platform

Clicking the button will close the active tab in Firefox

Displaying all divs when the checkboxes are unchecked

What is the method to have text added automatically to an input field when a key is pressed?

An unexpected error occurred while attempting to establish a connection to a MySQL server using Sequelize: 'LRU is not a constructor'