时间戳

首页 > 解决方案 > 如何在点击时对 JSON 数组进行排序？

arrays - 如何在点击时对 JSON 数组进行排序？

问题描述

我正在尝试做一个按名称和年份对 JSON 数组进行排序的按钮。我这样做了，它按年正确排序结果，但我愿意在点击时更改顺序。另外，我希望可以选择按名称对结果进行排序。

const showResults = movies
.sort((a, b) => (a.Year < b.Year ? -1 : 1))
.map((movie, idx) => {
return (
  <div key={idx}>
    <div>
      <h4>{movie.Year}</h4>
      <h3>{movie.Title}</h3>
    </div>
  </div>
)

我也试过这个，然后点击里面调用它：

const sortResults = movies.sort((a, b) => (a.Year < b.Year ? 1 : -1));

<button onClick={sortResults}>Sort results</button>

编辑：

找到了这个解决方案。它部分有效，但它不完全是我正在寻找的。

首先我做了新的状态钩子：

const [sortResults, setSortResults] = useState('');

选择下拉列表的处理程序：

const sortHandler = (e) => {
  setSortResults(e.target.value);
}

然后我在里面写了新的排序方法showResults。前两部按年份排序电影，后两部按标题排序：

const showResults = movies
.sort((a, b) => {
  if (sortResults === 'newest') {
    return (a.Year > b.Year) ? -1 : 1;
  }
  if (sortResults === 'oldest') {
    return (a.Year > b.Year) ? 1 : -1;
  }
  if (sortResults === 'az') {
    return (a.Title > b.Title);
  }
  if (sortResults === 'za') {
    return (a.Title < b.Title);
  }
  return 0;
}

...

)

然后我select为两个排序选项创建了下拉列表：

<select onChange={sortHandler} defaultValue='none'>
  <option disabled value='none'>Sort</option>
  <option value='oldest'>Oldest</option>
  <option value='newest'>Newest</option>
</select>

<select onChange={sortHandler} defaultValue='none'>
  <option disabled value='none'>Sort</option>
  <option value='az'>A-Z</option>
  <option value='za'>Z-A</option>
</select>

我想将这些select下拉菜单交换为按钮并通过单击相同的按钮来更改顺序。示例：我单击年份按钮，订单更改为最新 -> 最旧，我再次单击按钮，订单更改回最旧 -> 最新。怎么做？

编辑2：

我试图以sortHandler这种方式进行修改。当我第一次单击按钮时，值更改为'old'但之后该值不再更改..

const sortHandler = (e) => {
  setSortResults(e.target.value);
  if (e.target.value === '') {
    setSortResults('old');
  }
  else if (e.target.value === 'old') {
    setSortResults('new');
  }
}

这是按钮的代码：

<button value='' onClick={sortHandler}>
  Sort
</button>

标签： arraysreactjsjsonsorting

解决方案

注意：您遇到的问题似乎与数据的排序有关，而不是使用 React 显示数据，下面的解决方案仅实现了排序功能。在不知道之前的 React 代码的情况下，我不知道数据是如何定义的，所以我假设一个简单的变量，如果您使用useState钩子，则需要根据您的useState函数更新值。

下面是解决方案，onclick需要设置为函数而不是变量。sortOnClick()单击按钮时会调用此解决方案。sortOnClick()然后确定我们是否按标题排序，可以根据需要设置此值，即 html 中的下拉列表，然后使用已定义的可重用排序函数之一。该函数将电影的值记录到控制台中。

javascript index.js

let movies = [
    {
        year : 1998,
        title : 'A movie'
    },
    {
        year : 2011,
        title : 'Captian America'
    },
    {
        year : 2005,
        title : 'Toy Story 2'
    },
    {
        year : 2006,
        title : 'B movie'
    }
]

function sortByTitle(a, b){
    var uppercase_a = a.title.toUpperCase();
    var uppercase_b = b.title.toUpperCase();
    return (uppercase_a > uppercase_b)? 1 : -1
}

function sortByYear(a,b){
    return (a.year > b.year)? 1: -1
}

function sortOnClick(){
    let title = true;
    
    if(title){
        movies = movies.sort((a,b) => sortByTitle(a,b))
    }
    else{
        movies = movies.sort((a,b) => sortByYear(a,b))
    }
    console.log(movies)
}

html index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="./index.js"></script>
    <button onclick="sortOnClick()">Sort</button>
</body>
</html>

我希望这有帮助。

推荐阅读