今勉強していて、reactjsなどから始めて、APIを使用してゲームオブスローンズに基づいたWebページを作成する必要があります。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
ここでは、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>もちろん、データセットと関数を自分のデータセットに適合させる必要があります。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加