Json对象到数组答案

【问题标题】：Json object to arrayJson对象到数组
【发布时间】：2018-11-13 16:08:18
【问题描述】：

我有一个这样的 json 数组：

{"orders" : [ null, {
    "date" : "2012-03-19T07:22Z",
    "item" :
      {"name":"pizza", "quantity":"2", "size":"25"}, {"name":"suppe", "quantity":"2", "size":"1" }
  },{
    "date" : "2018-03-19T07:22Z",
    "item" : {"name":"brot", "quantity":"1", "size":"-"}, {"name":"hawaii", "quantity":"5", "size":"45" }
  } ]
}

我想用 vue 渲染一个嵌套列表，但我不明白为什么我不能。数据我已经传过了，一级数据可以渲染，二级不能渲染：

<ul v-for="order in orders">
       <li>{{order.date}}</li>
           <li>{{order.item}}</li>
              <ul v-for="i in orders.item">
                 <li>{{i.name}}</li>
               </ul>
           </li>
        </ul>

【问题讨论】：

您的第二个版本不是数组。你的意思是，只是删除空条目？ array = array.filter(x => x)
抱歉，我解决了这个问题。
现在您的第二个版本是无效的 JSON。
对不起，我宁愿写整个问题，因为我是新手
你打错了i in orders.item 应该是i in order.item。

标签： arrays json vue.js

【解决方案1】：

在您的 JSON 中，item 应该是一个数组，而不是一个对象。另外，关闭你的li 标签：

new Vue({
  el: '#app',
  data: {
    orders: [
      null,
      {
        "date": "2012-03-19T07:22Z",
        "item": [{
            "name": "pizza",
            "quantity": "2",
            "size": "25"
          },
          {
            "name": "suppe",
            "quantity": "2",
            "size": "1"
          }
        ]
      }, {
        "date": "2018-03-19T07:22Z",
        "item": [{
            "name": "brot",
            "quantity": "1",
            "size": "-"
          },
          {
            "name": "hawaii",
            "quantity": "5",
            "size": "45"
          }
        ]
      }
    ]
  }
})

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <ul v-for="order in orders" v-if="order != null">
    <li>{{order.date}}</li>
    <li>
      <ul v-for="i in order.item">
        <li>{{i.name}}</li>
      </ul>
    </li>
  </ul>
</div>

【讨论】：

谢谢！我必须对括号更加小心！