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

Vanilla JavaScript Troubleshooting: Top Scroll Button Issue

CSS Class Returns to Inactive State

Why are my Bootstrap nav-tabs not showing tab-content in MVC?

Encountered an unexpected token '{' error in Discord.js and Node.js integration

The express post request body fails to appear, rendering it empty

When a change occurs in the <input/> element within a <div>, the onChange event in React will be triggered

What is causing the issue of subdomains not functioning properly in express.js?

When using Selenium WebDriver, the WebElement .findElement method can sometimes cause errors in JavaScript

A guide to implementing X-Frame-Options in an express.js web application using node.js

The concept of undefined functions and the use of dependency injection may not always align

Issue encountered while attempting to retrieve data from a local json file due to Cross-Origin Resource Sharing

"Step-by-step guide on associating JSON data with <li> elements using AngularJS

The EJS view fails to render when called using the fetch API

Guide on navigating an array of objects using the provided keys as a starting point in Javascript/Typescript

Creating an Angular table using reactive forms: a step-by-step guide

What is the process for using javascript to upload multiple files?

Angular 2/webpack error: Unable to find require reference

typescript loop with a callback function executed at the conclusion

Establishing the folder organization for Express Handlebars

MongoDB failing to enforce unique constraints on partial indexes