I have a Json string which looks like below.
{
"testdata": [{
"id": 1,
"name": "testname1 ",
"description": "test description1"
},
{
"id": 2,
"name": "testname2 ",
"description": "test description2"
},
{
"id": 3,
"name": "testname3 ",
"description": "test description3"
}
],
"dummydata": [{
"category": "Test with dummy data",
"testdata": [{
"id": 5,
"name": "testname1",
"description": "test description1."
}],
"testnos": 12,
"testresult": "success"
},
{
"category": "Test with original data",
"testdata": [{
"id": 7,
"name": "testname3",
"description": "test description3."
}],
"testnos": 19,
"testresult": "success"
}
],
"valueofcoding": 22,
"valueoftesting": 21,
"valueofbugfix": 6
}
This how I get the json response in my angular class. I am not sure how to show the values in the html using angular.
<tr *ngFor="let data of dataArray">
<td class="my-table-header"><span class="badge badge-light">Values</span></td>
<td class="cntr"><input type="text" readonly class="form-control-plaintext my-table-header-val" value="{{data.valueofcoding}}"/></td>
<td class="cntr"><input type="text" readonly class="form-control-plaintext my-table-header-val" value="{{data.valueoftesting}}"/></td>
<tr>
valueofCoding and valueoftesting are not part of the array of array. So I did like above but I am getting below error.
ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.
I have seen some of the post which is giving same sort of error. But this json format is entirely different and complex. Please help me to sort out this .
dataArray is an Object and *ngFor with is used for the array so if you want to iterate loop over the object in html you can use *ngFor with keyvalue pipe so you can try like this.
<tr *ngFor="let data of dataArray | keyvalue">
<td class="my-table-header"><span class="badge badge-light">Values</span></td>
<td class="cntr" *ngIf="data.key === 'valueofcoding'"><input type="text" readonly class="form-control-plaintext my-table-header-val" value="{{data.value}}"/></td>
<td class="cntr" *ngIf="data.key === 'valueoftesting'"><input type="text" readonly class="form-control-plaintext my-table-header-val" value="{{data.value}}"/></td>
<tr>
Related
I tried so many solutions none of them are not working. please help me to solve this. I need to loop through JSON objects. below is what I tried and my JSON code. I can print the Section name in tr tag but I cannot print the School object Name in the tr tag.
service.ts
getSections(): Observable<Section> {
return this.http
.get<Section>(this.apiUrl + 'sections/all')
.pipe(
retry(2),
catchError(this.handleError),
);
}
Component.ts
getSections() {
this.service.getSections().subscribe(response => {
Object.assign(this.sectionData, response);
console.log(response);
});
}
component.html
<table class="table table-hover">
<thead class="thead-light">
<tr>
<th>#</th>
<th>Section Name</th>
<th>School Name</th>
</tr>
</thead>
<tr *ngFor="let pro of sectionData ;let i=index">
<td [hidden]="true">{{pro.sectionID}}</td>
<td>{{i + 1}}</td>
<td>{{pro.Name}}</td>
<ng-container *ngFor="let sch of pro.School">
<td>{{sch.Name}}</td>
</ng-container>
</tr>
</table>
My JSON
[{
"$id": "1",
"SectionID": 1,
"SchoolID": 6,
"Name": "Grade 1",
"Active": true,
"Tstamp": null,
"Classes": [],
"School": {
"$id": "2",
"SchoolID": 6,
"Name": "Yalpanam",
"AlternativeName": "سصر ءصيص",
"TelephoneNumber": "16556489",
"URL": "",
"EmailID": "",
"Longitude": null,
"Latitude": null,
"Active": true,
"Tstamp": null,
"ClassSections": [],
"NonStaffs": [],
"Principals": [],
"Students": []
}
}]
The error which I get is
Error Msg
In you JSON, School is not an array - it is an object. So you can't iterate over it. To fix that, in your markup change:
<ng-container *ngFor="let sch of pro.School">
<td>{{sch.Name}}</td>
</ng-container>
to simply
<td>{{pro.School?.Name}}</td>
I am trying to show the value of "type" in ngFor table but I was getting object '[object Object]' of type 'object'.
NgFor only supports binding to Iterables such as Arrays.**
json
[{
"id": 123,
"name": "Paul",
"cars":
{
"type": "toyota",
"year": "2013"
}
},
{
"id": 126,
"name": "Frank"
},
{
"id": 125,
"name": "Joy",
"cars":
{
"type": "bwm",
"year": "2000"
}
},
{
"id": 133,
"name": "Bob"
}]
html
//....
<tr *ngFor="let info of information;">
<td>{{info.name}}</td>
<td *ngFor="let info2 of info.cars;"> //I want to loop through and get the type value of cars
<td>{{info2.type}}</td>
</td>
<td><button type="button" (click)="showDetail()">View</button></td>
</tr>
//...
Some object has cars, how to I get the type value in the table? Another area I would need help is, how to show the "type" value (for object that has cars attribute) on a input field when "View" button is clicked. Below is my .ts file where I need to grab the type value:
comp.ts
//....
information = [];
carsType= {}; to hold type value for objects that has it
showDetail(data: any) {
this.formData.controls.name.setValue( data.name );
// how do I get cars "type" value for each object
}
Try like this:
Working Demo
<table border="1">
<tr *ngFor="let info of information;">
<td>{{info.name}}</td>
<td>{{info.cars?.type}}</td>
<td><button type="button" (click)="carType = info.cars?.type">View</button></td>
</tr>
</table>
<input type="text" [(ngModel)]="carType"/>
Try this
<tr *ngFor="let info of information;">
<td>{{info.name}}</td>
<td>{{info?.cars?.type}}</td>
<td><button type="button" (click)="showDetail()">View</button></td>
</tr>
I'm working on a chemicals database web application. Using DataTables 1.10.16 and CakePHP 3.5
Cake is producing a JSON feed. A sample is below:
[
{
"id": 1,
"app_id": "ID000001",
"name": "Chromium",
"ecs": [
{
"id": 1,
"value": "123-456-7"
},
{
"id": 32,
"value": "222-333-444"
},
],
"cas": [
{
"id": 1,
"value": "987-654-3"
}
]
},
]
For certain chemicals there are multiple EC (ecs in the JSON) and CAS Numbers (cas in the JSON).
I don't know if/how it's possible to get DataTables to loop through these objects, outputting them in the appropriate columns, with a separator such as a <br> tag.
My table markup looks like this:
<table id="substancesTable" class="table responsive display table-striped" cellspacing="0" width="100%">
<thead>
<tr>
<th>Application ID</th>
<th>EC Number</th>
<th>CAS Number</th>
<th>Chemical Name</th>
</tr>
</thead>
</table>
And in my Javascript I'm doing this:
$('#substancesTable').DataTable({
"processing": true,
"serverSide": true,
"searching": false,
"ajax": {
"url" : "/get-substances.json",
"method" : "POST",
"dataSrc":""
},
"columns": [
{ "data": "app_id", "name" : "app_id" },
{ "data": "ecs", "name" : "ec_number" },
{ "data": "cas", "name" : "cas_number" },
{ "data": "name", "name" : "name" },
]
});
This works in terms of populating the "Application ID" and "Chemical Name" columns - but that's because there is a simple 1:1 mapping in the JSON (no arrays/objects).
The output for the "EC Number" and "CAS Number" columns is just [object Object] and is repeated the number of objects there are. In the example above there are 2 EC Numbers for this chemical so the output under "EC Number" is [object Object],[object Object]
Can anyone assist with this? I'd like the output to be generated by looping through my JSON and introducing a break between each item, e.g.
123-456-7<br>222-333-444
You'll be needing a render function like this:
{
"data": "ecs",
"name": "ec_number",
"title":"EC Number",
"render": function(d,t,r){
return d.map(function(e) {
return e.value;
}).join("<br/>");
}
}
Working JSFiddle here.
i wanna display a field in array at table .. how can i access SubjectCode in my Json Response using angular 4 ? .. My code give me error [Error trying to diff '[object Object]'. Only arrays and iterables are allowed]
Json Response :
{
"$id": "1",
"Council_ID": 88,
"place": "bla bla",
"number": "45",
"type": 1,
"date": "2017-11-08T00:00:00",
"time": "04:51",
"user_Id": 15,
"subjects": [
{
"$id": "2",
"subjectCode": "45",
"type": 1,
"faculty": "medicine",
"branch": "اسكندرية",
"gender": true
}
],
"absence": []
}
meeting.component.html:
<table class="table table-hover table-condensed text-center">
<tbody>
<tr *ngFor="let subject of subjectsWithID">
<td > {{subject.subjects.subjectCode}} </td>
</tr>
</tbody>
</table>
meeting.component.ts:
this.dataStorageService.getCouncilId(this.meetingID).subscribe(response => {
this.subjectsWithID = response.json();
console.log(this.subjectsWithID, 'all Json Resopnse Here')
});
You should use ngFor over subjects, code should be,
<tr *ngFor="let subject of subjectsWithID.subjects">
<td > {{subject.subjectCode}} </td>
</tr>
Your subjects property is an array. If you want to display it, then you should do
{{subject.subjects[0].subjectCode}}
Here is my json file.
{
"countries":[
{
"country": "India",
"cities" : [{
"name": "Bangalore",
"rank": "40"
},
{ "name": "Mumbai",
"rank": "32"
},
{ "name": "Kolkata",
"rank": "54"
},
{ "name": "Chennai",
"rank": "42"
}]
},
{ "country": "China",
"cities":[{"name": "Guangzhou",
"rank": "111"
},
{ "name": "Fuzhou",
"rank": "21"
},
{ "name": "Beijing",
"rank": "90"
},
{ "name": "Baotou",
"rank": "23"
}]
}
]}
I want to show all the name and rank of all the cities in the html table,
but I am unable to do this.
Angular js code is:
app.controller('cityCtrl1', function($scope, $http){
$http.get("http://localhost:8080/Angular%20Examples/angularCountries/app/json/countriesToCities1.json").success(function(data){
$scope.cities = data.countries;
});
});
Html code is:
<tr ng-repeat="city in cities | filter: selectName1">
<div ng-repeat="details in city.cities">
<td> {{details.name}} </td>
<td> {{details.rank}}</td>
</div>
</tr>
Might be I could change the code in controller file for getting the data, but not sure that will work or not.
First thing div inside a tr is not allowed(not working also) - Check this <div> into a <tr>: is it correct?
So I have change format -
<ul class="table" ng-repeat="country in cities.countries">
<li class="city-row" ng-repeat="city in country.cities">
<span class="city-name">{{city.name}}</span>
<span class="city-count">{{city.rank}}</span>
</li>
</ul>
I have created working example - http://plnkr.co/edit/1GTqNPcfigd9XRaAy0vg
Apply your own CSS to display it in table format.
what you are trying to do is,to refer city.states but where as states is not an object of json..change it to city.cities
<tr ng-repeat="city in cities | filter: selectName1">
<div ng-repeat="details in city.cities">
<td> {{details.name}} </td>
<td> {{details.rank}}</td>
</div>
</tr>