Combining array of objects by various identifiers

Question

Combining array of objects by various identifiers

I'm facing a situation like this:

const idMappings = {
// id: parentId
  "2": "1",
  "3": "1"
}

const inputData = [
  {
    id: "1",
    data: [1],
  },
   {
     id: "2",
     data: [2]
   },
   {
     id: "3",
     data: [3]
   },
   {
     id: "4",
     data: [4]
   }
]

const expectedOutput = [
  {
    id: "1",
    data: [1,2,3]
  },
  {
    id: "4",
    data: [4]
  }
]

Using the 'idMappings' array, I aim to create a configuration that will determine which object in the 'inputData' array should have merged data (objects without an id-parentId pair defined should remain unchanged). The code above serves as a better demonstration of what I'm trying to achieve. I've attempted some mappings but haven't achieved desirable results. Is there a more efficient way to define the 'idMappings' array to simplify this scenario? Any suggestions would be greatly appreciated.

javascript arrays algorithm

Answer 1

Answer №1

To achieve this, utilize the reduce() method. Begin by creating an object that uses the id as the key. Eventually, you can transform it into an array using Object.values().

const ids = {
  // id: parentId
  "2": "1",
  "3": "1"
}

const input = [{
    id: "1",
    data: [1],
  },
  {
    id: "2",
    data: [2]
  },
  {
    id: "3",
    data: [3]
  },
  {
    id: "4",
    data: [4]
  }
]

const output = Object.values(input.reduce((acc, {
  id,
  data
}) => {
  if (id in ids) { // replace id with parent
    id = ids[id];
  }
  if (id in acc) {
    acc[id].data = acc[id].data.concat(data);
  } else {
    acc[id] = {
      id,
      data};
  }
  return acc;
}, {}));

console.log(output);

Answer 2

To achieve this, utilize the reduce() method. Begin by creating an object that uses the id as the key. Eventually, you can transform it into an array using Object.values().

const ids = {
  // id: parentId
  "2": "1",
  "3": "1"
}

const input = [{
    id: "1",
    data: [1],
  },
  {
    id: "2",
    data: [2]
  },
  {
    id: "3",
    data: [3]
  },
  {
    id: "4",
    data: [4]
  }
]

const output = Object.values(input.reduce((acc, {
  id,
  data
}) => {
  if (id in ids) { // replace id with parent
    id = ids[id];
  }
  if (id in acc) {
    acc[id].data = acc[id].data.concat(data);
  } else {
    acc[id] = {
      id,
      data};
  }
  return acc;
}, {}));

console.log(output);

Answer 3

Answer №2

If you need to gather references from similar groups, consider using the following code:

const
    ids = { 2: "1", 3: "1" },
    input = [{ id: "1", data: [1] }, { id: "2", data: [2] }, { id: "3", data: [3] }, { id: "4", data: [4] }],
    output = Object.values(input.reduce((r, { id, data }) => {
        id = ids[id] ?? id;
        (r[id] ??= { id, data: [] }).data.push(...data);
        return r;
    }, {}));

console.log(output);

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

Answer 4

If you need to gather references from similar groups, consider using the following code:

const
    ids = { 2: "1", 3: "1" },
    input = [{ id: "1", data: [1] }, { id: "2", data: [2] }, { id: "3", data: [3] }, { id: "4", data: [4] }],
    output = Object.values(input.reduce((r, { id, data }) => {
        id = ids[id] ?? id;
        (r[id] ??= { id, data: [] }).data.push(...data);
        return r;
    }, {}));

console.log(output);

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

Answer 5

Answer №3

If you want to manipulate the input array directly by cycling through it, consider using a method like the one shown below:

const input = [
  {
    id: '1',
    data: [1]
  },
  {
    id: '2',
    data: [2]
  },
  {
    id: '3',
    data: [3]
  },
  {
    id: '4',
    data: [4]
  }
]

const config = {
  2: '1',
  3: '1'
}

const merge = ({ input, config } = {}) => {
  for (const [childId, parentId] of Object.entries(config)) {
    const childIndex = input.findIndex(i => i.id == childId)
    const parent = input.find(i => i.id == parentId)
    parent.data.push(...input[childIndex].data)
    input.splice(childIndex, 1)
  }

  return input
}

console.log(merge({ input, config }))

Answer 6

If you want to manipulate the input array directly by cycling through it, consider using a method like the one shown below:

const input = [
  {
    id: '1',
    data: [1]
  },
  {
    id: '2',
    data: [2]
  },
  {
    id: '3',
    data: [3]
  },
  {
    id: '4',
    data: [4]
  }
]

const config = {
  2: '1',
  3: '1'
}

const merge = ({ input, config } = {}) => {
  for (const [childId, parentId] of Object.entries(config)) {
    const childIndex = input.findIndex(i => i.id == childId)
    const parent = input.find(i => i.id == parentId)
    parent.data.push(...input[childIndex].data)
    input.splice(childIndex, 1)
  }

  return input
}

console.log(merge({ input, config }))

Answer 7

Answer №4

the solution can be achieved in the following way:

let identifiers = { 2: "1", 3: "1" }
let inputData = [{ id: "1", data: [1] }, { id: "2", data: [2] }, { id: "3", data: [3] }, { id: "4", data: [4] }];
let keys = Object.keys(identifiers);
let objects = inputData.slice();//to preserve the original input
const result = objects.map(currentObject=>{
    let currentId = currentObject.id;
    if(keys.includes(currentId)){
        let updatedObject = objects.find(obj=>obj.id==identifiers[currentId])
        updatedObject.data.push(...currentObject.data)
    }
    return currentObject
})
console.log(result);

NOTE: slice() was used to avoid altering the original input

Answer 8

the solution can be achieved in the following way:

let identifiers = { 2: "1", 3: "1" }
let inputData = [{ id: "1", data: [1] }, { id: "2", data: [2] }, { id: "3", data: [3] }, { id: "4", data: [4] }];
let keys = Object.keys(identifiers);
let objects = inputData.slice();//to preserve the original input
const result = objects.map(currentObject=>{
    let currentId = currentObject.id;
    if(keys.includes(currentId)){
        let updatedObject = objects.find(obj=>obj.id==identifiers[currentId])
        updatedObject.data.push(...currentObject.data)
    }
    return currentObject
})
console.log(result);

NOTE: slice() was used to avoid altering the original input

Answer 9

Answer №5

You can achieve the desired result by utilizing the combination of Array#reduce, Object.entries, and Array#map methods in the following manner:

const ids = { "2": "1", "3": "1" },
      input = [ { id: "1", data: [1], }, { id: "2", data: [2] }, { id: "3", data: [3] }, { id: "4", data: [4] } ],

output = Object.entries(
    input.reduce(
        (acc,{id,data}) =>
        ids[id] ?
        ({...acc,[ids[id]]:[...(acc[ids[id]] || []),...data]}) :
        ({...acc,[id]:[...(acc[id] || []), ...data]}),{}
    )
)
.map(([id,data]) => ({id,data}));

console.log( output );
//OUTPUT: [{"id":"1","data":[1,2,3]},{"id":"4","data":[4]}]

Answer 10

You can achieve the desired result by utilizing the combination of Array#reduce, Object.entries, and Array#map methods in the following manner:

const ids = { "2": "1", "3": "1" },
      input = [ { id: "1", data: [1], }, { id: "2", data: [2] }, { id: "3", data: [3] }, { id: "4", data: [4] } ],

output = Object.entries(
    input.reduce(
        (acc,{id,data}) =>
        ids[id] ?
        ({...acc,[ids[id]]:[...(acc[ids[id]] || []),...data]}) :
        ({...acc,[id]:[...(acc[id] || []), ...data]}),{}
    )
)
.map(([id,data]) => ({id,data}));

console.log( output );
//OUTPUT: [{"id":"1","data":[1,2,3]},{"id":"4","data":[4]}]

Combining array of objects by various identifiers

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

When attempting to retrieve the innerHTML of a <div> element within a <Script> tag, the value returned is undefined

Is there a way to retrieve all active HTTP connections on my Express.js server?

Dealing with the problem of delayed image loading in AngularJS due to a setTimeout conflict

encountering a problem with retrieving the result of a DOM display

Error: Angular JS Service is undefined

Tips for implementing the same autocomplete feature across multiple form fields

Encounter an error when reading a stream with a maximum timeout value set

A step-by-step guide on how to repeatedly reload a nextJS page using recursion and display an error page once the

Detecting errors on the client side with JSON payload in Next.js and a personalized server

The error message "Google Heatmap API - visualization_impl.js:2 Uncaught (in promise) TypeError: Cannot read property 'NaN' of undefined" was encountered while using the

Storing items in localStorage in the same order they were added

Dots are used to indicate overflow of title in React Material UI CardHeader

A Guide to Filtering MongoDB Data Using Array Values

What is the best way to create a smooth transition for a bootstrap navbar in chrome, toggling from right to left on

I am having trouble deactivating an HTML button using my JavaScript function

Updating a database on ASP.NET without the need to refresh the page

Organize the HTML output generated by a PHP array

Jquery Visualization Chart not displaying

Retrieving the ID and value of a specific dropdown list using jQuery from an array of dropdown lists

When incorporating express.static(), the Express .use() callback may be triggered multiple times