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

Question

我有些新意，要做出反应并设法摆脱困境。我将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>
      );
    })}

但这不会显示任何内容。我该如何解决？

Answer 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>