Develop Reference

How to use nested for loop in vue.js

I have a data in following format and want to loop the data and map the data what we have inside the array.
{
tableEmployeeList : {
01 : {
missing : [
{
empId: 1
}
]
},
02 : {
missing: [
{
empId: 2
}
]
},
03: {
missing : [
{
empId: 3
}
]
}
}
}
Tried using this logic but was getting an error as employee not defined
<tr v-for="employee in tableEmployeeList" :key="employee.empId">
<tr v-for="data in employee" :key="data.empId">
<td class="td-empId">{{ data.empId }}</td>
</tr>
</tr>

Use key employee.id
Basically you can use anything as a key for example employee.name employee.age
sharing a sample of for loop in vue js
<div v-for="item in data" :key="item.id">

Multiple v-for loops in same vue file

I'm trying to populate a table using three for loops from my api.
const events = await app.$axios.get('/api/events/')
const markets = await app.$axios.get('/api/markets/')
const markets = await app.$axios.get('/api/runners/')
I need to make sure that the table rows index is runners since the runners column will have more runners than markets and markets will have more rows than events.
Like so.
Event Market
Runner
Runner
Runner
Market
Runner
Runner
When I try to do multiple for for loops in the same vue file I get this error.
duplicate attribute key
Why do I get this error from using id in separate loops?
My Question is how do I populate the table based on runner index for each row?
Here's my code so far.
<template>
<div class="course-list-row">
<th style="width:5%"> Start date </th>
<th style="width:5%"> Event name</th>
<th scope="col">Market</th>
<th scope="col">Runner</th>
<tr v-for="(event, index) in events" :key=id
v-for="(market, index) in markets" :key=id
v-for="(runner, index) in runners" :key=id>
<td>{{ event.start_time }} </td>
<td>{{ event.event_name }} </td>
<td>{{ market.name }} </td>
<td>{{ runner.name }} </td>
<td />
</tr>
</div>
</template>
<script>
export default {
async asyncData({
app
}) {
try {
const events = await app.$axios.get('/api/events/')
const markets = await app.$axios.get('/api/markets/')
const runners = await app.$axios.get('/api/runners/')
return {
events: events.data.results,
markets: markets.data.results,
runners: runners.data.results,
error: false
}
} catch (e) {
console.log('error', e)
return {
events: [],
markets: [],
runners: [],
error: true
}
}
},
};
</script>
<style>
th,
td {
font-family: ‘Lato’, sans-serif;
font-size: 12px;
font-weight: 400;
padding: 10px;
text-align: left;
width: 0%;
border-bottom: 1px solid black;
}
</style>
The api responses have key of id as below.
/api/events
{
"count": 80,
"next": null,
"previous": null,
"results": [{
"id": 103,
"sport_id": "9",
"event_name": "Guilherme Clezar vs Uladzimir Ignatik",
"start_date": "12-11-19",
"status": "open",
"event_id": 1273804660340017
}]
}
/api/markets
{
"count": 128,
"next": "http://localhost:8000/api/markets/?page=2",
"previous": null,
"results": [{
"id": 151,
"market_id": 1273804670840017,
"market_name": "Moneyline",
"status": "open",
"volume": 1107.5453,
"event": 103
}]
}

Key is used to calculate differences in DOM when re rendering. Keys have to be unique in scope a parent DOM node (I guess).
Try prefixing your keys with something.
v-for="(event, index) in events" :key="`event_${id}`"
EDIT:
Actually the reason is probably that your id is not defined anywhere. Replace it with index.
Besides, are you sure you can use three loops on the same element? Never tried it, im always concatenating things in a computed prop... Interesting approach!

As pointed out in the comments its not possible to have multiple v-for statements on the same element, you would need something like this instead:
<div class="course-list-row">
<th style="width:5%"> Start date </th>
<th style="width:5%"> Event name</th>
<th scope="col">Market</th>
<th scope="col">Runner</th>
<tr v-for="(event, index) in events" :key=id>
<td>{{ event.start_time }} </td>
<td>{{ event.event_name }} </td>
<td></td>
<td></td>
</tr>
<tr v-for="(market, index) in markets" :key=id>
<td></td>
<td></td>
<td>{{ market.name }} </td>
<td></td>
</tr>
<tr v-for="(runner, index) in runners" :key=id>
<td></td>
<td></td>
<td></td>
<td>{{ runner.name }} </td>
</tr>
</div>
OR
To avoid using verbose templating as above, you could merge all three arrays into a single array, where each object has an id and a type and render as follows:
<tr v-for="(entry, index) in combined" :key=id>
<td>{{entry.type == 'event' ? event.start_time : ''}} </td>
<td>{{ entry.type == 'event' ? event.event_name : ''}} </td>
<td>{{ entry.type = 'market' ? market.name : ''}}</td>
<td>{{ entry.type == 'runner' ? runner.name : ''}}</td>
</tr>

Though I think this has already been covered in the comments I'll quickly recap some of the problems with the original code.
An HTML element can't have the same attribute multiple times. While Vue templates are not technically HTML they do try to conform to roughly the same parsing rules, so duplicates are discarded. The original code has both v-for and key attributes duplicated on the <tr>.
Another problem is the key value. Writing :key=id will try to set the key to equal the value of a property called id. But where is this property defined? By default Vue will be looking for it on the Vue instance itself. I suspect what you meant was for it to use the id property of the event, market or runner. For that you would need to write :key="event.id", etc..
The question does leave some ambiguity as to what precisely it is you're trying to achieve but the code below is my best guess for what you want:
new Vue({
template: `
<table border>
<thead>
<th>Start date</th>
<th>Event name</th>
<th>Market</th>
<th>Runner</th>
</thead>
<tbody>
<template v-for="event in events">
<tr :key="'event' + event.id">
<td>{{ event.start_date }}</td>
<td>{{ event.event_name }}</td>
</tr>
<template v-for="market in marketsFor[event.id]">
<tr :key="'market' + market.id">
<td></td>
<td></td>
<td>{{ market.market_name }} </td>
</tr>
<tr v-for="runner in runnersFor[market.id]" :key="'runner' + runner.id">
<td></td>
<td></td>
<td></td>
<td>{{ runner.runner_name }}</td>
</tr>
</template>
</template>
</tbody>
</table>
`,
el: '#app',
data () {
return {
events: [
{
"id": 103,
"event_name": "Guilherme Clezar vs Uladzimir Ignatik",
"start_date": "12-11-19"
}, {
"id": 104,
"event_name": "Event 2",
"start_date": "13-11-19"
}
],
markets: [
{
"id": 151,
"market_name": "Moneyline",
"event": 103
}, {
"id": 152,
"market_name": "Market 2",
"event": 103
}, {
"id": 153,
"market_name": "Market 3",
"event": 104
}
],
runners: [
{
"id": 1,
"runner_name": "Runner 1",
"market": 151
}, {
"id": 2,
"runner_name": "Runner 2",
"market": 151
}, {
"id": 3,
"runner_name": "Runner 3",
"market": 152
}, {
"id": 4,
"runner_name": "Runner 4",
"market": 153
}
]
}
},
computed: {
marketsFor () {
const markets = {}
for (const market of this.markets) {
const event = market.event
markets[event] = markets[event] || []
markets[event].push(market)
}
return markets
},
runnersFor () {
const runners = {}
for (const runner of this.runners) {
const market = runner.market
runners[market] = runners[market] || []
runners[market].push(runner)
}
return runners
}
}
})
<script src="https://unpkg.com/vue#2.6.10/dist/vue.js"></script>
<div id="app"></div>
I've had to rename some properties, e.g. start_time to start_date and market.name to market.market_name. The properties in the template didn't seem to match the example data.
The core of my solution is a pair of computed properties that generate simple object maps that can be used to find the corresponding children at each level. There are various alternatives to this but it seems that the heart of any solution is finding a way to navigate the hierarchy from within the template. The template in my example could be simplified but at the expense of moving the complexity into the JavaScript portion of the component.

Binding array items in Vue.js

I have an arry which contains some array and proporties in it.
Now I want to iterate through the array and create new rows for each of items.
This is what I am doing.
var orderDetails = [{
"ID": "1",
"NAME": "Item1",
"Orders": [
"ORD001"
],
"Purchases": [
"RhynoMock",
"Ember"
],
"ISENABLED": "false"
},
{
"ID": "2",
"NAME": "Item2",
"Orders": [
"ORD002",
"ORD008"
],
"Purchases": [
"StufferShop"
],
"ISENABLED": "false"
}
];
var app = new Vue({
el: '#ordersDiv',
data: {
allOrders: orderDetails
}
});
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="ordersDiv">
<table>
<thead>
<tr>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr v-for="order in allOrders">{{ order.NAME }}</tr>
</table>
</div>
Getting the error,
[Vue warn]: Error in render: "TypeError: Cannot read property 'NAME' of undefined"

Your HTML is invalid, and it seems that Vue's template compiler or DOM renderer has trouble with it: <tr> must only have <td> or <th> child elements, it cannot have text node children.
Try this instead:
<tr v-for="order in allOrders">
<td>{{ order.NAME }}</td>
</tr>

How do I access and iterate array items by index in handlebars?

I need to iterate the JSON data in the handlebars in {{#each}} statement.
This is the JSON data,
{
"no": 0,
"address": "Here",
"name": "There",
"members": [
{
"email": "test#test.com",
"name": "SH",
"sex": "F"
},
{
"email": "test2#test.com",
"name": "SH2",
"sex": "F"
}],
"diary": [
{
"ddate":"0820",
"dcheck":"y"
},
{
"ddate":"0821",
"dcheck":"n"
}]
}
and this is the Handlebars code.
I need to iterate 1st, 2nd, 3rd... object's properties in the members list.
I want to know what to put in instead of [0].
{{#each list}}
<tr>
<td><a href='bd-view.html?email={{members.[0].email}}'>{{members.[0].email}}</a></td>
<td>{{members.[0].name}}</td>
<td>{{members.[0].sex}}</td>
<td>{{name}}</td>
<td>{{diary.[0].dcheck}}</td>
<td><input type="checkbox"></td>
</tr>
{{/each}}
This is my first question in stackoverflow.
Hope to see someone answer this question.
Thanks a lot, cheers.

You can use the following:
{{#each members}}
<tr>
<td><a href='bd-view.html?email={{email}}'>{{email}}</a></td>
<td>{{name}}</td>
<td>{{sex}}</td>
<td>{{name}}</td>
{{#with (lookup ../diary #index)}}
<td>{{dcheck}}</td>
{{/with}}
<td><input type="checkbox"></td>
</tr>
{{/each}}
Using the #each to iterate your array, and the function #lookup to access to relative position of the array diary

I actually upvoted Matheus answer using the with lookup of the index. however I did it a different way where I manipulate the data before passing it in.
for (var i = 0; i < data.members.length; i++) {
data.members[i].dcheck = data.diary[i].dcheck;
}
here is a fiddle
http://jsfiddle.net/N2b5M/6750/

Dynamic ng-repeat in AngularJS

My angular controller is
$scope.dyna = [
{ "name": "parshuram", "age": 24 },
{ "name": "Tejash", "age": 26 },
{ "name": "Vinayak", "age": 25 }
];
My html
<table>
<tbody>
<tr ng-repeat="test in dyna">
<td>{{test.name}}</td>
<td>{{test.age}}</td>
</tr>
</tboody>
</table>
This works correctly, and outputs
Parshuram 24
Tejash 26
But if an another variable is added to my scope variable, I need to make changes in my html table:
$scope.dyna = [
{ "name": "parshuram", "age": 24 ,"void": true},
{ "name": "Tejash", "age": 26,"void" : false }
];
<table>
<tbody>
<tr ng-repeat= "test in dyna">
<td>{{test.name}}</td>
<td>{{test.age}}</td>
<!-- I don't want to have to add this, the columns should be added dynamically -->
<td>{{test.void}}</td>
</tr>
</tboody>
</table>
In that case, can the columns be generated dynamically, for example by getting all my object variables from the scope?

ng-repeat can loop over object key/values as well:
<table>
<tbody>
<tr ng-repeat= "test in dyna">
<td ng-repeat="(key, value) in test">
{{value}}
</td>
</tr>
</tbody>
</table>
However as noted in the docs linked above, there are a few limitations compared to an ng-repeat that works on arrays:
The JavaScript specification does not define the order of keys
returned for an object, so Angular relies on the order returned by the
browser when running for key in myObj. Browsers generally follow the
strategy of providing keys in the order in which they were defined,
although there are exceptions when keys are deleted and reinstated.
See the MDN page on delete for more info.
ngRepeat will silently ignore object keys starting with $, because
it's a prefix used by Angular for public ($) and private ($$)
properties.
The built-in filters orderBy and filter do not work with objects, and
will throw an error if used with one.

You should be able to do that with (key,value) iteration.
Would be nice to have fiddle to verify but would be something like:
<tr ng-repeat= "test in dyna">
<td ng-repeat="(key,value) in test">{{value}}</td>
</tr>

If at 'runtime', I don't know. Otherwise:
<div ng-controller="MyCtrl">
<table>
<tbody>
<tr ng-repeat= "test in dyna">
<td ng-repeat="key in objectKeys(test)">{{test[key]}}</td>
</tr>
</tbody>
</table>
</div>
var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
$scope.dyna = [
{ "name": "parshuram", "age": 24 },
{ "name": "Tejash", "age": 26 },
{ "name": "Vinayak", "age": 25 }
];
$scope.objectKeys = function (object) {
var keys = Object.keys(object);
keys.splice(keys.indexOf('$$hashKey', 1))
return keys;
}
}
fiddle

HTML
<html>
<script src="library/angular.min.js"></script>
<script src="practice.js"></script>
<head>
</head>
<body ng-app="app">
<div ng-controller="test1" ng-bind-html="result">
</div>
</body>
</html>
Angularjs
angular.module('app',[]).controller('test1',['$scope','$compile','$sce',function($scope,$compile,$sce){
$scope.dyna = [
{ "name": "parshuram", "age": 24 },
{ "name": "Tejash", "age": 26 },
{ "name": "Vinayak", "age": 25 }
];
$scope.result="<table><tbody>";
for(var i=0;i<$scope.dyna.length;i++){
$scope.result+="<tr>";
for(var key in $scope.dyna[i])
if($scope.dyna[i].hasOwnProperty(key))
$scope.result+='<td>'+$scope.dyna[i][key]+'</td>';
$scope.result+="</tr>";
}
$scope.result+="</tbody></table>";
$scope.result=$sce.trustAsHtml($scope.result);
}]);
This is another way, creating html in controller.

just make it again put another ng-repeat in your loop for the test variable:
$scope.dyna = [{ "name": "parshuram", "age": 24 ,"void": true}, { "name": "Tejash", "age": 26,"void" : false }];
<table>
<tbody>
<tr ng-repeat= "test in dyna">
<td ng-repeat="t in test">{{test[t]}</td> // just like this
</tr>
</tboody>
</table>