Question

我构建了一个Food-App，该应用每天显示不同的菜单。我使用Axion访问本地JSON数据，并尝试使用.filter过滤映射菜单。我的问题是我无法过滤特定的日子。

我试图将JSON数据重新排列为与当前日期匹配的名称，但这不是解决方案。

Json数据如下所示：

[
  {
    "Weekday": "Monday",
    "Dishes": [
      { "Name": "Vegtables", "Price": "2,80 €" },
      { "Name": "Schnitzel and French Fries", "Price": "3,30 €" },
      { "Name": "Pasta", "Price": "3,00 €" },
      { "Name": "Strawberry Juice", "Price": "0,95 €" }
    ]
  },

  {
    "Weekday": "Tuesday",
    "Dishes": [
      { "Name": "Salad", "Price": "n.A." },
      { "Name": "Vegetables", "Price": "2,60 €" },
      { "Name": "Mozzarella-Pizza", "Price": "2,00 €" },
      ]
  },
] and so on...

我的映射和过滤器算法如下：

    class Menu extends Component{
        constructor(){
            super()
            this.state={
                foodData: [],
                weekday: "Friday",
             }
        } 

    render(){

     const todaysfood= 
        this.state.foodData.map(({ Day, Dish}, index) => {
          return (
             <div key={index}>
             <h2 className="day" >{Day}</h2>
             {Dish.map((Dish, index2) => {
                return ( 
                   <li key={index2} className="Menu">
                    {Dish.Name} {Dish.Price}
                   </li>
                );
             })}
             </div>
           );
        }) 

     const todaysMenu= todaysfood.filter((Day)=>{
           return (Day["Gerichte"] === this.currentWeekday)
           })

      return (
            <label>
                {todaysMenu}
         </label>

       )
     }

}

因此，它总是打印出整个星期菜单，而不是白天菜单。

Answer 1

render(){
   const { foodData, weekday} = this.state
     const todaysfood= foodData.filter(e => e.Weekday === weekday).map(({ Day, Dish}, index) => {
          return (
             <div key={index}>
             <h2 className="day" >{Day}</h2>
             {Dish.map((Dish, index2) => {
                return ( 
                   <li key={index2} className="Menu">
                    {Dish.Name} {Dish.Price}
                   </li>
                );
             })}
             </div>
           );
        }) 

      return (
            <label>
                {todaysfood}
         </label>

       )
     }

Answer 2

您不需要过滤器，可以使用Array.prototype.find来获取当天的菜单。

class Menu extends Component {
  constructor() {
    super()
    this.state = {
      foodData: [],
      weekday: "Friday",
    }
  }

  render() {

    const { Dishes } =
      this.state.foodData.find(({ Weekday }) => Weekday === this.state.currentWeekday) || {};

    return (
      <label>
        <div>
          <h2 className="day" >{Day}</h2>
          {Dishes.map((Dish, index) => {
            return (
              <li key={index} className="Menu">
                {Dish.Name} {Dish.Price}
              </li>
            );
          })}
        </div>
      </label>

    )
  }

}

Answer 3

您正在todaysfood中进行的操作是映射整个数据。这将返回原始数据的整个数组，您不必使用map，也不需要过滤器。

@ eramit2010的答案是正确的。

Answer 4

这是一些细节的答案。我将json数据保存为单独的文件。

这是我的json文件。文件名为MenuList.js

  const menuItems = [
      {
        "Weekday": "Monday",
        "Dishes": [
          { "Name": "Vegtables", "Price": "2,80 €" },
          { "Name": "Schnitzel and French Fries", "Price": "3,30 €" },
          { "Name": "Pasta", "Price": "3,00 €" },
          { "Name": "Strawberry Juice", "Price": "0,95 €" }
        ]
      },

      {
        "Weekday": "Tuesday",
        "Dishes": [
          { "Name": "Salad", "Price": "n.A." },
          { "Name": "Vegetables", "Price": "2,60 €" },
          { "Name": "Mozzarella-Pizza", "Price": "2,00 €" },
          ]
      },
    ] 
export default menuItems;

然后，这是我的App.js文件。

import React,{Component} from 'react';
import menuList from './MenuList'

export default class Menu extends Component {
    constructor() {
      super()
      this.state = {
        foodData: menuList,
        weekday: "Monday",
      }
    }

    render() {
      const { Dishes,Weekday } =
        this.state.foodData.find(({ Weekday }) => Weekday === this.state.weekday) || {};
        console.log('fooddataa', Dishes)
      return (
        <label>
          <div>
            <h2 className="day" >{Weekday}</h2>
            {Dishes.map((Dish, index) => {
              return (
                <li key={index} className="Menu">
                  {Dish.Name} {Dish.Price}
                </li>
              );
            })}
          </div>
        </label>
      )
    }
  }

如何过滤JSON数据以指定特定日期

4 个答案: