Is there a way to generate a fresh array by filtering an array of objects based on a single value?

Question

Is there a way to generate a fresh array by filtering an array of objects based on a single value?

I am currently working with an array of objects:

const dummyLinkRows = [
  {
    id: 'entity:link/1:en',
    categories: [
      {
        name: 'Human Resources'
      },
      {
        name: 'Social'
      }
    ],
    name: 'Facebook',
    url: 'https://www.facebook.com'
  },
  {
    id: 'entity:link/2:en',
    categories: [
      {
        name: 'Human Resources'
      }
    ],
    name: 'Other HR',
    url: 'https://www.hr.com'
  },
  {
    id: 'entity:link/3:en',
    categories: [
      {
        name: 'Zen Mode'
      }
    ],
    name: 'Zebra',
    url: 'https://www.zebra.com'
  },
  {
    id: 'entity:link/4:en',
    categories: [
      {
        name: 'Social'
      }
    ],
    name: 'Zebra',
    url: 'https://www.instagram.com'
  },
];

I am looking to group these links/objects by category for rendering purposes.

The desired structure of the new array should be as follows:

export const NEWDummyLinkRows = [
  {
    category: { name: 'Social' },
    links: [
      {
        name: 'Facebook',
        url: 'https://www.facebook.com'
      },
      {
        name: 'Instagram',
        url: 'https://www.instagram.com'
      }
    ]
  },
  {
    category: { name: 'Human Resources' },
    links: [
      {
        name: 'Other HR',
        url: 'https://www.hr.com'
      },
      {
        name: 'Zebra HR',
        url: 'https://www.zebra.com'
      }
    ]
  },  
];

In my React render method, I have implemented the following code snippet:

        {props.rows &&
          props.rows.map((row, index) => {
           return (
            <div key={index}>
              <h4>{get(row, 'categories')[index].name}</h4>
              <ul className='link-group--list'>
                {row.categories.map((link, index) => {
                  return (
                    <li key={index}>
                      <a href={row.url}>
                        {link.name}
                      </a>
                    </li>
                  );
                })}
              </ul>
            </div>
          );
        })}

Although the current implementation renders data, it does not produce the expected output. I am seeking a solution using pure ES6/JavaScript methods.

javascript arrays ecmascript-6

Answer 1

Answer №1

To achieve the desired outcome, one approach is to first simplify the data into an object and then transform the object's entries according to your specified format:

const result = Object.entries(rows.reduce((a, {name, url, categories}) => {
  categories.forEach(c => {
    a[c.name] = a[c.name] || [];
    a[c.name].push({name, url});
  });

  return a;
}, {})).map(([name, links]) => ({ category: {name}, links }));

Complete code snippet:

const rows = [{
    id: 'entity:link/1:en',
    categories: [{
        name: 'Human Resources'
      },
      {
        name: 'Social'
      }
    ],
    name: 'Facebook',
    url: 'https://www.facebook.com'
  },
  {
    id: 'entity:link/2:en',
    categories: [{
      name: 'Human Resources'
    }],
    name: 'Other HR',
    url: 'https://www.hr.com'
  },
  {
    id: 'entity:link/3:en',
    categories: [{
      name: 'Zen Mode'
    }],
    name: 'Zebra',
    url: 'https://www.zebra.com'
  },
  {
    id: 'entity:link/4:en',
    categories: [{
      name: 'Social'
    }],
    name: 'Zebra',
    url: 'https://www.instagram.com'
  }
];

const result = Object.entries(rows.reduce((a, {name, url, categories}) => {
  categories.forEach(c => {
    a[c.name] = a[c.name] || [];
    a[c.name].push({name, url});
  });
  
  return a;
}, {})).map(([name, links]) => ({ category: {name}, links }));

console.log(result);

Answer 2

To achieve the desired outcome, one approach is to first simplify the data into an object and then transform the object's entries according to your specified format:

const result = Object.entries(rows.reduce((a, {name, url, categories}) => {
  categories.forEach(c => {
    a[c.name] = a[c.name] || [];
    a[c.name].push({name, url});
  });

  return a;
}, {})).map(([name, links]) => ({ category: {name}, links }));

Complete code snippet:

const rows = [{
    id: 'entity:link/1:en',
    categories: [{
        name: 'Human Resources'
      },
      {
        name: 'Social'
      }
    ],
    name: 'Facebook',
    url: 'https://www.facebook.com'
  },
  {
    id: 'entity:link/2:en',
    categories: [{
      name: 'Human Resources'
    }],
    name: 'Other HR',
    url: 'https://www.hr.com'
  },
  {
    id: 'entity:link/3:en',
    categories: [{
      name: 'Zen Mode'
    }],
    name: 'Zebra',
    url: 'https://www.zebra.com'
  },
  {
    id: 'entity:link/4:en',
    categories: [{
      name: 'Social'
    }],
    name: 'Zebra',
    url: 'https://www.instagram.com'
  }
];

const result = Object.entries(rows.reduce((a, {name, url, categories}) => {
  categories.forEach(c => {
    a[c.name] = a[c.name] || [];
    a[c.name].push({name, url});
  });
  
  return a;
}, {})).map(([name, links]) => ({ category: {name}, links }));

console.log(result);

Answer 3

Answer №2

One efficient way is to utilize the reduce function along with Map

const dummyLinkRows = [{id: 'entity:link/1:en',categories: [{name: 'Human Resources'},{name: 'Social'}],name: 'Facebook',url: 'https://www.facebook.com'},{id: 'entity:link/2:en',categories: [{name: 'Human Resources'
}],name: 'Other HR',url: 'https://www.hr.com'},{id: 'entity:link/3:en',categories: [{name: 'Zen Mode'}],name: 'Zebra',url: 'https://www.zebra.com'},{id: 'entity:link/4:en',categories: [{name: 'Social'}],name: 'Zebra',url: 'https://www.instagram.com'}];

const final = dummyLinkRows.reduce((op,inp) => {
  let {name: nameOuter, categories, url} = inp
  categories.forEach(({name}) => {
    if(op.has(name)){
      op.get(name).links.push({name: nameOuter, url})
    } else{
      op.set(name, {catgeory:{name}, links:[{name:nameOuter, url}] })
    }
  })
  return op
},new Map())

console.log([...final.values()])

Answer 4

One efficient way is to utilize the reduce function along with Map

const dummyLinkRows = [{id: 'entity:link/1:en',categories: [{name: 'Human Resources'},{name: 'Social'}],name: 'Facebook',url: 'https://www.facebook.com'},{id: 'entity:link/2:en',categories: [{name: 'Human Resources'
}],name: 'Other HR',url: 'https://www.hr.com'},{id: 'entity:link/3:en',categories: [{name: 'Zen Mode'}],name: 'Zebra',url: 'https://www.zebra.com'},{id: 'entity:link/4:en',categories: [{name: 'Social'}],name: 'Zebra',url: 'https://www.instagram.com'}];

const final = dummyLinkRows.reduce((op,inp) => {
  let {name: nameOuter, categories, url} = inp
  categories.forEach(({name}) => {
    if(op.has(name)){
      op.get(name).links.push({name: nameOuter, url})
    } else{
      op.set(name, {catgeory:{name}, links:[{name:nameOuter, url}] })
    }
  })
  return op
},new Map())

console.log([...final.values()])

Answer 5

Answer №3

To achieve this in a more natural way, you can follow these steps:

const data = [
  {
    id: 'entity:link/1:en',
    categories: [
      {
        name: 'Technology',
      },
      {
        name: 'Software',
      },
    ],
    title: 'Google',
    link: 'https://www.google.com',
  },
  {
    id: 'entity:link/2:en',
    categories: [
      {
        name: 'Technology',
      },
    ],
    title: 'Microsoft',
    link: 'https://www.microsoft.com',
  },
  {
    id: 'entity:link/3:en',
    categories: [
      {
        name: 'Healthcare',
      },
    ],
    title: 'Mayo Clinic',
    link: 'https://www.mayoclinic.org',
  },
];
const filteredData = [];
for (let i = 0; i < data.length; i += 1) {
  const item = data[i];
  const { categories } = item;
  if (categories && Array.isArray(categories)) {
    for (let j = 0; j < categories.length; j += 1) {
      const category = categories[j];
      const index = filteredData.findIndex((r) => { return r.category && r.category.name === category.name; });
      if (index === -1) {
        const obj = {
          category: { name: category.name },
          links: [{ title: item.title, link: item.link }],
        };
        filteredData.push(obj);
      } else {
        const obj = { title: item.title, link: item.link };
        filteredData[index].links.push(obj);
      }
    }
  }
}
console.log(filteredData);

Answer 6

To achieve this in a more natural way, you can follow these steps:

const data = [
  {
    id: 'entity:link/1:en',
    categories: [
      {
        name: 'Technology',
      },
      {
        name: 'Software',
      },
    ],
    title: 'Google',
    link: 'https://www.google.com',
  },
  {
    id: 'entity:link/2:en',
    categories: [
      {
        name: 'Technology',
      },
    ],
    title: 'Microsoft',
    link: 'https://www.microsoft.com',
  },
  {
    id: 'entity:link/3:en',
    categories: [
      {
        name: 'Healthcare',
      },
    ],
    title: 'Mayo Clinic',
    link: 'https://www.mayoclinic.org',
  },
];
const filteredData = [];
for (let i = 0; i < data.length; i += 1) {
  const item = data[i];
  const { categories } = item;
  if (categories && Array.isArray(categories)) {
    for (let j = 0; j < categories.length; j += 1) {
      const category = categories[j];
      const index = filteredData.findIndex((r) => { return r.category && r.category.name === category.name; });
      if (index === -1) {
        const obj = {
          category: { name: category.name },
          links: [{ title: item.title, link: item.link }],
        };
        filteredData.push(obj);
      } else {
        const obj = { title: item.title, link: item.link };
        filteredData[index].links.push(obj);
      }
    }
  }
}
console.log(filteredData);

Answer 7

Answer №4

I believe utilizing the reduce method is the most effective approach in this scenario. By invoking .reduce on an array and providing it with a function and an initial object, you can achieve the desired outcome. The function receives 'previous' (the previous value) and 'current' (the current array value) as parameters and returns the result. This result serves as the 'previous' for the subsequent function calls and as the final output after the last call.

Let's take one of the elements from your list:

  {
    id: 'entity:link/1:en',
    categories: [
      {
        name: 'Human Resources'
      },
      {
        name: 'Social'
      }
    ],
    name: 'Facebook',
    url: 'https://www.facebook.com'
  },

... (remaining text remains unchanged)

Answer 8

I believe utilizing the reduce method is the most effective approach in this scenario. By invoking .reduce on an array and providing it with a function and an initial object, you can achieve the desired outcome. The function receives 'previous' (the previous value) and 'current' (the current array value) as parameters and returns the result. This result serves as the 'previous' for the subsequent function calls and as the final output after the last call.

Let's take one of the elements from your list:

  {
    id: 'entity:link/1:en',
    categories: [
      {
        name: 'Human Resources'
      },
      {
        name: 'Social'
      }
    ],
    name: 'Facebook',
    url: 'https://www.facebook.com'
  },

... (remaining text remains unchanged)

Answer 9

Answer №5

Attempt (h={})

dummyLinkRows.forEach(x=> x.categories.forEach(c=> 
  h[c.name] = (h[c.name]||[]).concat([{name:x.name, url:x.url}]) ))

let NEWDummyLinkRows = Object.keys(h).map(k=> ({category:k, links: h[k]}) )

const dummyLinkRows = [
  {
    id: 'entity:link/1:en',
    categories: [
      {
        name: 'Human Resources'
      },
      {
        name: 'Social'
      }
    ],
    name: 'Facebook',
    url: 'https://www.facebook.com'
  },
  {
    id: 'entity:link/2:en',
    categories: [
      {
        name: 'Human Resources'
      }
    ],
    name: 'Other HR',
    url: 'https://www.hr.com'
  },
  {
    id: 'entity:link/3:en',
    categories: [
      {
        name: 'Zen Mode'
      }
    ],
    name: 'Zebra',
    url: 'https://www.zebra.com'
  },
  {
    id: 'entity:link/4:en',
    categories: [
      {
        name: 'Social'
      }
    ],
    name: 'Zebra',
    url: 'https://www.instagram.com'
  },
];

let h={};

dummyLinkRows.forEach(x=> x.categories.forEach(c=> 
  h[c.name]=(h[c.name]||[]).concat([{name:x.name, url:x.url}]) ) )

let NEWDummyLinkRows = Object.keys(h).map(k=> ({category:k, links: h[k]}) )

console.log(NEWDummyLinkRows);

Answer 10

Attempt (h={})

dummyLinkRows.forEach(x=> x.categories.forEach(c=> 
  h[c.name] = (h[c.name]||[]).concat([{name:x.name, url:x.url}]) ))

let NEWDummyLinkRows = Object.keys(h).map(k=> ({category:k, links: h[k]}) )

const dummyLinkRows = [
  {
    id: 'entity:link/1:en',
    categories: [
      {
        name: 'Human Resources'
      },
      {
        name: 'Social'
      }
    ],
    name: 'Facebook',
    url: 'https://www.facebook.com'
  },
  {
    id: 'entity:link/2:en',
    categories: [
      {
        name: 'Human Resources'
      }
    ],
    name: 'Other HR',
    url: 'https://www.hr.com'
  },
  {
    id: 'entity:link/3:en',
    categories: [
      {
        name: 'Zen Mode'
      }
    ],
    name: 'Zebra',
    url: 'https://www.zebra.com'
  },
  {
    id: 'entity:link/4:en',
    categories: [
      {
        name: 'Social'
      }
    ],
    name: 'Zebra',
    url: 'https://www.instagram.com'
  },
];

let h={};

dummyLinkRows.forEach(x=> x.categories.forEach(c=> 
  h[c.name]=(h[c.name]||[]).concat([{name:x.name, url:x.url}]) ) )

let NEWDummyLinkRows = Object.keys(h).map(k=> ({category:k, links: h[k]}) )

console.log(NEWDummyLinkRows);

Is there a way to generate a fresh array by filtering an array of objects based on a single value?

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

What is the best way to deduct a variable's previous value from the final value, ensuring that the total value does not surpass a specific limit?

Can you explain the concept of cross domain and how JSONP fits into the picture?

Using Vue's v-bind directive with a single set of curly braces expression

Ensuring the dropdown menu's functionality in AngularJS

Troubleshooting: Issue with incorporating libraries into my HTML code using Ionic framework and Angular

Is there a method to determine if localForage/indexedDb is currently handling data operations?

Step by step guide on inserting a message (memo/sticky note) onto an HTML page

A guide to creating a synchronous AJAX call using vanilla JavaScript

Storing user data in node.js using the express-sessionTo save user data in

Incorporating a delete button onto an image using JavaScript

How to retrieve user data based on ID using Angular SDK

Is it possible to pass a parameter to an NGXS action that is not the Payload?

Revamp your arrays with input fields in Vue3

Text displaying as actionable icons

What sets apart the `ajax:send` event from the `click` event is that it specifically triggers an ajax

"Endowed with improper dimensions, the BootStrap collapse feature

Engaging 3D Object with JavaScript Interactivity

Stop GIFs from playing automatically

Repeating every 3 to 6 months on later.js commencing from a specified date

When attempting to upload multiple images to my backend, I am consistently receiving an empty array as a result