javascript - 如何根据 bool 值自动移动 JSON 数据

Question

这个问题已经有答案了:

How to sort array of objects based on a boolean property? (2 个回答)

Javascript sort array of objects by a boolean property (14 个回答)

已关闭 3 年前。

我有一个 JSON 文件:

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

我想要实现的是带有“availability : true”的 JSON 自动出现在“availability : false”上方。这样粉色就会出现在蓝色上方，如下所示:

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

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;

我不确定如何实现这一目标，并且到目前为止一直在努力寻找任何建议，因此任何帮助都会很棒。

Answer 1

var data = [{
    "id": 1,
    "color": "Blue",
    "availability": false
  },
  {
    "id": 2,
    "color": "Pink",
    "availability": true
  },
  {
    "id": 3,
    "color": "Pink",
    "availability": true
  },
  {
    "id": 4,
    "color": "Pink",
    "availability": false
  }, {
    "id": 5,
    "color": "Pink",
    "availability": true
  }
]
//unordered
data.sort(val => val.availability ? -1 : 1) //simple one line sort function for boolean
console.log(data);

// ordered based on your default array order
data = [{
    "id": 1,
    "color": "Blue",
    "availability": false
  },
  {
    "id": 2,
    "color": "Pink",
    "availability": true
  },
  {
    "id": 3,
    "color": "Pink",
    "availability": true
  },
  {
    "id": 4,
    "color": "Pink",
    "availability": false
  }, {
    "id": 5,
    "color": "Pink",
    "availability": true
  }
]

data.sort((a, b) => b.availability - a.availability);
console.log(data);