遍历嵌套字典以显示多个表答案

【问题标题】：Iterating through nested dict to display multiple tables遍历嵌套字典以显示多个表
【发布时间】：2018-12-25 18:42:23
【问题描述】：

我对反应和试图理解它有点陌生。我有我的props.items 作为以下字典，我设法通过 API 获取它

[  
   {  
      "categories":[  
         {  
            "name":"Hot Drinks",
            "menu_items":[  
               {  
                  "name":"Regular Coffee",
                  "__typename":"MenuItem"
               }
            ],
            "__typename":"Category"
         },
         {  
            "name":"Salads",
            "menu_items":[  
               {  
                  "name":"Caesar Salad",
                  "__typename":"MenuItem"
               },
               {  
                  "name":"Cat",
                  "__typename":"MenuItem"
               },
               {  
                  "name":"Custom Salad",
                  "__typename":"MenuItem"
               },
               {  
                  "name":"No Modifier Salad",
                  "__typename":"MenuItem"
               }
            ],
            "__typename":"Category"
         }
      ],
      "__typename":"Vendor"
   }
]

我要做的是将categories[x].name 显示为标题，将categories[x].menuitems 显示为表格。

   {this.props.items.map(( listValue, index ) => {
      return (
        <tr key={index}>
          <td>{listValue.id}</td>
          <td>{listValue.title}</td>
          <td>{listValue.price}</td>
        </tr>
      );
    })}

但这并没有显示任何内容。我该如何解决这个问题？

【问题讨论】：

标签： javascript reactjs react-table

【解决方案1】：

我想你想使用Array.entries() 方法，我总是以 .items() 开头，只是为了记住它被称为 .entries()！

或者也许你想要一些完全不同的东西，这里是 Vue.js 中的一些版本：

const props = [  
   {  
      "categories":[  
         {  
            "name":"Hot Drinks",
            "menu_items":[  
               {  
                  "name":"Regular Coffee",
                  "__typename":"MenuItem"
               }
            ],
            "__typename":"Category"
         },
         {  
            "name":"Salads",
            "menu_items":[  
               {  
                  "name":"Caesar Salad",
                  "__typename":"MenuItem"
               },
               {  
                  "name":"Cat",
                  "__typename":"MenuItem"
               },
               {  
                  "name":"Custom Salad",
                  "__typename":"MenuItem"
               },
               {  
                  "name":"No Modifier Salad",
                  "__typename":"MenuItem"
               }
            ],
            "__typename":"Category"
         }
      ],
      "__typename":"Vendor"
   }
]

var app = new Vue({
  el: '#app',
  data() {
    return {
    props
    }
  },
  
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
   
   <div v-for="cat in props[0].categories"> 
       <div style="font-weight: 700;">{{cat.name}}</div>
     <div>
       <div v-for="(menu_item, i) in cat.menu_items" style="padding-left: 10px;">
         {{i + 1}}. {{menu_item.name}}
       </div>
     </div>
   </div>
   
</div>

【讨论】：