Develop Reference

Retrieve one specific key from JSON array with helpers

I have the following array with an object:
"customfield_10297": [
{
"self": "https://xxxxx.atlassian.net/rest/api/2/customFieldOption/10326",
"value": "Manual",
"id": "10326"
}
],
And I want to retrieve only the value key from it. Is there any way to do it with handlebars? I know only that I can iterate, but the whole array appears in report this way:
<br><b>Test Type:</b> {{#each data.jira.customfield_10297}}
{{#each this}}
<{{#key}}>{{this}}</{{#key}}>
{{/each}}
{{/each}}

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.

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>

Yet another Angular ng-repeat of nested data in a table issue

I've been struggling to properly display my data in a table using Angular's ng-repeat. This should be really straightforward, as there are plenty of examples out there. I think the issue has something to do with namespacing, where I use self.all as the variable for my data in my js file.
HTML:
<div class="container">
<div ng-controller="TransferController as transfers">
<table st-table="transfers" class="table table-striped">
<thead>
<tr ng-repeat="row in transfers.all">
<td>Period: {{ row.period }}</td>
<td colspan="2">Upload Date: {{ row.uploadDate | date }}</td>
</tr>
<tr ng-repeat="code in transfers.all.sections">
<td colspan="3">Transfer Code: {{ code.transferCode }}</td>
</tr>
<tr>
</thead>
</table>
</div>
</div>
TransferController.js:
angular
.module("RssTransfers")
.controller("TransferController", ["$http", "$filter", function($http, $filter) {
var self = this;
self.all = [];
function getTransfers() {
$http
.get("http://localhost:3000/transfers/api")
.then(function(response) {
self.all = response.data.transfers;
})
}
console.log(self);
getTransfers();
}]);
Sample data:
[{
"period": 4,
"uploadDate": "2015-11-19T21:00:00.000Z",
"section":[{
"transferCode": 8675309,
"details": [
{
"voucherNumber": [34, 22],
"vendor": "jimmy",
"description": "blah ",
"amount": "t 45,555.00"
}
]
}]
},
{
"period": 4,
"uploadDate": "2015-11-19T21:00:00.000Z",
"section":[{
"transferCode": 45576543,
"details": [
{
"voucherNumber": 22,
"vendor": "Jonson",
"description": "trap music ",
"amount": "t 12,345.00"
}
]
}]
}]
I tried to put together a plunker but couldn't get Angular working for some reason. When I run this, period and uploadDate render on the page fine, but the row for transferCode does not render at all. Any help would be greatly appreciated; I imagine it's a simple mistake on my part.
EDIT:
My bad. I put incorrect sample data up initially. I did not include the section object. The correct model is up now.

You are iterating over section of the all.transfers array but all.transfers does not have any section property. Instead, each iterable of all.transfers has a section property.
So, in order to iterate over section property of each iterable, you have to place the second ngRepeat in the first ngRepeat like this:
<tr ng-repeat="row in transfers.all">
<td>Period: {{ row.period }}</td>
<td colspan="2">Upload Date: {{ row.uploadDate | date }}</td>
<td ng-repeat="code in row.sections">
{{code.transferCode}}
</td>
</tr>

Unable to loop through json response in ember template

My json array is
{
"object": {
"assignments": [
{
"assignmentId": 14706368,
"sectionId": 0,
"assignmentTitle": "file attachment A",
"assignmentStartDate": "01/01/1900",
"assignmentStartTime": "01:00AM",
"assignmentDueDate": "01/01/2100",
"assignmentDueTime": "01:00AM",
"isMarathonChain": "No",
"assignmentTimeLimit": 0,
"assignmentTimeRemaining": "0",
"marathonAssignmentStatus": "MARATHON_NOT_ASSOCIATED",
"showAssignmentAttemptsAndPasswordDetails": false,
"assignmentAttemptsTaken": 0,
"assignmentAttemptsAllowed": "1",
"showPasswordForm": false,
"isStartAssignment": true,
"isResumeAssignment": false,
"isSubmitAssignment": false,
"passwordRequired": false,
"isConvertToGeniusEnabled": false,
"draftNumber": 0,
"studentExceptionExistsForDueDate": false,
"isPastUploadDate": false,
"showMarathonPrerequisiteInfo": false
}
],
"sections": [
{
"sectionId": 241409387,
"courseId": 241409386,
"sectionName": "Section01"
}
],
"courses": [
{
"courseId": 241409386,
"courseName": "Tricon.Connect_01",
"showDiscipline": false
}
],
"users": [
{
"userId": 1000321061,
"firstName": "Ragu �������&^&",
"lastName": "+##)()Tricon �^^������",
"userType": "S"
}
],
"returnLMS": [
{
"returnUrl": "bb"
}
]
}
}
and i want to loop through suppose assignmet values
i am writing this in my template for looping model
{{#each obj in model.object}}
<tr>
{{#each assign in obj.assignments }}
<td>
{{assign.assignmentId} <br />{{assign.assignmentTitle}
</td>
{{/each}}
</tr>
{{/each}}
But i am not getting the output. My loop is getting failed at 1st line only.
i have to use these values to match some condition and display info.

This is now handled by using the {{each-in}} helper in the template. You can read more about it here but I will attempt an example that will work in your case
{{#each-in model.object as |key values|}}
<tr>
{{#each values as |assign|}}
<td>
{{assign.assignmentId} <br /> {{assign.assignmentTitle}
</td>
{{/each}}
</tr>
{{/each}}
Although your example looks more like you want to only loop through assignments because you are using assignment specific code inside the inner each so that would just look like this
{{#each model.object.assignments as |values|}}
<tr>
{{#each values as |assign|}}
<td>
{{assign.assignmentId} <br /> {{assign.assignmentTitle}
</td>
{{/each}}
</tr>
{{/each}}
If you did, however, want to loop through each of the keys and have different templates based on which key you are currently dealing with you could do something like this:
{{#each-in model.object as |key values|}}
{{#if (eq key 'assignments')}}
<tr>
{{#each values as |assign|}}
<td>
{{assign.assignmentId} <br /> {{assign.assignmentTitle}
</td>
{{/each}}
</tr>
{{/if}}
{{#if (eq key 'sections')}}
<tr>
{{#each values as |section|}}
<td>
{{section.sectionId} <br /> {{section.sectionName}
</td>
{{/each}}
</tr>
{{/if}}
{{/each}}
But of course that would be up to you and what you're trying to achieve with your application 😂 Also, by the way, this example makes use of ember-truth-helpers which is quite useful if you want to do things like those {{#if}} blocks in my example.

Based on the example JSON you've given, the following line is your problem:
{{#each obj in model.object}}
It seems that model.object is a Javascript object, not an array. The each loop only iterates or arrays (and possibly array-like objects), not arbitrary Javascript objects. If you want to iterate over the keys and values of an object, you'll have to create a computed property to do it.