根据月份 (MERN) 对获取的 json 数据（来自 mongoDB）进行排序

Question

我想根据数据中给定的月份键更改数据的顺序。

这是我从 http://localhost:8080/api/allFests/[=16 获取的数据=]

{

"success": true,

"data": [

    

{
"festMonth": "February",
"festImage": "https://th.bing.com/th/id/OIP.q1sF3Eu_WEz8age76TeQKwHaF7?w=229&h=183&c=7&o=5&dpr=1.25&pid=1.7",
"_id": "60c5ba68161a104008fd42be",
"festTitle": "Vasant Panchami",

"__v": 0
},

{
"festMonth": "April",
"festImage": "https://th.bing.com/th/id/OIP._j1uMAIRJV0he0nkvtaQgQHaFj?w=239&h=180&c=7&o=5&dpr=1.25&pid=1.7",
"_id": "60c5bbc1161a104008fd42c0",
"festTitle": "\"Rama Navami",

"__v": 0
},

{
"festMonth": "March",
"festImage": "https://th.bing.com/th/id/OIP.r8CRWF-lF47McLatXHeb1QHaFj?w=205&h=180&c=7&o=5&dpr=1.25&pid=1.7",
"_id": "60c5bab6161a104008fd42bf",
"festTitle": "Holi",

"__v": 0
}

]

}

所以这里我有 festMonth 并且它可以有值 January,February....December.

在我的前端，我想先显示一月，然后二月......然后是十二月的数据。（即按月份排序）

到现在，在数据库中显示为： IE。先是二月卡，然后是四月卡，然后是三月卡。

这是我的获取方式：

App.js:

 const [fests,setFests]=useState([]);
  useEffect(() => {
    axios
      .get("/api/allFests")
      .then((res) => {
        setFests(res.data.data);
      })
      .catch((error) => {
        console.log(error);
      });
  }, []);

这是我在同一页面上的 return 功能：

<div className="map_main_div">


    {fests.map((item) => {
                  return (
            <div className="fest_div" key={item._id} style={{listStyle:"none"}}>

     <Card 

     className={classes.root} key={item.id}  >
                    <CardHeader
                      avatar={
                   <Avatar aria-label="recipe"                     className={classes.avatar}>
                        </Avatar>
                      }
               
                      title={item.festTitle}
                      subheader={item.festMonth}
                    />
                                    
                 
                  </Card>
                 </div>

                  );
                })}
                 </div>

这是我在 route.js 中的路线：

router.get('/allFests',async(req,res)=>{
    try{
        const allFest=await FestModel.find()
        if(allFest)
        {
            res.status(200).json({
                success:true,
                data:allFest
            })
        }
        else{
            res.status(400).json({
                success:false,
                error:"no fest found"
            })  
        }
    }
    catch(err){
        res.status(500).json({
            success: false,
            error: err.message
        })
    }
}

那么我该如何根据月份进行排序。

此外，是否可以更改 mongoDB 中的数据顺序？

Answer 1

您可以将所有月份名称存储在一个列表中，然后根据该列表进行排序。

const data = [ { "festMonth": "February", "festImage": "https://th.bing.com/th/id/OIP.q1sF3Eu_WEz8age76TeQKwHaF7?w=229&h=183&c=7&o=5&dpr=1.25&pid=1.7", "_id": "60c5ba68161a104008fd42be", "festTitle": "Vasant Panchami", "__v": 0 }, { "festMonth": "April", "festImage":
"https://th.bing.com/th/id/OIP._j1uMAIRJV0he0nkvtaQgQHaFj?w=239&h=180&c=7&o=5&dpr=1.25&pid=1.7", "_id": "60c5bbc1161a104008fd42c0", "festTitle": "\"Rama Navami", "__v": 0 }, { "festMonth": "March", "festImage": "https://th.bing.com/th/id/OIP.r8CRWF-lF47McLatXHeb1QHaFj?w=205&h=180&c=7&o=5&dpr=1.25&pid=1.7",
"_id": "60c5bab6161a104008fd42bf", "festTitle": "Holi", "__v": 0 } ],
    months = ["January", "February", "March", "April", "May", "June","July", "August", "September", "October", "November", "December"];

data.sort((a,b) => months.indexOf(a.festMonth) - months.indexOf(b.festMonth));
console.log(data);

.as-console-wrapper { max-height: 100% !important; top: 0; }

根据月份 (MERN) 对获取的 json 数据（来自 mongoDB）进行排序

Sort fetched json data(from mongoDB) according to months(MERN)

json

mongodb

node.js

reactjs

fetch-api