Json object to array

Question

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>

Your second version isn't an array. Do you mean, just remove the null entry? array = array.filter(x => x) — Robby Cornelissen
– Robby Cornelissen, Commented Jun 4, 2018 at 10:36
Sorry, I rather wrote the whole problem, because I am newbie — robertkovacs
– robertkovacs, Commented Jun 4, 2018 at 10:47
You have a typo i in orders.item should be i in order.item. — Robby Cornelissen
– Robby Cornelissen, Commented Jun 4, 2018 at 10:47

Vucko · Accepted Answer · 2018-06-04 10:58:50Z

1

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>

answered Jun 4, 2018 at 10:58

Vucko

20.9k12 gold badges60 silver badges108 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

robertkovacs Over a year ago

Thank you! I must be much carefullier with the brackets!

Collectives™ on Stack Overflow

Json object to array

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related