I have JSON structure like below:
const villages =
{
"lossesOccured":
[
{
"type": "destroyed",
"affectedOn": "humans",
"quantity": 120,
"reliefFund": 100000,
"location": {
"district": "thanjavur",
"villageName": "madukkur",
"pincode": "614903"
}
},
{
"type": "physicalDamage",
"affectedOn": "humans",
"quantity": 250,
"reliefFund": 50000,
"location": {
"district": "thanjavur",
"villageName": "madukkur",
"pincode": "614903"
}
},
]
}
I need help in displaying the JSON data in the form of table like below Using React. Also, need the table row to be added automatically whenever a new element is added in JSON.
<table>
<thead>
<tr>
<th>AffectedOn</th>
<th>Type</th>
<th>Quantity</th>
</tr>
</thead>
<tbody>
{
villages.lossesOccured.map(loss => (
<tr>
<td>{loss.affectedOn}</td>
<td>{loss.type}</td>
<td>{loss.quantity}</td>
</tr>
)
}
</tbody>
</table>
Related
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}}
I have a JSON array like this:
[
{
"students": {
"Student1": {
"number": "15",
"books": {
"Mystery": [
"Book1",
"Book2"
]
}
},
"Student2": {
"number": "12",
"books": {
"Romance": [
"Book1"
],
"Adventure": [
"Book1",
"Book2"
]
}
},
"Student3": {
"number": "116",
"books": {
}
}
},
"class": "7th Grade",
"school": "High School 1"
}
]
I want to display this data as a table on an Angular1 page in the following manner:
How can I make it so that the columns resize with each other, and how can I have nested ng-repeats as needed?
I tried to have nested tables inside the student, student-number, and books columns, and a table within the table in the books column, but the alignment was always off, and I couldn't get a default value of "No Books" to show up if the "books" field was empty.
Here's a Plunkr of what I've tried so far.
One of possible solutions is to combine several tables(based on $scope.base, $scope.students, $scope.books arrays, that calculated in controller) into one virtual, desired table via float:left(to ensure they located in one row). Docking of rows is provided by setting of their style:height, which depends on number of their children. Direct solution will be very complicated due to complicated html markup of table with rowspan attributes. Also I added second item(items.push(items[0])), to demonstrate, that solution works at case of several items.
angular.module('app', [])
.controller('MyController', ['$scope', function($scope) {
var items = [
{
"students": {
"Student1": {
"number": "15",
"books": {
"Mystery": [
"Book1",
"Book2"
]
}
},
"Student2": {
"number": "12",
"books": {
"Romance": [
"Book1"
],
"Adventure": [
"Book1",
"Book2"
]
}
},
"Student3": {
"number": "116",
"books": {
}
},
"class": "7th Grade",
"school": "High School 1"
}
}
];
items.push(items[0]);
$scope.base = [];
$scope.students = [];
$scope.books = [];
for(var item of items){
var temp = $scope.books.length;
for(var student in item.students){
if(['class', 'school'].indexOf(student) == -1){
var studentV = item.students[student];
$scope.students.push({name:student, number: studentV.number, w: Object.keys(studentV.books).length || 1});
for(var book in studentV.books)
$scope.books.push((book + ':' + JSON.stringify(studentV.books[book])).replace(/"/g, ''));
if(Object.keys(studentV.books).length == 0)
$scope.books.push('No books');
}
}
$scope.base.push({cl: item.students.class, school: item.students.school, w: $scope.books.length - temp});
}
}]);
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
table.left, table.left th, table.left td {
border-right: 0px
}
tr {
text-align:center
}
<script src="//code.angularjs.org/snapshot/angular.min.js"></script>
<div ng-app='app' ng-controller="MyController">
<table style='float:left;border-right:0' class='left'>
<thead>
<tr>
<th>School</th>
<th>Class</th>
</tr>
</thead>
<tbody>
<tr ng-repeat='item in base' style='height:{{item.w*30}}px'>
<td>{{item.school}}</td>
<td>{{item.cl}}</td>
</tr>
</tbody>
</table>
<table style='float:left' class='left'>
<thead>
<tr>
<th>Student</th>
<th>Student-number</th>
</tr>
</thead>
<tbody>
<tr ng-repeat='item in students' style='height:{{item.w*30}}px'>
<td>{{item.name}}</td>
<td>{{item.number}}</td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th>Books</th>
</tr>
</thead>
<tbody>
<tr ng-repeat='item in books track by $index' style='height:30px'>
<td>{{item}}</td>
</tr>
</tbody>
</table>
</div>
I chose to create hidden nested tables to show more information upon click.
I have a REST service, which returns this object:
[
{
"id": 100,
"value": "2452"
},
{
"id": 100,
"value": "2458"
},
{
"id": 1,
"value": "2457"
},
{
"id": 1,
"value": "2459"
},
{
"id": 4,
"value": "2460"
},
{
"id": 5,
"value": "3458"
}
]
Now, using this GET service, I want the following table to be built in angular and show it in UI.
100 1 4 5
-------------------
2452 2457 2460 3458
2458 2459
i.e. the unique ids should create the header and the list of values associates to each header value will be appended to respective column.
I have tried something with ng-repeat like this:
<table border="1">
<tr>
<th ng-repeat="column in cols">{{column.id}}</th>
</tr>
<tr>
<td ng-repeat="column in cols">
<md-list>
<md-list-item class="md-2-line" ng-repeat="val in column.values">
<md-checkbox ng-model="item.done"></md-checkbox>
<div class="md-list-item-text">
??
</div>
</md-list-item>
</md-list>
</td>
</tr>
But still wondering how to do the same? Please help.
Try use groupBy filter.
var app = angular.module('anApp', ['angular.filter']);
app.controller('aCtrl', function($scope) {
$scope.data = [
{
"id": 100,
"value": "2452"
},
{
"id": 100,
"value": "2458"
},
{
"id": 1,
"value": "2457"
},
{
"id": 1,
"value": "2459"
},
{
"id": 4,
"value": "2460"
},
{
"id": 5,
"value": "3458"
}
];
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-filter/0.4.7/angular-filter.js"></script>
<div ng-app="anApp" ng-controller="aCtrl">
<table border="1">
<tr>
<th ng-repeat="col in data | groupBy: 'id'">{{col[0].id}}</th>
</tr>
<tbody>
<tr>
<td ng-repeat="col in data | groupBy: 'id'">
<table>
<tr ng-repeat="c in col">
<td> {{c.value}}</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</div>
{
"imports": {
"imported": [
{
"date": "19/9/2014",
"item": [
{
"sn": "3366698",
"type": "Food",
"weight": "10tn."
},
{
"sn": "3366699",
"type": "Eqipment",
"weight": "20kg."
}
]
},
{
"date": "20/9/2014",
"item": [
{
"sn": "3366700",
"type": "Electronics",
"weight": "100pt."
},
{
"sn": "3366701",
"type": "Food",
"weight": "5tn."
}
]
}
]
}
}
I have this json and I am not sure if it's in the right structure. I am trying to render each item type (duplicates included) as table header by the following $.getJSON method:
$scope.items = data.imports.item;
and HTML as:
<table border="1" >
<thead>
<tr>
<th ng-repeat="item in items">{{item.type}}</th>
</tr>
</thead>
</table>
But I couldn't succeed. What am I doing wrong?
EDIT: jsfiddler
I don't see you are using the imported propery at all, try
$scope.items = data.imports.imported;
since imported is your array and not item.
<table border="1" >
<thead>
<tr>
<th ng-repeat="item in items">{{item.type}}</th>
</tr>
</thead>
</table>
Your json ist broken, paste your json here:
http://jsonformatter.curiousconcept.com/
You'll see that data.imports.item would be undefined.
Correct JSON to access would look like:
{
"imports": {
"item": [
{
"sn": "3366698",
"type": "Food",
"weight": "10tn."
},
{
"sn": "3366699",
"type": "Eqipment",
"weight": "20kg."
}
]
}
}
Also access your data after:
<th ng-repeat="item in items">
{{item["type"]}}
</th>
I have an angular app where i am trying to create a table from a json. My json is as follows:
[
{
"campus_id": "321",
"name": "0"
},
{
"campus_id": "231",
"name": "1"
},
{
"campus_id": "123",
"name": "2"
}
]
Generally we will create a table in the html as follows:
<table class="table table-striped">
<tr>
<th>
Campus id
</th>
<th>
Name
</th>
</tr>
<tr ng-repeat="item in items">
<td >
{{item.campus_id}}
</td>
<td >
{{item.name}}
</td>
</tr>
</table>
How do i create even the headers from the json instead of defining them ourselves?
I would add the column headers within the json result like so
columnDefs: [
{field: 'campus_id', displayName: 'Campus ID'},
{field: 'name', displayName: 'Name'}],
data:
[
{
"campus_id": "57911000",
"name": "0"
},
{
"campus_id": "57911001",
"name": "HIGHLAND PARK HIGH SCHOOL"
},
{
"campus_id": "57911007",
"name": "P A S S Learning Center School"
}
]
otherwise you could use the key, value pairing ng-repeat="(key,value) in items" with a filter to return 1 row and then use {{key}}