We Keep Coding

Multiple v-for to get values from Nested JSON array in Vue.js

I am fetching data from external API and populating Table to display the JSON Data. The JSON data has multiple nested arrays, actually the data is for "Orders".
So I am trying to get the Items of the order in a cell, for that I am using "v-if" but i could not archive this.
The results I am getting for the below code is each item of the order in separate column, but i am trying to view the items in one cell and other 'meta_data'
Below is JSON data structure
"line_items": [{
"name": "Salat",
"meta_data": [{
"id": 11500,
"key": "size",
"value": "full"
},
{
"id": 1150001,
"key": "Dressing",
"value": "green"
}
],
"price": 4.28571399999999957941554384888149797916412353515625
},
{
"name": "Chicken",
"meta_data": [{
"id": 115111112,
"key": "size",
"value": "Normal (7,00 €)"
},
{
"id": 1151111113,
"key": "Extra sauce",
"value": "Bbq(0,50 €)"
}
],
"price": 7.14285700000000023379698177450336515903472900390625
},
]
This is how I am creating the table
<table class="table table-bordered" id="table">
<thead>
<tr>
<th scope="col">Order Id</th>
<th scope="col">Name</th>
<th scope="col">Items</th>
</tr>
</thead>
<tbody>
<tr
v-for="(order, index) in orders"
:key="order.id"
:class="{highlight: !order.is_printed}"
>
<td>{{ order.id }}</td>
<td>{{ order.billing.first_name + " " +order.billing.last_name }}</td>
<!-- <td>{{ order.line_items[].name}} </td>-->
<td v-for="(items, index) in order.line_items">{{items.name}}</td>
</tr>
</tbody>
</table>
How can i archive this to get the names and meta data of the items of the order in one cell.
Suggestions will be great help.
Thank you

By having the v-for on the <td> element in the template it means you will have a <td> created for each item in your order.line_items array. To have all of these items render within a single <td> cell, you need to put the v-for inside the <td>. An unordered list (<ul>) may be an appropriate HTML element to use. For example:
<td>
<ul>
<li v-for="(items, index) in order.line_items">{{items.name}}</li>
</ul>
</td>
I have created a fiddle for your reference.

How to code a nested v-for loop to display all elements?

I am coding an app which makes orders and for each order their are a certain amount of products within them. How would i code my VueJs code below to display all products for each order that comes in? The code below is my VueJS template
<div class="card card-default" v-for="(order, index) in orders">
<p style="padding:0px;"><strong> User: </strong> {{order.user.name}} </p>
<table class="table-repsonsive table-bordered ">
<thead>
<th scope="col">Product</th>
<th scope="col">Price</th>
<th scope="col">Quantity</th>
</thead>
<tbody v-for="(product, pindex) in orders">
--how to loop through each product of each order in the array?
<td>{{product.order[pindex].name}}</td>
<td>R{{product.order[pindex].price}}</td>
<td>{{product.order[pindex].quant}}</td>
</tbody>
</table>
</div>
This is the order object that is pushed within the orders array after each order takes place
{
"order": [
{
"id": 1,
"name": "Garden",
"price": 20,
"quant": 1
},
{
"id": 2,
"name": "Greek",
"price": 24,
"quant": 1
},
{
"id": 3,
"name": "Chicken mayo",
"price": 24,
"quant": 1
}
],
"user": {
"id": 1,
"role_id": 2,
"name": "Mapia",
"email": "mapia#gmail.com",
"avatar": "users/default.png",
"settings": null,
"created_at": "2018-07-05 13:10:26",
"updated_at": "2018-07-05 13:10:26"
}
}

You should take you order and loop through its property order
<tbody v-for="product in order.order">
<td>{{product.name}}</td>
<td>R{{product.price}}</td>
<td>{{product.quant}}</td>
</tbody>

Handlebars bind outside each in markup

I have a problem to bind an object in handlebars outside each "sectorsPressCoverageElements" in a markup.
This is my data that is a json:
{
"name": "Rassegna",
"page": 1,
"pages": 7,
"sectorsPressCoverageElements": [
{
"id": 25129,
"media": "media",
"linkMedia": "",
"article": "article",
"journalist": "",
"linkJournalist": "",
"publishingDate": "2017-11-23T09:00:00",
"purchase": false
},
{
"id": 25129,
"media": "media",
"linkMedia": "",
"article": "article",
"journalist": "",
"linkJournalist": "",
"publishingDate": "2017-11-23T09:00:00",
"purchase": false
}
],
"categories": [
],
"error": null
}
My problem is bind "name" that is outside each.
This my markup with area to bind "data-name" with name (for example in json : "name": "Rassegna"):
<script id="handlePressCoverage" type="text/x-handlebars-template">
{{#each sectorsPressCoverageElements}}
<tr data-id="{{id}}" data-category="0">
#*<td> <input type="checkbox" class="select-element"></td>*#
<td class="col-xs-2">{{#simplifyDate publishingDate}}{{/simplifyDate}}</td>
<text>
<td class="col-xs-1"><button data-id="{{id}}" data-name="{{HOW BIND NAME HERE??}}" class="btn btn-success btn-xs iPressShare">Save &nbsp<i class="iPressIconShare fas fa-share-alt"></i></button></td>
</text>
</tr>
{{/each}}
</script>
And pass data to handlebars:
var sourcePressCoverage = $("#handlePressCoverage").html();
var templatePressCoverage = Handlebars.compile(sourcePressCoverage);
$.getJSON(url, function (data) {
$htmlsourcePressCoverage = $(templatePressCoverage(data));
});

To bind name that is outside each, You can use ../ segments in Handlebar. This will evaluate their paths against a parent context.
For example in your case simply putting ../name in the data-name attribute will result in Rassegna
<script id="handlePressCoverage" type="text/x-handlebars-template">
{{#each sectorsPressCoverageElements}}
<tr data-id="{{id}}" data-category="0">
#*<td> <input type="checkbox" class="select-element"></td>*#
<td class="col-xs-2">{{#simplifyDate publishingDate}}{{/simplifyDate}}</td>
<text>
<td class="col-xs-1"><button data-id="{{id}}" data-name="{{../name}}" class="btn btn-success btn-xs iPressShare">Save &nbsp<i class="iPressIconShare fas fa-share-alt"></i></button></td>
</text>
</tr>
{{/each}}

AngularJS nested ng-repeat in table

I am new to AngularJs and have come across an issue with Json data with nested arrays.
I have simplified the code to a simple html doc, this can be found below.
The first property {{HelloMessage}} is working and gets populated with the string value stored in the property HelloMessage, but the ng-repeat is not.
After looking online, I discovered that I in fact had an array within an array, so assumed that I needed to have an ng-repeat within an ng-repeat, but it is not working. I am quite sure that it is something simple that I have done wrong.
<!DOCTYPE html>
<html ng-app="app">
<head>
<title></title>
</head>
<body>
<h1 ng-controller="myController">{{helloMessage}}</h1>
<div>
<table>
<thead>
<tr>
<th>Id</th>
<th>UserId</th>
<th>DisplayName</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="stream in Data.Records">
<tr ng-repeat="record in stream.Users">
<td>{{stream.Id}}</td>
<td>{{stream.User}}</td>
<td>
{{stream.Description}}
</td>
<!--<td>
<table>
<tbody>
<tr ng-repeat="b in value">
<td>{{b.user}}</td>
</tr>
</tbody>
</table>
</td>-->
</tr>
</tr>
</tbody>
</table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script type="text/javascript">
angular.module('app', []).controller('myController',
function ($scope) {
$scope.helloMessage = "Hi";
$scope.Data = [{
Success: true,
ErrorMessage: null,
SuccessMessage: null,
Records: [{
"CreatedBy": "Mickey Mouse",
"CreatedDate": "2015-08-17T13:16:22.713",
"CreatedDateDisplay": "17-08-2015",
"Description": "Test 1",
"Id": 7546798576985769857,
"Name": "Test 1",
"UpdatedBy": "",
"UpdatedDate": null,
"UpdatedDateDisplay": null,
"User": null,
"UserId": 0,
"Users": [{
"Users": [{
"Id": 7546798576985769858,
"UserId": 7546798576985769857,
"DisplayName": "Daffy Duck"
}, {
"Id": 7546798576985769859,
"UserId": 7546798576985769857,
"DisplayName": "Pluto"
}
],
"User": "Bugs Bunny",
"UserId": 7546798576985769857,
"Name": "Test 2",
"Description": "Test 2",
"Id": 7546798576985769857,
"CreatedBy": "Goofy",
"CreatedDate": "2015-08-25T14:03:28.083",
"UpdatedBy": "Porky Pig",
"UpdatedDate": "2017-03-27T08:19:36.077",
"CreatedDateDisplay": "25-08-2015",
"UpdatedDateDisplay": "27-03-2017"
}
]
}
]
}
];
});
</script>
</body>
</html>
No errors are throw in Chrome Console

Rewrite the ng-repeat as
<tr ng-repeat="stream in Data[0].Records[0].Users[0].Users">
</tr>
Use
<td>{{stream.Id}}</td>
<td>{{stream.UserId}}</td>
<td>{{stream.DisplayName}}</td>
instead of
<td>{{stream.Id}}</td>
<td>{{stream.User}}</td>
<td>{{stream.Description}}</td>
function myController($scope) {
$scope.helloMessage = "Hi";
$scope.Data = [{
Success: true,
ErrorMessage: null,
SuccessMessage: null,
Records: [{
"CreatedBy": "Mickey Mouse",
"CreatedDate": "2015-08-17T13:16:22.713",
"CreatedDateDisplay": "17-08-2015",
"Description": "Test 1",
"Id": 7546798576985769857,
"Name": "Test 1",
"UpdatedBy": "",
"UpdatedDate": null,
"UpdatedDateDisplay": null,
"User": null,
"UserId": 0,
"Users": [{
"Users": [{
"Id": 7546798576985769858,
"UserId": 7546798576985769857,
"DisplayName": "Daffy Duck"
}, {
"Id": 7546798576985769859,
"UserId": 7546798576985769857,
"DisplayName": "Pluto"
}],
"User": "Bugs Bunny",
"UserId": 7546798576985769857,
"Name": "Test 2",
"Description": "Test 2",
"Id": 7546798576985769857,
"CreatedBy": "Goofy",
"CreatedDate": "2015-08-25T14:03:28.083",
"UpdatedBy": "Porky Pig",
"UpdatedDate": "2017-03-27T08:19:36.077",
"CreatedDateDisplay": "25-08-2015",
"UpdatedDateDisplay": "27-03-2017"
}]
}]
}];
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
<div ng-app>
<div ng-controller="myController">
<h1>{{helloMessage}}</h1>
<table>
<thead>
<tr>
<th>Id</th>
<th>UserId</th>
<th>DisplayName</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="stream in Data[0].Records[0].Users[0].Users">
<td>{{stream.Id}}</td>
<td>{{stream.UserId}}</td>
<td>
{{stream.DisplayName}}
</td>
</tr>
</tbody>
</table>
</div>
</div>

First you have to define your controller to body level as following.
<body ng-controller="myController">
You have defined it as h1 level so it is not accessible.
I have made changes in your code please as following.
<!DOCTYPE html>
<html ng-app="app">
<head>
<title></title
</head>
<body ng-controller="myController">
<h1>{{helloMessage}}</h1>
<div>
<table>
<thead>
<tr>
<th>Id</th>
<th>UserId</th>
<th>DisplayName</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="stream in Data[0].Records[0].Users[0].Users">
<td>{{stream.Id}}</td>
<td>{{stream.UserId}}</td>
<td>{{stream.DisplayName}}
</td>
</tr>
</tbody>
</table>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script type="text/javascript">
angular.module('app', []).controller('myController',
function ($scope) {
$scope.helloMessage = "Hi";
$scope.Data = [{
Success: true,
ErrorMessage: null,
SuccessMessage: null,
Records: [{
"CreatedBy": "Mickey Mouse",
"CreatedDate": "2015-08-17T13:16:22.713",
"CreatedDateDisplay": "17-08-2015",
"Description": "Test 1",
"Id": 7546798576985769857,
"Name": "Test 1",
"UpdatedBy": "",
"UpdatedDate": null,
"UpdatedDateDisplay": null,
"User": null,
"UserId": 0,
"Users": [{
"Users": [{
"Id": 7546798576985769858,
"UserId": 7546798576985769857,
"DisplayName": "Daffy Duck"
}, {
"Id": 7546798576985769859,
"UserId": 7546798576985769857,
"DisplayName": "Pluto"
}],
"User": "Bugs Bunny",
"UserId": 7546798576985769857,
"Name": "Test 2",
"Description": "Test 2",
"Id": 7546798576985769857,
"CreatedBy": "Goofy",
"CreatedDate": "2015-08-25T14:03:28.083",
"UpdatedBy": "Porky Pig",
"UpdatedDate": "2017-03-27T08:19:36.077",
"CreatedDateDisplay": "25-08-2015",
"UpdatedDateDisplay": "27-03-2017"
}]
}]
}];
});
</script>
</html>
Hope this will help you.
thanks

Thank you, thank you all for your help. I have used Geethu Jose answer, but it still did not give me exactly what I was looking for, but after much head scratching I did come up with a solution for my problem. Instead of using the array placeholders [0] I needed access the arrays themselves at the different levels, so I had to change the code to the following.
<div ng-app>
<div ng-controller="myController">
<h1>{{helloMessage}}</h1>
<table>
<tbody>
<tr ng-repeat="data in Data">
<td>
<table ng-repeat="records in data">
<thead>
<tr>
<th>UserId</th>
<th>User</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{records.UserId}}</td>
<td>{{records.User}}</td>
<td>{{records.Name}}</td>
<td>
<table>
<thead>
<tr>
<th>Id</th>
<th>UserId</th>
<th>DisplayName</th>
</tr>
</thead>
<tr ng-repeat="streamUser in records.Users">
<td>{{streamUser.Id}}</td>
<td>{{streamUser.UserId}}</td>
<td>{{streamUser.DisplayName}}</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>

It seems that your JSON is full of arrays. It could probably be improved, but there is how you can display it in its current state. You don't need to nest ng-repeat:
<tbody>
<tr ng-repeat="user in Data[0].Records[0].Users[0].Users">
<td>{{user.Id}}</td>
...
</tbody>
Working JSFiddle of your code

Ng-Repeat does not repeat (or return anything)

I am new to AngularJS and still playing around with it at this point. To teach myself the concepts, I am working off of a few hand-constructed JSON files.
I first used it to construct the elements of a pop-out javascript menu by using ng-repeat on a list element where the controller accesses a JSON file. That worked fine. I then tried to ng-repeat a rather complicated table row structure over a different JSON file with a slightly more complicated data model. At runtime, this returns a comment, as with the previous experiment, but no elements to go along with it.
I am using two controllers as part of one app. I think the issue may be in how the data from the JSON files is accessed.
Not including the CSS as I don't think that's impacting it. The 'MenuCtrl' controller is still functioning correctly (ng-app is called on the element of the whole page), so I'm only including what I feel is the relevant HTML.
controllers.js:
var profileApp = angular.module('profileApp', []);
profileApp.controller('BookCtrl', function ($scope, $http){
$http.get('books.json').success(function(data) {
$scope.bookItems = data;
});
});
profileApp.controller('MenuCtrl', function ($scope, $http){
$http.get('profile.json').success(function(data) {
$scope.profileItems = data;
});
});
books.json:
[
{
"title": "The Design of Everyday Things",
"author": "Donald Norman",
"img": "img/norman.jpg",
"isbn": "",
"description":".",
"id1": "hoverA",
"id2": "hover1"
},
{
"title": "Plans and Situated Actions",
"author": "Lucille Suchman",
"img": "img/planssitu.jpg",
"isbn": "",
"description":".",
"id1": "hoverB",
"id2": "hover2"
},
{
"title": "Where The Action Is",
"author": "Paul Dourish",
"img": "img/wheretheaction.jpg",
"isbn": "",
"description":".",
"id1": "hoverC",
"id2": "hover3"
},
{
"title": "Information Processing and Human-Machine Interaction",
"author": "Jens Rasmussen",
"img": "img/rasmussen.jpg",
"isbn": "",
"description":".",
"id1": "hoverD",
"id2": "hover4"
},
{
"title": "The Imaginary App",
"author": "Paul D. Miller and Svitlana Matviyenko",
"img": "img/imaginary.jpg",
"isbn": "",
"description":".",
"id1": "hoverE",
"id2": "hover5"
},
{
"title": "The Gutenberg Galaxy",
"author": "Marshall Mcluhan",
"img": "img/guten.jpg",
"isbn": "",
"description":".",
"id1": "hoverF",
"id2": "hover6"
}
]
Relevant portion of HTML:
<div align="center">
<p class="central">Bibliography</br></p></br>
<table class="content1" ng-controller="BookCtrl" >
<colgroup>
<col span="1" class="col1">
<col span="1.5" class="col2">
</colgroup>
<tbody ng-repeat="book in bookItems" >
<tr >
<td align="center"><div class="center"><div class="round3"><img class="book" ng-src="{{book.img}}"></img></div></div></td>
<td></td>
<td class="wrapword" style="padding-left:10px;"><p><span class="content2"><strong>{{book.title}}</strong></span>
<span class="small2">{{book.author}}</br>
<span class="hide2" id="{{book.id1}"}>See Description</span>
<span class="hide" id="{{book.id2}}">{{book.description}}</span>
</span>
</p></td>
</tr>
</tbody>
</table>
</div>
What I get when inspecting the elements of the running page:
<table class="content1 ng-scope" ng-controller="BookCtrl">
<colgroup>
<col span="1" class="col1">
<col span="1.5" class="col2">
</colgroup>
<!-- ngRepeat: book in bookItems -->
</table>

You have mentioned, ng-repeat inside TBODY, which I corrected. This should work now.
<div align="center">
<p class="central">Bibliography</br></p></br>
<table class="content1" ng-controller="BookCtrl" >
<colgroup>
<col span="1" class="col1">
<col span="1.5" class="col2">
</colgroup>
<tbody >
<tr ng-repeat="book in bookItems">
<td align="center"><div class="center"><div class="round3"><img class="book" ng-src="{{book.img}}"></img></div></div></td>
<td></td>
<td class="wrapword" style="padding-left:10px;"><p><span class="content2"><strong>{{book.title}}</strong></span>
<span class="small2">{{book.author}}</br>
<span class="hide2" id="{{book.id1}"}>See Description</span>
<span class="hide" id="{{book.id2}}">{{book.description}}</span>
</span>
</p></td>
</tr>
</tbody>
</table>
</div>

Ok I see some mark up that is not valid but I think your code breaks because of this invalid mark up: <span class="hide2" id="{{book.id1}"}>See Description</span>, change to <span class="hide2" id="{{book.id1}}">See Description</span>