I am having trouble trying to present data from an api. The data comes in a json response organized like this API from Guild Wars for character data
I made an angularJS request and used a series of nested ng-repeats to present the data, but the innermost loop , the inventory data , isn't being present properly. Only some of it is being iterated.
This is my code :
<table>
<tr ng-repeat="char in $ctrl.chars | orderBy:'-age'">
<td>
<table id="charTotal">
<ng-include src="'charBasic.html'"></ng-include>
<ng-include src="'charBags.html'"></ng-include>
</table>
</td>
</tr>
</table>
Forgot to include charBasic.html :
<tr>
<td>
<table id="charBasic" class="charBasic">
<tr>
<td>{{char.name}}</td>
<td>{{char.race}}</td>
<td>{{char.profession}}</td>
<td>{{char.level}}</td>
<td>{{char.deaths}}</td>
<td>
<table>
<tr ng-repeat="craft in char.crafting">
<td>{{craft.discipline}}</td>
<td>{{craft.rating}}</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
charBags.html :
<tr>
<td>
<table id="charBags" class="charBags" border="1">
<tr ng-repeat="bag in char.bags">
<td>{{bag.id}}</td>
<td>{{bag.size}}</td>
<td ng-repeat="inv in bag.inventory"><ng-if "{{inv}}">{{inv.id}}</ng-if></td>
</tr>
</table>
</td>
</tr>
As it is, not all inventory arrays are iterated, and the results vary each time
What would be the correct way to iterate this data ?
I found out the problem, it was a duplicate item issue :(
I "solved" it by using track-by $index option inside ng-repeat, which will bypass the problem of duplicate ids.
Related
So it is the first time fo me to work with logic app or any technology that have the same idea. I need to use email trigger when eamil is received then extract data to send it to jira ticket as table.
example of the html table from email body:
<table>
<tr><td> Number: </td> <td> 12 </td> </tr>
<tr><td> Priority: </td> <td> High </td> </tr>
<tr><td> Status: </td> <td> Open </td> </tr>
<tr><td> Time: </td> <td> 14:26:39 </td> </tr>
</table>
please consider that I am new to this and I am trying to use array filters, select, compose but still I can't reach anywhere.
I found some solutions but it works with them because the table titles are on the top while form me it is on the side (inline with the values)
example:
There table:
Number
Priority
Status
12
High
Open
Note: I can't change the table format!
I tried to replace the </tr> with |
and </td> with ^ to split them but I got stuck there.
I think the easiest way is to use XML and and XPath query to get your desired outcome.
***Disclaimer: *You need to do the work to style the table, I am merely providing the ability to pivot your source table.
This is the flow I tested with.
The first step is merely the HTML you provided in your question.
The second step is the pivoting of the HTML. This is the text contained within the body of the variable initialisation ...
<table>
<tr>
<th>Number</th>
<th>Priority</th>
<th>Status</th>
</tr>
<tr>
<td>#{trim(xpath(xml(variables('HTML Source')), '//td[contains(text(),"Number")]//following-sibling::td/text()')[0])}</td>
<td>#{trim(xpath(xml(variables('HTML Source')), '//td[contains(text(),"Priority")]//following-sibling::td/text()')[0])}</td>
<td>#{trim(xpath(xml(variables('HTML Source')), '//td[contains(text(),"Status")]//following-sibling::td/text()')[0])}</td>
</tr>
</table>
That results in this output ...
<table>
<tr>
<th>Number</th>
<th>Priority</th>
<th>Status</th>
</tr>
<tr>
<td>12</td>
<td>High</td>
<td>Open</td>
</tr>
</table>
I am trying to render a json as a table in a HTML Template using angularjs ng-repeat element. The script file passes the JSON object, but the ng-repeat wont render the contents of JSON.
I followed the steps from this tutorial link.
https://codepen.io/salva341/pen/aYKmvG
html template section where ng-repeat doesn't render properly
<div ng-controller="WorkflowShowCntrl">
<table class="table striped">
<thead>
<th>Job Name</th>
<th>Job Id</th>
<th>Start Time</th>
<th>Status</th>
</thead>
<tbody>
<tr ng-repeat="ttm in records.response" >
<td>{{ttm.name}} </td>
<td>{{ttm.status}} </td>
<td>{{ttm.name}} </td>
<td>{{ttm.name}} </td>
</tr>
</tbody>
</table>
</div>
app.js
angularjs 1.6.6
$http.get("/api/data-depot/currentjob/list")
.then(function(response) {
$scope.records = {"response":response.data}
$scope.parseItem = function(string)
{
var newString = string.replace(/['\']/g,'');
var jsonFormated = JSON.parse(newString);
return jsonFormated.Message;
}
});
Google chrome inspector : Section inspection screenshot
I have used an angularjs add-on inspector for chrome.
It looks like ttm is the array you want to display for. So I believe your ng-repeat should be more like:
<tr ng-repeat="record in ttm" >
<td>{{record.name}} </td>
<td>{{record.status}} </td>
<td>{{record.name}} </td>
<td>{{record.name}} </td>
ttm being the array, and record being a made-up name for each item in that array.
See: https://www.w3schools.com/angular/ng_ng-repeat.asp
As per your code, your are referencing wrong array name in your HTML binding.
Try this
<div ng-controller="WorkflowShowCntrl">
<table class="table striped">
<thead>
<th>Job Name</th>
<th>Job Id</th>
<th>Start Time</th>
<th>Status</th>
</thead>
<tbody>
<tr ng-repeat="item in records.response.ttm" >
<td>{{item.name}} </td>
<td>{{item.status}} </td>
<td>{{item.name}} </td>
<td>{{item.name}} </td>
</tr>
</tbody>
</table>
</div>
Finally I was was able to achieve what I wanted.
I added ng-bind element to display the data on the html template. That is weird. No of the scope variable gets displayed on the html template without ng-bind element. This investigating that is strange this is happening.
I would like to thank #Thaier Alkhateeb for their valuable comment.
Revised code snippet
<tbody ng-repeat="data in records.response ">
<tr ng-repeat="ttm in data">
<td ng-bind="ttm.name"> </td>
<td ng-bind="ttm.appId"> </td>
<td ng-bind="ttm.created"> </td>
<td ng-bind="ttm.status"> </td>
</tr>
</tbody>
I am working on a scenario where i am using nested ng-repeat to display the json values in html table.Attached the plunker plnkr.co/edit/qC6v8nOP4iFgjlxezTa1?p=preview.I am not able to see the last column values properly.
You have no problems with AngularJS, but with HTML, try this variant:
<table width="100%">
<thead>
<tr>
<th>Id:</th>
<th>Age:</th>
<th>Subjects:</th>
<th>Only Lecturer Name</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in student track by $index">
<td>{{x.id}}</td>
<td>{{x.age}}</td>
<td>{{x.subjects}}</td>
<td>
<span ng-repeat="j in x.subjects">
{{j.Lecturer}}
</span>
</td>
</tr>
</tbody>
</table>
I'm receiving a JSON list from server that could contain any number of properties of any name. I need to show that list on my page. Populating a table when you know the names of properties is easy, but for this one I'm totally lost. Any help would be appreciated.
You can do this,
HTML:
<table>
<thead>
<tr>
<th ng-repeat="(header, value) in resultData[0]">
{{header}}
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in resultData">
<td ng-repeat="cell in row">
{{cell}}
</td>
</tr>
</tbody>
</table>
Here is a sample
I have created a dynamic table using ngtable , and table data for 3 columns is fetched from json.In that table for 4th column a green/red color circle should come based on connection if successful or not.
The same i have done with javascript(without using json) in which for that 4th column i have set the four different id's,and based on id's i have changed the color using ajax if connection is successful.
In angular using json i m unable to do so , I have created the dynamic table but how to set id's and from where to get the image i'm unable to do.Can anyone help on this.
<table ng-table>
<thead>
<tr>
<th>Feature</th>
<th>DaysUp</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="user in users">
<td>{{user.name}}</td>
<td>{{user.status}}</td>
</tr>
</tbody>
</table>
You can use scope id and index value to generate unique id. As ng-repeat creates child scope so you will get one scope id(unique id of scope) that id you can attach with $index.
<tr ng-repeat="user in users" id="{{$parent.$id+'-'+$index}}">
<td>{{user.name}}</td>
<td>{{user.status}}</td>
</tr>
JSFiddle Demo
HTML:
<div ng-app="myapp" ng-controller="myctrl">
<table>
<thead>
<tr>
<td>Name</td>
<td>DaysUp</td>
<td>Status</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="user in users">
<td>{{user.name}}</td>
<td>{{user.daysup}}</td>
<td><img width="20px" height="20px" ng-src="{{imageurls[user.status-1]}}" /> </td>
</tr>
</tbody>
</table>
</div>
SCript:
angular.module('myapp',[])
.controller('myctrl',function($scope){
$scope.users =[
{'name':'xyz','daysup':2,'status':1},
{'name':'abc','daysup':4,'status':2},
{'name':'klm','daysup':6,'status':3},
{'name':'yrt','daysup':9,'status':4}
];
$scope.imageurls = [
'http://www.wpclipart.com/blanks/buttons/glossy_buttons/glossy_button_blank_yellow_circle.png',
'http://pix.iemoji.com/sbemojix2/0702.png',
'http://clker.com/cliparts/u/g/F/R/X/9/green-circle-md.png',
'http://pix.iemoji.com/sbemojix2/0701.png'
];
});
Plunker Demo