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

Exploring, navigating, and cycling through JSON in Node.js

Creating immersive visualizations using Three.js and WebGL, as well as leveraging 2D canvas for rendering graphics, involves passing the getImageData

Python string manipulation to create a list from text

How can I deactivate the main color of the FormLabel when the focus is on the radio button group?

The jQuery autocomplete feature presents all choices regardless of what is typed into the input field

Clicking on the parent div with a Jquery onclick event does not trigger when the child image is clicked

What is the best way to implement sorting in a table using react virtualized?

MySQL field being updated upon page unload

What is the best method for converting Unix time to a readable date

Troubleshooting steps for resolving a node.js error during execution

Uncovering hidden links in a menu with Python Selenium and JavaScript

Display the flowplayer div when the anchor is clicked

Trouble encountered in PHP: Generating a file from POST data and initiating download prompt for the user not functioning as intended

Submitting information retrieved through an AJAX request to a MySQL database using PHP

What is preventing me from returning the result of $.ajax, but I can return the result of $http.post?

Show picture in web browser without the file extension

Advantages and disadvantages of distinct methods for looping through HTML elements

What is the reason for the unique behavior of v-bind with boolean attributes? More specifically, why is the number 0 considered truthy in

I have a large array with multiple elements that I need to search through a file. I want to only print out the array elements that are not already present in the file, ensuring that there are

Manipulating data with Entity Framework using Knockout and AngularJS