[英]Render element based on key value from JSON
Let's say I have json file,假设我有 json 文件,
[
{"page":"about","title":"About","order":"0"},
{"page":"another-test","title":"Another Test"},
{"page":"how-to","title":"How To","order":"1"},
{"page":"test-page","title":"Test page","order":"2"}
]
Here, you see a key order
, when I map this json file, I want to render the one with less order
value first.在这里,您看到一个关键
order
,当我 map 这个 json 文件时,我想先渲染order
值较小的那个。 For example,例如,
import myJSON from 'file.json'
....
myJSON.map(({ page, title }) => (
<h1 key={page}>{title}</h1>
))
....
How can I use the order
key and render the one with the less order
value or ascending order?如何使用
order
键并呈现具有较少order
值或升序的键?
You could sort them based on order.您可以根据顺序对它们进行排序。
myJSON.sort((a, b) => parseInt(a.order) - parseInt(b.order))
myJSON.map(({ page, title }) => (
<h1 key={page}>{title}</h1>
))
Rahul's solution has a flaw. Rahul 的解决方案存在缺陷。 Any orthodox solution to this will have this same flaw.
对此的任何正统解决方案都会有同样的缺陷。
What if the "order" property is undefined as it is in record 2 in myJSON?如果“order”属性未定义,因为它在 myJSON 的记录 2 中?
{"page":"another-test","title":"Another Test"}
Then this approach will default to the 0 case (equal values).然后这种方法将默认为 0 情况(相等的值)。 It will think the undefined value and the value it is comparing it to are equal.
它会认为未定义的值和它正在比较的值是相等的。
Here is an example:这是一个例子:
let myJSON = [
{"page":"about","title":"About","order":"100"},
{"page":"another-test","title":"Another Test"},
{"page":"how-to","title":"How To","order":"50"},
{"page":"test-page","title":"Test page","order":"10"}
]
function myCompareFunc( a, b ) {
// if a.order or b.order is undefined this is false
if ( a.order < b.order ){
return -1;
}
// if a.order or b.order is undefined this is false
if ( a.order > b.order ){
return 1;
}
// will default to this
return 0;
}
myJSON.sort(myCompareFunc);
The records that are before the record with the undefined "order" prop will not be sorted against the records that are after.带有未定义“order”属性的记录之前的记录将不会根据之后的记录进行排序。 So record 1 and 2 in the json above will keep their places and only record 3 and 4 will be sorted properly against each other and will switch places.
因此,上面 json 中的记录 1 和 2 将保留它们的位置,只有记录 3 和 4 将相互正确排序并交换位置。 Result will be:
结果将是:
{"page":"about","title":"About","order":"100"},
{"page":"another-test","title":"Another Test"},
{"page":"test-page","title":"Test page","order":"10"},
{"page":"how-to","title":"How To","order":"50"}
That is not quite sorter is it?那不完全是分拣机吗?
How to fix it?如何解决? One way is to add this at the start of the compare function:
一种方法是在比较 function 开始时添加:
if ( !a.order ){
return -1;
}
That will sort all records with undefined "order" prop to the beginning of the array and will not meddle with the records that have a defined "order" prop.这会将所有具有未定义“order”属性的记录排序到数组的开头,并且不会干扰具有已定义“order”属性的记录。
That structure could be optimised for quicker access.可以优化该结构以更快地访问。
I'd try to denormalise it a bit and create something like the below example.我会尝试对其进行非规范化并创建类似于以下示例的内容。 This enables you to use
Object.keys()
to quickly get all the page ids.这使您可以使用
Object.keys()
快速获取所有页面 id。
pageData.json pageData.json
{
"about": {
"id": "about",
"title": "About",
"order":100
},
"another-test": {
"id": "another-test",
"title": "Another Test"
}
}
The solution to the inital query of finding out which pages had order would be找出哪些页面有顺序的初始查询的解决方案是
import pageData from '...'
const pageKeys = Object.keys(pageData);
const pagesThatHaveOrder = pageKeys.filter(key => !pageData[key].order)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.