Javascript 如何根据布尔值自动移动JSON数据

我有一个JSON文件：

 [
  {
   "id": 1,
   "color": "Blue",
   "availability": false
  },
  {
   "id": 2,
   "color": "Pink",
   "availability": true
  }
 ]

import React, { Component } from 'react';
import './styles.css'

class GetOnlinePosts extends Component {
constructor(props){
    super(props);
    this.state = {
        error : null,
        isLoaded : false,
        posts : []          
    };
}
componentDidMount(){
    fetch("https://api.myjson.com")
    .then( response => response.json())
    .then(
        (result) => {
            this.setState({
                isLoaded : true,
                posts : result
            });
        },
        (error) => {
            this.setState({
                isLoaded: true,
                error
            })
        },
    )
}
render() {
    const {error, isLoaded, posts} = this.state;
    if(error){
        return <div>Error in loading</div>
    }else if (!isLoaded) {
        return <div>Loading ...</div>
    }else{
        return(
            <div>
                <div className="tiles">
                {
                    posts.map(post => (
                        <div key={post.id}>
                            <div className="tile">
                                <p className="color">{post.color}</p>
                            </div> 
                       </div>
                      ))
                    }
                </div>
            </div>
        );
    }
  }
}

export default GetOnlinePosts;

我想要实现的是带有“availability:true”的JSON自动出现在“availability:false”的上方。因此，粉红色显示在蓝色上方，如下所示：

这是我到目前为止的代码，它只是以与JSON文件相同的顺序显示它们：

 [
  {
   "id": 1,
   "color": "Blue",
   "availability": false
  },
  {
   "id": 2,
   "color": "Pink",
   "availability": true
  }
 ]

import React, { Component } from 'react';
import './styles.css'

class GetOnlinePosts extends Component {
constructor(props){
    super(props);
    this.state = {
        error : null,
        isLoaded : false,
        posts : []          
    };
}
componentDidMount(){
    fetch("https://api.myjson.com")
    .then( response => response.json())
    .then(
        (result) => {
            this.setState({
                isLoaded : true,
                posts : result
            });
        },
        (error) => {
            this.setState({
                isLoaded: true,
                error
            })
        },
    )
}
render() {
    const {error, isLoaded, posts} = this.state;
    if(error){
        return <div>Error in loading</div>
    }else if (!isLoaded) {
        return <div>Loading ...</div>
    }else{
        return(
            <div>
                <div className="tiles">
                {
                    posts.map(post => (
                        <div key={post.id}>
                            <div className="tile">
                                <p className="color">{post.color}</p>
                            </div> 
                       </div>
                      ))
                    }
                </div>
            </div>
        );
    }
  }
}

export default GetOnlinePosts;

import React，{Component}来自'React'；
导入“./styles.css”
类GetOnlinePosts扩展组件{
建造师（道具）{
超级（道具）；
此.state={
错误：null，
isLoaded:false，
员额：[]
};
}
componentDidMount（）{
取回（“https://api.myjson.com")
.then（response=>response.json（））
.那么(
（结果）=>{
这是我的国家({
isLoaded：是的，
职位：结果
});
},
（错误）=>{
这是我的国家({
isLoaded：是的，
错误
})
},
)
}
render（）{
const{error，isLoaded，posts}=this.state；
如果（错误）{
加载时返回错误
}否则，如果（！已加载）{
返回加载。。。
}否则{
返回(
{
posts.map（post=>(
{post.color}
))
}
);
}
}
}
导出默认GetOnlinePosts；

---

我不确定如何实现这一点，目前为止，我一直在努力寻找任何建议，因此任何帮助都将是巨大的。

您可以过滤这两个集合，创建一个新数组，然后渲染它

import React, { Component } from 'react';
import './styles.css'

class GetOnlinePosts extends Component {
constructor(props){
    super(props);
    this.state = {
        error : null,
        isLoaded : false,
        posts : []          
    };
}
componentDidMount(){
    fetch("https://api.myjson.com")
    .then( response => response.json())
    .then(
        (result) => {
            this.setState({
                isLoaded : true,
                posts : result
            });
        },
        (error) => {
            this.setState({
                isLoaded: true,
                error
            })
        },
    )
}
render() {
    const {error, isLoaded, posts} = this.state;
    const orderedPosts = [...posts.filter((post) => post.availability), ...posts.filter((post) => !post.availability)]
    if(error){
        return <div>Error in loading</div>
    }else if (!isLoaded) {
        return <div>Loading ...</div>
    }else{
        return(
            <div>
                <div className="tiles">
                {
                    orderedPosts.map(post => (
                        <div key={post.id}>
                            <div className="tile">
                                <p className="color">{post.color}</p>
                            </div> 
                       </div>
                      ))
                    }
                </div>
            </div>
        );
    }
  }
}

export default GetOnlinePosts;

import React，{Component}来自'React'；
导入“./styles.css”
类GetOnlinePosts扩展组件{
建造师（道具）{
超级（道具）；
此.state={
错误：null，
isLoaded:false，
员额：[]
};
}
componentDidMount（）{
取回（“https://api.myjson.com")
.then（response=>response.json（））
.那么(
（结果）=>{
这是我的国家({
isLoaded：是的，
职位：结果
});
},
（错误）=>{
这是我的国家({
isLoaded：是的，
错误
})
},
)
}
render（）{
const{error，isLoaded，posts}=this.state；
const orderedPosts=[…posts.filter（（post）=>post.availability），…posts.filter（（post）=>！post.availability）]
如果（错误）{
加载时返回错误
}否则，如果（！已加载）{
返回加载。。。
}否则{
返回(
{
orderedPosts.map（post=>(
{post.color}
))
}
);
}
}
}
导出默认GetOnlinePosts；

var数据=[{
“id”：1，
“颜色”：“蓝色”，
“可用性”：false
},
{
“id”：2，
“颜色”：“粉色”，
“可用性”：正确
},
{
“id”：3，
“颜色”：“粉色”，
“可用性”：正确
},
{
“id”：4，
“颜色”：“粉色”，
“可用性”：false
}, {
“id”：5，
“颜色”：“粉色”，
“可用性”：正确
}
]
//无序
data.sort（val=>val.availability？-1:1）//布尔值的简单单行排序函数
控制台日志（数据）；
//根据默认数组顺序排序
数据=[{
“id”：1，
“颜色”：“蓝色”，
“可用性”：false
},
{
“id”：2，
“颜色”：“粉色”，
“可用性”：正确
},
{
“id”：3，
“颜色”：“粉色”，
“可用性”：正确
},
{
“id”：4，
“颜色”：“粉色”，
“可用性”：false
}, {
“id”：5，
“颜色”：“粉色”，
“可用性”：正确
}
]
data.sort（（a，b）=>b.availability-a.availability）；
控制台日志（数据）

.sort（）

在调用

.map（）

之前，请先在

可用性上对其进行排序，然后再调用
.map（）
也许您可以将此对象数组分为两个其他数组，一个是可用的数组，另一个是不可用的数组（使用
映射
，
过滤器
或类似的方法），然后只运行可用的数组，这样一来，“粉色”的会排在第一位。或者只是
.sort
按
可用性对数组进行排序
在从
componentDidMount
函数返回之前，您需要对数据进行排序。
[…posts]。sort（（a，b）=>b.availability-a.availability）。map（…）
这不会保持所有
true
值的相对顺序，您指的是什么，您能更具体一点吗？为每个对象提供不同的
id
。结果数组中的
true
值的顺序与原始数组中的顺序不同<代码>排序

的回调有2个参数。在这里，只考虑第一个参数，它会导致排序不一致OK，因此您希望保留正确的顺序？…如果您将对象ID设置为1到5，则

5

位于顶部（在Chrome中）。在排序的数组中应该是2-3-5，因为这就是对象在输入中的放置方式

.sort（（a，b）=>b.availability-a.availability）

将保持原始的相对顺序