如何按年龄值对该数组进行排序？

Question

我现在正在学习，从 reactjs 和所有这些开始，我必须使用 API 制作一个基于权力游戏的网页，我收到 api 数据，我可以在屏幕上打印 img、姓名和年龄字符，但我需要按年龄对它们进行排序。

componentDidMount() {

    fetch('https://api.got.show/api/show/characters/')
        .then(res => res.json())
        .then(json => {
            this.setState({
                items: json,
            })
        }).catch((err) => {
            console.log(err);
        });

}



render() {

    const {items} = this.state;
    

    return (
        <div className="App">
            <ul>
                {items.filter(item=> item.age && item.age.age).map(item => (
                    <li key={item.id}>
                    <img src={item.image} alt="personajes" ></img>  Name: {item.name} | age: {item.age.age}
                    </li>
                ))}
            </ul>
        </div>
    );

}

}

导出默认应用；

这是我到现在得到的，我做了过滤器，因为有些角色不知道年龄，好吧，我想我必须使用排序，比如

items.sort((a,b) => a.item.age.age - b.item.age.age)

json 项目示例：

0   
titles  […]
origin  […]
siblings    […]
spouse  […]
lovers  []
plod    0
longevity   []
plodB   0
plodC   0
longevityB  []
longevityC  []
culture […]
religion    […]
allegiances […]
seasons []
appearances […]
_id "5cc0757c04e71a0010b86ac3"
name    "Eddard Stark"
slug    "Eddard_Stark"
image   "https://vignette.wikia.n…wn/323?cb=20160730050722"
gender  "male"
alive   false
death   298
father  "Rickard Stark"
house   "House Stark"
first_seen  "Winter Is Coming\""
actor   "Sean Bean"
related […]
createdAt   "2019-04-24T14:41:00.761Z"
updatedAt   "2019-04-24T14:41:00.761Z"
__v 0
pagerank    {…}
age :
name    "Eddard Stark"
age 60
id  "5cc0757c04e71a0010b86ac3"

但是我知道我必须如何在我的代码中准确地编写它并使其工作，我还必须制作一个按钮，我可以在其中从次要到主要以及反向订购，如果你能帮助我，非常感谢，我昨天一整天都在用这个，抱歉英语不是很完美，希望你能理解一切：P

Answer 1

Here you can find more information regarding sorting arrays in javascript.

你可以链一些数组操作，比如排序和过滤，所以解决方法是先过滤掉没有年龄的字符，然后对结果进行排序：

characters.filter(character => character.age).sort(compareFunction);

然后可以在 JSX 中使用它来按顺序显示没有年龄的字符：

return (
  <div className="App">
    <ul>
      {items
        .filter(item => item.age && item.age.age)
        .sort((prev, next) => prev.age - next.age)
        .map(item => (
          <li key={item.id}>
            <img src={item.image} alt="personajes" ></img>  Name: {item.name} | age: {item.age.age}
          </li>
        ))}
    </ul>
  </div>
);

这是一个删除没有年龄的字符并按升序和降序排列年龄的工作示例：

function displayList(list) {
  let html = '';
  for (const person of list) {
    html += `<li>${person.name}: ${person.age || "?"}</li>`;
  }
  document.getElementById('age-list').innerHTML = html;
}

const ageList = [{
    name: "John",
    age: 12
  },
  {
    name: "Tim"
  },
  {
    name: "Steven",
    age: 40
  },
  {
    name: "Marie",
    age: 50
  },
  {
    name: "Amy"
  },
  {
    name: "Sheldon",
    age: 5
  },
  {
    name: "Charlotte",
    age: 25
  }
];

displayList(ageList);

document.getElementById('asc').onclick = () => {
  const ascList = ageList.filter(item=> item.age).sort((prev, next) => {
    return prev.age - next.age;
  });
  displayList(ascList);
}

document.getElementById('desc').onclick = () => {
  const ascList = ageList.filter(item=> item.age).sort((prev, next) => {
    return next.age - prev.age;

  });
  displayList(ascList);
}

<button id="asc">Ascending</button>
<button id="desc">Descending</button>
<ul id="age-list"></ul>

当然，您必须使数据集和函数适应您自己的数据集，以便它为您工作。