Add values to an array using the reduce function

Question

Add values to an array using the reduce function

My array consists of multiple objects:

const items = [{ search_type: 'environment',
    search_code: 'TBA_ENVIRONMENT00002',
    asset_code: 'ASSET00002' },
  { search_type: 'job',
    search_code: 'TBA_JOB00002',
    asset_code: 'ASSET00002' },
  { search_type: 'environment',
    search_code: 'TBA_ENVIRONMENT00002',
    asset_code: 'ASSET00004' },
  { search_type: 'job',
    search_code: 'TBA_JOB00002',
    asset_code: 'ASSET00004' },
  { search_type: 'job',
    search_code: 'TBA_JOB00003',
    asset_code: 'ASSET00004' },
  { search_type: 'scene',
    search_code: 'TBA_SCENE00006',
    asset_code: 'ASSET00002' },
 ];

I wish to transform it into a structure like this:

{
ASSET00002: {
   environment:["TBA_ENVIRONMENT00002"],
   job:["TBA_JOB00002"],
   scene:["TBA_SCENE00006"]
},
ASSET00004: {
   environment:["TBA_ENVIRONMENT00002"],
   job:["TBA_JOB00002","TBA_JOB00003"]
},
}

Using the following Reduce function logic:

const result = items.reduce((acc, item) => {
  const { search_type, search_code, asset_code } = item;
  return {
    ...acc,
    [asset_code]: {
      ...acc[asset_code], [search_type]: [search_code]
    },
  };
}, {});

The outcome I'm currently getting is:

{
ASSET00002: {
   environment:["TBA_ENVIRONMENT00002"],
   job:["TBA_JOB00002"],
   scene:["TBA_SCENE00006"]
},
ASSET00004: {
   environment:["TBA_ENVIRONMENT00002"],
   job:["TBA_JOB00003"]
},
}

Based on "ASSET00004"-> "job", I expect an array with two values but only receiving one. I'm aware there may be missing elements in my code, struggling to figure out how to properly add values to the array. Appreciate any assistance provided.

javascript reduce

Answer 1

Answer №1

If you want to achieve this in a straightforward way, simply use the reduce method and ensure that you append to any existing array while looping through the objects:

const items = [{ search_type: 'environment',
    search_code: 'TBA_ENVIRONMENT00002',
    asset_code: 'ASSET00002' },
  { search_type: 'job',
    search_code: 'TBA_JOB00002',
    asset_code: 'ASSET00002' },
  { search_type: 'environment',
    search_code: 'TBA_ENVIRONMENT00002',
    asset_code: 'ASSET00004' },
  { search_type: 'job',
    search_code: 'TBA_JOB00002',
    asset_code: 'ASSET00004' },
  { search_type: 'job',
    search_code: 'TBA_JOB00003',
    asset_code: 'ASSET00004' },
  { search_type: 'scene',
    search_code: 'TBA_SCENE00006',
    asset_code: 'ASSET00002' },
 ];

const assets = items.reduce((acc, el) => {
  if (!acc[el.asset_code]) {
    acc[el.asset_code] = {};
  }
  acc[el.asset_code][el.search_type] = 
    [...acc[el.asset_code][el.search_type] || [], el.search_code];
  return acc;
}, {});

console.log(assets);

Answer 2

If you want to achieve this in a straightforward way, simply use the reduce method and ensure that you append to any existing array while looping through the objects:

const items = [{ search_type: 'environment',
    search_code: 'TBA_ENVIRONMENT00002',
    asset_code: 'ASSET00002' },
  { search_type: 'job',
    search_code: 'TBA_JOB00002',
    asset_code: 'ASSET00002' },
  { search_type: 'environment',
    search_code: 'TBA_ENVIRONMENT00002',
    asset_code: 'ASSET00004' },
  { search_type: 'job',
    search_code: 'TBA_JOB00002',
    asset_code: 'ASSET00004' },
  { search_type: 'job',
    search_code: 'TBA_JOB00003',
    asset_code: 'ASSET00004' },
  { search_type: 'scene',
    search_code: 'TBA_SCENE00006',
    asset_code: 'ASSET00002' },
 ];

const assets = items.reduce((acc, el) => {
  if (!acc[el.asset_code]) {
    acc[el.asset_code] = {};
  }
  acc[el.asset_code][el.search_type] = 
    [...acc[el.asset_code][el.search_type] || [], el.search_code];
  return acc;
}, {});

console.log(assets);

Answer 3

Answer №2

The issue arises due to the following line of code:

[asset_code]: {
 ...acc[asset_code], [search_type]: [search_code]
},

This causes the loss of context for previously stored values in the search_type array, only retaining the most recent value pushed to it.

To address this, we need to check if the array key already exists in the object. If it does not, create a new array; if it does, append the value to the existing one.

The code can be updated as follows:

const result = items.reduce((acc, item, i) => {
  const { search_type, search_code, asset_code } = item;
  return {
    ...acc,
    [asset_code]: {
      ...acc[asset_code],
      [search_type]: acc[asset_code] && acc[asset_code][search_type] ?
       acc[asset_code][search_type].concat([search_code]) : [search_code]
    }
  };
}, {});

In the revised code above, we check if the values are already present in the array and concatenate them if they exist.

Answer 4

The issue arises due to the following line of code:

[asset_code]: {
 ...acc[asset_code], [search_type]: [search_code]
},

This causes the loss of context for previously stored values in the search_type array, only retaining the most recent value pushed to it.

To address this, we need to check if the array key already exists in the object. If it does not, create a new array; if it does, append the value to the existing one.

The code can be updated as follows:

const result = items.reduce((acc, item, i) => {
  const { search_type, search_code, asset_code } = item;
  return {
    ...acc,
    [asset_code]: {
      ...acc[asset_code],
      [search_type]: acc[asset_code] && acc[asset_code][search_type] ?
       acc[asset_code][search_type].concat([search_code]) : [search_code]
    }
  };
}, {});

In the revised code above, we check if the values are already present in the array and concatenate them if they exist.

Answer 5

Answer №3

It seems like the search_type key is left untouched in your code.

Below is a method using spread operators to extend the array.

const items = [{ search_type: 'environment',
    search_code: 'TBA_ENVIRONMENT00002',
    asset_code: 'ASSET00002' },
  { search_type: 'job',
    search_code: 'TBA_JOB00002',
    asset_code: 'ASSET00002' },
  { search_type: 'environment',
    search_code: 'TBA_ENVIRONMENT00002',
    asset_code: 'ASSET00004' },
  { search_type: 'job',
    search_code: 'TBA_JOB00002',
    asset_code: 'ASSET00004' },
  { search_type: 'job',
    search_code: 'TBA_JOB00003',
    asset_code: 'ASSET00004' },
  { search_type: 'scene',
    search_code: 'TBA_SCENE00006',
    asset_code: 'ASSET00002' },
 ];
/*

{
ASSET00002: {
   environment:["TBA_ENVIRONMENT00002"],
   job:["TBA_JOB00002"],
   scene:["TBA_SCENE00006"]
},
ASSET00004: {
   environment:["TBA_ENVIRONMENT00002"],
   job:["TBA_JOB00002","TBA_JOB00003"]
},
}*/

const res = items.reduce((acc, {asset_code, search_type, search_code}) => ({
  ...acc,
  [asset_code]: {
    ...acc[asset_code],
    [search_type]: [
      // You can include new elements into the array here, but duplicates may occur
      ...(acc[asset_code] && acc[asset_code][search_type] || []),
      search_code
    ] 
  }
}), {})

console.log(res)

Answer 6

It seems like the search_type key is left untouched in your code.

Below is a method using spread operators to extend the array.

const items = [{ search_type: 'environment',
    search_code: 'TBA_ENVIRONMENT00002',
    asset_code: 'ASSET00002' },
  { search_type: 'job',
    search_code: 'TBA_JOB00002',
    asset_code: 'ASSET00002' },
  { search_type: 'environment',
    search_code: 'TBA_ENVIRONMENT00002',
    asset_code: 'ASSET00004' },
  { search_type: 'job',
    search_code: 'TBA_JOB00002',
    asset_code: 'ASSET00004' },
  { search_type: 'job',
    search_code: 'TBA_JOB00003',
    asset_code: 'ASSET00004' },
  { search_type: 'scene',
    search_code: 'TBA_SCENE00006',
    asset_code: 'ASSET00002' },
 ];
/*

{
ASSET00002: {
   environment:["TBA_ENVIRONMENT00002"],
   job:["TBA_JOB00002"],
   scene:["TBA_SCENE00006"]
},
ASSET00004: {
   environment:["TBA_ENVIRONMENT00002"],
   job:["TBA_JOB00002","TBA_JOB00003"]
},
}*/

const res = items.reduce((acc, {asset_code, search_type, search_code}) => ({
  ...acc,
  [asset_code]: {
    ...acc[asset_code],
    [search_type]: [
      // You can include new elements into the array here, but duplicates may occur
      ...(acc[asset_code] && acc[asset_code][search_type] || []),
      search_code
    ] 
  }
}), {})

console.log(res)

Answer 7

Answer №4

Using traditional JavaScript instead of ES6.

const elements = [{ elem_type: 'water',
    elem_code: 'TBA_WATER00002',
    asset_code: 'ASSET00002' },
  { elem_type: 'fire',
    elem_code: 'TBA_FIRE00002',
    asset_code: 'ASSET00002' },
  { elem_type: 'earth',
    elem_code: 'TBA_EARTH00002',
    asset_code: 'ASSET00004' },
  { elem_type: 'wind',
    elem_code: 'TBA_WIND00002',
    asset_code: 'ASSET00004' },
  { elem_type: 'fire',
    elem_code: 'TBA_FIRE00003',
    asset_code: 'ASSET00004' },
  { elem_type: 'air',
    elem_code: 'TBA_AIR00006',
    asset_code: 'ASSET00002' },
 ];


  var output = {};
   elements.forEach( function (elem) {            
      output[elem.asset_code]  = output[elem.asset_code] || {};
      if(output[elem.asset_code][elem.elem_type]){
        output[elem.asset_code][elem.elem_type].push(elem.elem_code);
      }else{
        output[elem.asset_code][elem.elem_type] = new Array(elem.elem_code)
      }
   });

   console.log(output);

Answer 8

Using traditional JavaScript instead of ES6.

const elements = [{ elem_type: 'water',
    elem_code: 'TBA_WATER00002',
    asset_code: 'ASSET00002' },
  { elem_type: 'fire',
    elem_code: 'TBA_FIRE00002',
    asset_code: 'ASSET00002' },
  { elem_type: 'earth',
    elem_code: 'TBA_EARTH00002',
    asset_code: 'ASSET00004' },
  { elem_type: 'wind',
    elem_code: 'TBA_WIND00002',
    asset_code: 'ASSET00004' },
  { elem_type: 'fire',
    elem_code: 'TBA_FIRE00003',
    asset_code: 'ASSET00004' },
  { elem_type: 'air',
    elem_code: 'TBA_AIR00006',
    asset_code: 'ASSET00002' },
 ];


  var output = {};
   elements.forEach( function (elem) {            
      output[elem.asset_code]  = output[elem.asset_code] || {};
      if(output[elem.asset_code][elem.elem_type]){
        output[elem.asset_code][elem.elem_type].push(elem.elem_code);
      }else{
        output[elem.asset_code][elem.elem_type] = new Array(elem.elem_code)
      }
   });

   console.log(output);

Add values to an array using the reduce function

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Animate an image to the right when clicked, then return it to the left with a second click

Parameterized function call on click event

Is it possible to pass the chart type as a property when using vue-chart.js?

Why does the header still show content-type as text/plain even after being set to application/json?

Error: Cannot execute 'x' as a function

generate an array composed of promises to be used with Promise.all

React and Rails are not playing nice when it comes to AJAX POST requests - all

What is the best way to implement a CSS transition for styles that are dynamically created by React?

Using JQuery to Iterate Through All Form Inputs

How can the Flickr API be utilized with JavaScript functions?

Incorporate a genre twist in animated films

Construct object in JavaScript recursively

create a JavaScript array variable for posting items

Utilize JavaScript to extract content from a text file and showcase it in a Bootstrap modal pop-up through knockout binding

What is the best way to send an array to an ejs template within an express application?

Unable to hide the mobile menu button

I noticed that while my shareService is effectively sending values in Angular 2, I encounter an issue where my other components are displaying default values instead

Is onMouseLeave failing to trigger upon exiting an element?

Determine the presence of a JSON Value/Array in a web application using JavaScript and visualize the information in a dynamic

Issue an alert and refresh the webpage when a file extension upload script is detected