Retrieve elements from an array based on the value of an object

Question

Retrieve elements from an array based on the value of an object

I have a list of items that resembles the following structure:

var entries = [
  { sys: {id:"1"}, fields: "article1" },
  { sys: {id:"2"}, fields: "place1" },
  { sys: {id:"3"}, fields: "offer2" },
  { sys: {id:"1"}, fields: "article2" },
  { sys: {id:"1"}, fields: "article3" },
  { sys: {id:"3"}, fields: "offer2" },
  { sys: {id:"2"}, fields: "place2" }
];

My goal is to divide this set into 3 separate arrays based on their sys.id values. The desired output should be as follows:

var articles = [
  { sys: {id:"1"}, fields: "article1" },
  { sys: {id:"1"}, fields: "article2" },
  { sys: {id:"1"}, fields: "article3" }
];

var places = [
  { sys: {id:"2"}, fields: "place1" },
  { sys: {id:"2"}, fields: "place2" }
];

var offers = [
  { sys: {id:"3"}, fields: "offer2" },
  { sys: {id:"3"}, fields: "offer2" }
];

I've managed to achieve this by using a for loop, like so:

var places = [], offers = [], articles = [];

for (i=0; i<entries.length; i++) {
  if (entries[i].sys.id === "1") results.articles.push(entries[i]);
  else if (entries[i].sys.id === "2") results.places.push(entries[i]);
  else if (entries[i].sys.id === "3") results.offers.push(entries[i]);
}

However, considering that the initial dataset will be larger and more complex, I wonder if there is a more efficient method than using a basic for loop. Is there a faster and more optimal approach?

javascript arrays json object for-loop

Answer 1

Answer №1

Here's a handy, reusable function that works well with [].filter():

function findById(obj){ return obj.searchId===this;}

var locations = entries.filter(findById, 1), 
 deals = entries.filter(findById, 2), 
 stories = entries.filter(findById, 3);

This function streamlines the code needed to iterate through specific cases compared to using traditional for-loops.

To further simplify and target individual cases, you can wrap it in another succinct function:

 function filterById(n){
    return entries.filter(function findById(obj){ 
      return obj.searchId===this;
    }, n);
 }

 var locations = filterById(1), 
 deals = filterById(2), 
 stories = filterById(3);

I used === to ensure strict equality checking between numbers and strings, but if desired, you can add "use strict" and change == to === within the filter() callback function.

Answer 2

Here's a handy, reusable function that works well with [].filter():

function findById(obj){ return obj.searchId===this;}

var locations = entries.filter(findById, 1), 
 deals = entries.filter(findById, 2), 
 stories = entries.filter(findById, 3);

This function streamlines the code needed to iterate through specific cases compared to using traditional for-loops.

To further simplify and target individual cases, you can wrap it in another succinct function:

 function filterById(n){
    return entries.filter(function findById(obj){ 
      return obj.searchId===this;
    }, n);
 }

 var locations = filterById(1), 
 deals = filterById(2), 
 stories = filterById(3);

I used === to ensure strict equality checking between numbers and strings, but if desired, you can add "use strict" and change == to === within the filter() callback function.

Answer 3

Answer №2

To make it easier, you can use the filter method like this:

 entries.filter((item) => item.id === 1)

Answer 4

To make it easier, you can use the filter method like this:

 entries.filter((item) => item.id === 1)

Answer 5

Answer №3

This is the way I approach it

const mapping = [
    ["1", "books"],
    ["2", "music"],
    ["3", "movies"]
].reduce((acc, pair) => {
    acc[pair[0]] = pair[1];
    return acc;
}, {});

const dataEntries = [
  { sys: {id:"1"}, fields: "book1" },
  { sys: {id:"2"}, fields: "song1" },
  { sys: {id:"3"}, fields: "movie2" },
  { sys: {id:"1"}, fields: "book2" },
  { sys: {id:"1"}, fields: "book3" },
  { sys: {id:"3"}, fields: "movie2" },
  { sys: {id:"2"}, fields: "music2" }
];

// Both the mapping and entries can be sourced from a dataset
// This allows for various sys.id values

// The hash will contain the final result
const resultHash = dataEntries.reduce((acc, item) => {
   const key = mapping[item.sys.id];
   acc[key] = acc[key] || [];
   acc[key].push(item);
   return acc;
}, {});

Answer 6

This is the way I approach it

const mapping = [
    ["1", "books"],
    ["2", "music"],
    ["3", "movies"]
].reduce((acc, pair) => {
    acc[pair[0]] = pair[1];
    return acc;
}, {});

const dataEntries = [
  { sys: {id:"1"}, fields: "book1" },
  { sys: {id:"2"}, fields: "song1" },
  { sys: {id:"3"}, fields: "movie2" },
  { sys: {id:"1"}, fields: "book2" },
  { sys: {id:"1"}, fields: "book3" },
  { sys: {id:"3"}, fields: "movie2" },
  { sys: {id:"2"}, fields: "music2" }
];

// Both the mapping and entries can be sourced from a dataset
// This allows for various sys.id values

// The hash will contain the final result
const resultHash = dataEntries.reduce((acc, item) => {
   const key = mapping[item.sys.id];
   acc[key] = acc[key] || [];
   acc[key].push(item);
   return acc;
}, {});

Retrieve elements from an array based on the value of an object

Answer №1

Answer №2

Answer №3

Similar questions

When using RS256 with JWT, the private key will not be accepted

Preserving the background image on an html canvas along with the drawing on the canvas

Pug does not have access to computed properties within the dynamic class attribute of a Vue component

Unpacking confidential data

The requested module cannot be located, were you referring to "js" instead?

I'm having trouble getting FlowType.js to function properly

I'm having trouble understanding why I can't access the properties of a class within a function that has been passed to an Angular

Removing the previous value in React by shifting the cursor position - a step-by-step guide

Extracting date information from an HTML table for use in Highcharts

The usage of $('').switchClass in IE8 may cause an error when the switched class includes a color property

Error: The function you are trying to reference is undefined

While the data from Angular $resource can be viewed, it is not accessible in the code

Ensure that JavaScript functions are executed sequentially without overlapping

Using PHP variables in JavaScript is not compatible

In JavaScript, is it possible to dynamically alter and showcase the value of a select tag?

The issue with viewing next/image properly only occurs on desktops using a responsive layout. I would like for the image

Retrieving the JSON data from an API using Laravel

Steps for initiating a $.ajax POST request from a client to a server

Proper method for executing a synchronous AJAX POST request and subsequently submitting a form

Refresh a row in real-time by utilizing a modal with JavaScript or jQuery