Best way to filter an array of objects by Index in JavaScript

Question

I have an array of objects like this

export const productArray = [

  { 
    imgUrl: images.beautifulinwhite,
    productName: "White Flowers",
    oldPrice: "$45.99",
    newPrice: "$35.99",
  },
  {
    imgUrl: images.blueandpinkjeans,
    productName: "Blue and Pink Jeans",
    oldPrice: "$57.99",
    newPrice: "$40.99",
  },
  {
    imgUrl: images.girlinyellow,
    productName: "Yellow Tshirt",
    oldPrice: "$53.99",
    newPrice: "$37.99",
  },
  {
    imgUrl: images.ladyinblack,
    productName: "Black Hoodie",
    oldPrice: "$40.99",
    newPrice: "$33.99",
  },
]

How do I filter this array to only get the first two objects? I don't want to filter them by their attributes. I want to filter using their indexes .

The first object in the array is: productArray[0] and the second is: productArray[1]. If you need to pull these two out into another array: [productArray[0], productArray[1]]. If you definitely need to use .filter using the index: productArray.filter((x, idx) => idx < 2); — jsN00b
– jsN00b, Commented Mar 12, 2022 at 14:50
If you just want first 2, why do any computations? just do productArray[0].smthng and productArray[1].smthng — Tushar Gupta
– Tushar Gupta, Commented Mar 12, 2022 at 14:50
To get the first few elements you can just use array.slice(0, n), where n is the number of elements you want to get — k.tten
– k.tten, Commented Mar 12, 2022 at 14:50

Sanches · Accepted Answer · 2022-03-12 15:57:22Z

2

The best way to filter the array by index is using the slice() method:

const productArrayFiltered = productArray.slice(0, 2);

From MDN:

The slice() method returns a shallow copy of a portion of an array into a new array object selected from start to end (end not included) where start and end represent the index of items in that array. The original array will not be modified.

Side note: it's important to remember that the method returns a new array that must be assigned to a new constant or variable.

answered Mar 12, 2022 at 15:57

Sanches

362 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Amos Machora Over a year ago

What does the term shallow copy mean

Sanches Over a year ago

Shallow copy is basically a term for a type of copying the data (in this case an array) in a superficial way, we also have the deep copy that will make a true copy of the data. You can read about it here...

Gabriel Arruda Over a year ago

In fact, shallow copy means that if you define a new value to productArray indexed of X, the value will also change in the productArrayFiltered. So if you do productArray[0] = 20, and console.log(productArrayFiltered[0]), the printed value will be 20.

Collectives™ on Stack Overflow

Best way to filter an array of objects by Index in JavaScript

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related