![](/img/trans.png)
[英]how can I get the first unique ID element and last unique ID element in an array React js
[英]How can I map and return first and last element in react?
我在登錄返回第一個元素和最后一個元素時遇到問題:
這是我的 object 數組:
0:
pointAmountMax: 99999
pointAmountMin: 1075
rateCode: ['INAINOW']
roomPoolCode: "ZZAO"
[[Prototype]]: Object
1:
pointAmountMax: 99999
pointAmountMin: 850
rateCode: ['INAINOJ']
roomPoolCode: "TOGA"
[[Prototype]]: Object
length: 2
我怎樣才能通過數組 map 並首先返回pointAmountMin
較小的數字?
所以在這種情況下,我想在我的前端實現這樣的事情
return <p>850 - 1075</p>
要首先獲得所需的 output,您需要按照與屬性 pointAmountMin 相關的升序對 object 的數組進行排序。
let arrayOfObj = [
{
pointAmountMax: 99999,
pointAmountMin: 1075,
rateCode: ['INAINOW'],
roomPoolCode: "ZZAO",
},
{
pointAmountMax: 99999,
pointAmountMin: 850,
rateCode: ['INAINOJ'],
roomPoolCode: "TOGA",
}
];
arrayOfObj.sort((a, b) => {
return a.pointAmountMin - b.pointAmountMin
})
console.log(arrayOfObj)
然后只收集數組中的 pointAmountMin 值。
const filteredResult = arrayOfObj.map(() => {
return pointAmountMin
})
您擁有按升序排列的所有 pointAmountMin 屬性值的列表(最小值在前)現在您可以在 UI 上以您需要的格式顯示它
<p>filteredResult.join(' - ')</p>
使用sort()
然后返回所需的 HTML
function App(){ const myArray = [ { pointAmountMax: 99999, pointAmountMin: 1075, somethingElse: null, }, { pointAmountMax: 99999, pointAmountMin: 650, somethingElse: null, }, { pointAmountMax: 99999, pointAmountMin: 975, somethingElse: null, } ] const getRange = (data) => { let sorted = data.sort((a,b) => {a.pointAmountMin - b.pointAmountMin}) return [ <p key={Math.random()}> {sorted[0].pointAmountMin} - {sorted.pop().pointAmountMin} </p> ] } return <span>{getRange(myArray)}</span>; } ReactDOM.render(<App/>, document.getElementById("root"));
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <div id="root"/>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.