What could be causing the data in getServerSideProps to be altered?

Question

What could be causing the data in getServerSideProps to be altered?

After fetching data from an API and passing it to index.js using getServerSideProps, I noticed that the prop array is initially in order by rank [1, 2, 3, etc].

Here's an example of the data:

[
 {rank: 1, price: 123},
 {rank: 2, price: 1958},
 {rank: 3, price: 56}
]

However, when I manipulate this data into a different variable like so:

const topPrice = data
    .sort((a, b) => a.price < b.price ? 1 : -1)
    .slice(0, 3);

The console log now shows that the original `data` is also sorted by price, even though I only intended for `topPrice` to be sorted. Why is this happening?

javascript next.js

Answer 1

Answer №1

sort function changes the original list data. To prevent this, it is recommended to make a copy of your list before using the sort method

const data = [{
    rank: 1,
    price: 123
  },
  {
    rank: 2,
    price: 1958
  },
  {
    rank: 3,
    price: 56
  }
]

const topPrice = [...data]
  .sort((a, b) => a.price < b.price ? 1 : -1).slice(0, 3);

console.log({
  data,
  topPrice
})

If you find it helpful, you can define a new variable to store the copied array

const data = [{
    rank: 1,
    price: 123
  },
  {
    rank: 2,
    price: 1958
  },
  {
    rank: 3,
    price: 56
  }
]

const copiedData = [...data]
const topPrice = copiedData
  .sort((a, b) => a.price < b.price ? 1 : -1).slice(0, 3);

console.log({
  data,
  topPrice
})

Answer 2

sort function changes the original list data. To prevent this, it is recommended to make a copy of your list before using the sort method

const data = [{
    rank: 1,
    price: 123
  },
  {
    rank: 2,
    price: 1958
  },
  {
    rank: 3,
    price: 56
  }
]

const topPrice = [...data]
  .sort((a, b) => a.price < b.price ? 1 : -1).slice(0, 3);

console.log({
  data,
  topPrice
})

If you find it helpful, you can define a new variable to store the copied array

const data = [{
    rank: 1,
    price: 123
  },
  {
    rank: 2,
    price: 1958
  },
  {
    rank: 3,
    price: 56
  }
]

const copiedData = [...data]
const topPrice = copiedData
  .sort((a, b) => a.price < b.price ? 1 : -1).slice(0, 3);

console.log({
  data,
  topPrice
})

What could be causing the data in getServerSideProps to be altered?

Answer №1

Similar questions

What is the best way to incorporate an AJAX GET request into an HTML element?

Ways to generate multiple void components side by side using React

A demonstration of VueJS Nested Builder functionality

JQuery requests functioning flawlessly on one system while encountering issues on other systems

Are there options available in nightwatchjs for making intricate decisions with selectors?

Can you provide guidance on utilizing OneNote JavaScript APIs to interpret indented paragraphs within OneNote?

Sometimes, React doesn't cooperate properly in the callback function of a setState operation

Manipulate the value of the <input> element when focused through JavaScript

A guide to efficiently fetch JSON data synchronously using AngularJS

My type is slipping away with Typescript and text conversion to lowercase

Here's a method to extract dates from today to the next 15 days and exclude weekends -Saturday and Sunday

Node.js application - varying NODE_ENV upon NPM launch

I am unable to loop through and display the buttons

Using JavaScript to send formatted text through POST requests in a Rails application

NodeJS server connection delay

Recreating dropdown menus using jQuery Clone

Seeking guidance on how to retrieve an image from Firebase storage using NextJs. Any suggestions on how to tackle this issue

Problems with radio button serialization in jQuery form plugin

The scroll header remains fixed in size despite being responsive

Troubleshooting Chakra UI problems within a pre-existing Nextjs and Redux Toolkit application