For loop of objects

Question

I'm trying to do a for loop of a set of objects but since they all aren't named the same, I'm stuck.

<div id="components-demo">
    <div>Travel Information</div>
    <ul>
        <li 
          v-for="(todo, index) in todos"
          v-bind:id="index"
          v-bind:title="todo"
            >{{todo}}</li>
    </ul>
</div>


var newData = @Html.Raw(Json.Encode(Model));
// Object returns like { Passenger: "Tom Jones", Airline: "United Airways", Destination: "Atlanta, GA", etc. }    

var vm = new Vue({
    el: '#components-demo',
    data: {
        todos: [
            { newData }
        ]
    }
})

In the developer tools in Vue, it lists out the object fine like:

todos: Array [1]
   0: Object
     Passenger: "Tom Jones"
     Airline: "United Airways"
     Destination: "Atlanta, GA"
     etc.

At the end I'm looking to list out li's containing these items but can't seem to loop through unless I specify exactly each one.

"they all aren't named the same" You mean they have different keys? I suspect you need a second loop to iterate over the object keys as well. — xpy
– xpy, Commented Jan 7, 2019 at 7:54
Well like since they aren't all called Passenger, I can't do newData.Passenger perse — Keith
– Keith, Commented Jan 7, 2019 at 7:58

Marc · Accepted Answer · 2019-01-07 08:05:37Z

1

According to the object you say is constructed.

<div id="components-demo">
    <div>Travel Information</div>
    <ul>
        <li v-for="(item, index) in todos" :key="index">{{ item.Passenger }}</li>
    </ul>
</div>

To list out dynamic objects using nested loop:

<div id="components-demo">
    <div>Travel Information</div>
    <ul>
        <li v-for="(item, index) in todos" :key="index">
          <ul>
             <li v-for="(value, key) in item" :key="key">{{ key }} : {{ value }}</li>
          </ul>
        </li>
    </ul>
</div>

answered Jan 7, 2019 at 8:05

Marc

5,5032 gold badges34 silver badges42 bronze badges

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

1 Comment

Keith Over a year ago

This worked thanks. I see I needed to add in item, index instead of using the object itself

Jeremy Walters · Accepted Answer · 2019-01-07 08:05:54Z

1

You are assigning the object to an array, you can just loop through the object directly https://jsfiddle.net/cckLd9te/4656/

data: {
    todos: newData 
  },

answered Jan 7, 2019 at 8:05

Jeremy Walters

2,15219 silver badges30 bronze badges

Collectives™ on Stack Overflow

For loop of objects

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related