CODEWITHSUNDEEP
arraysjsonvue.js
robertkovacs
robertkovacs

Reputation: 455

Json object to array

I have an json array like this:

{"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" }
  } ]
}

And I would like render a nested list with vue but I don't understand why I can't. I already passed the data, first level data can render, but secont level can not.:

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

Upvotes: 0

Views: 69

Answers (1)

Vucko
Vucko

Reputation: 20834

In your JSON item should be an array, not an object. Also, close your li tag:

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>

Upvotes: 1

Related Questions