如何在reactjs中获取不同级别的分层json的键[duplicate]

此问题在此处已有答案：

（31个答案）
2天前关闭。
我有一个这样的API响应-

{ 
    "Categories": {
            "Breakfast": {
              "Poha": {
                "Description": "This is item description given by restaurant owner",
                "Likes": "123",
                "Image": "image url",
                "Price": 30
              },
              "Upma": {
                "Description": "Chunks of paneer, a type of fresh cheese, are marinated in spices and are then arranged on a stick with capsicums (bell peppers), onions and tomatoes. These sticks are grilled in a tandoor and the dish is thereafter served hot, seasoned with lemon juice and chaat masala.[8] It is sometimes accompanied by salad or mint chutney. Tikka dishes traditionally go well with mint chutney. The paneer, though tender, has a crisp singe on the surface.",
                "Likes": "35",
                "Image": "image url",
                "Price": 35
              }
            },
            "Starters": {
              "Chicken Bites": {
                "Description": "This is item description given by restaurant owner",
                "Likes": "55",
                "Image": "image url",
                "Price": 90
              },
              "Gobi Tikka": {
                "Description": "This is item description given by restaurant owner",
                "Likes": "9",
                "Image": "image url",
                "Price": 50
              },
              "Mashroom Tikka ": {
                "Description": "This is item description given by restaurant owner",
                "Likes": "87",
                "Image": "image url",
                "Price": 60
              }
            },
            "Chinese": {
              "Chicken Hakka Noodles": {
                "Description": "This is item description given by restaurant owner",
                "Likes": "525",
                "Image": "image url",
                "Price": 150
              },
              "Veg Schezwan Noodles ": {
                "Description": "This is item description given by restaurant owner",
                "Likes": "39",
                "Image": "image url",
                "Price": 140
              },
              "Veg Hakka Noodles": {
                "Description": "This is item description given by restaurant owner",
                "Likes": "90",
                "Image": "image url",
                "Price": 130
              }
            },
            "Main Course": {
              "Chicken Masala": {
                "Description": "This is item description given by restaurant owner",
                "Likes": "13",
                "Image": "image url",
                "Price": 340
              },
              "Paneer Tikka": {
                "Description": "Chunks of paneer, a type of fresh cheese, are marinated in spices and are then arranged on a stick with capsicums (bell peppers), onions and tomatoes. These sticks are grilled in a tandoor and the dish is thereafter served hot, seasoned with lemon juice and chaat masala.[8] It is sometimes accompanied by salad or mint chutney. Tikka dishes traditionally go well with mint chutney. The paneer, though tender, has a crisp singe on the surface.",
                "Likes": "34",
                "Image": "image url",
                "Price": 250
              },
              "Paneer Tikka Masala": {
                "Description": "This is item description given by restaurant owner",
                "Likes": "10",
                "Image": "image url",
                "Price": 260
              }
            },
            "Ice-creams": {
              "Chocolate": {
                "Description": "This is item description given by restaurant owner",
                "Likes": "12",
                "Image": "image url",
                "Price": 100
              },
              "Vanilla": {
                "Description": "This is item description given by restaurant owner",
                "Likes": "11",
                "Image": "image url",
                "Price": 100
              },
              "Creamy Milk": {
                "Description": "This is item description given by restaurant owner",
                "Likes": "13",
                "Image": "image url",
                "Price": 100
              }
            }   },   
"Restaurant Details": {
            "Insta Profile link": "https://instaprofileurl.com",
            "Owner Contact": "+91 5007 227 997",
            "Restaurant Address": "Restaurant address",
            "Owner Name": "Mr. Owner Surname",
            "Restaurant website": "https://www.myrestaurant.com",
            "Owner Email ": "owner@gmail.com",
            "Facebook Profile link": "https://facebookprofileurl.com"   
         },   
    "rid": "unique_restaurant_name" 
    }

我如何从reactjs中的任何给定JSON级别访问任何给定键的任何值？我的实际要求是在Web UI中将所有类别显示为一个磁贴，并通过单击任何磁贴（类别例如Main Course），我需要显示Main Course的所有详细信息。

// Get all the keys for categories
const categories = Object.keys(myObject.Categories); 

// Map over the categories and pass the information to a component
// which will use that data to display information about the category
// categoryInfo - contains the object with all the meals
// categoryName - contains the name of the category (breakfast, starters, etc) 
categories.map(category => (
  <Category 
     categoryInfo={myObject.Categories[category]}
     categoryName={category} 
  />
)

// Category might have a Meal component that way you can better display the
// the information about each meal. Example:

function Category({categoryName, categoryInfo}) {
  const meals = Object.keys(categoryInfo);
  return (
     ... // stuff for category
     {meals.map(meal => 
       <Meal mealName={meal} mealInfo={categoryInfo[meal]} />
     )}
  )
}

如何在reactjs中获取不同级别的分层json的键[duplicate]

1条答案

相关问题

热门标签

最新问答