Create a table from REST object by setting data in columnar manner - html

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>

Related

ng for multiple array angular

hello every one i have this api
[
[{
"id": 1,
"qte": 12,
"date_creation": "2020-08-17T00:00:00+02:00",
"date_update": "2020-08-17T00:00:00+02:00",
"depot": {
"id": 1,
"nom_depot": "bb"
},
"produit": {
"id": 1,
"matricule": "ff",
"prix": 12,
"libelle": "dd"
}
}],
[]
]
but when i want to display just the Qte ,the libelle of produit and nom_depot of depot like this
<tr *ngFor="let
data of
depot ;let
i= index"
(click)=addToAnotherTable(i)>
<td>
<span>{{data.depot.nom_depot}}</span>
</td>
<td>
<span>{{data.produit.libelle}}</span>
</td>
<td>
<span>{{data.qte}}</span>
</td>
</tr>
it doesn t work i don t know why pls help
You just need to use index, because as Michalis said, you have an array of arrays.
datas = [
[{
"id": 1,
"qte": 12,
"date_creation": "2020-08-17T00:00:00+02:00",
"date_update": "2020-08-17T00:00:00+02:00",
"depot": {
"id": 1,
"nom_depot": "bb"
},
"produit": {
"id": 1,
"matricule": "ff",
"prix": 12,
"libelle": "dd"
}
}],
[]
];
<table>
<tr *ngFor="let data of datas;let i= index">
<td>
<span>{{data[i]?.depot.nom_depot}}</span>
</td>
<td>
<span>{{data[i]?.produit.libelle}}</span>
</td>
<td>
<span>{{data[i]?.qte}}</span>
</td>
</tr>
</table>

Retrieve Data from JSON Data Structure in Vue.js

I want retrieve Data from meal table (json data schema) to a table form in the browser. The retrievement works but unfortunately I do not know how to retrieve the data of the weekdays from my meal table and show them in the table.
How can I retrieve Monday, Tuesday, Wednesday, Thursday and Friday???
JSON DATA SCHEMA:
// 20200901152958
// http://localhost:8080/mealtable/weekly/1
{
"id": 1,
"calendarWeek": 1,
"mealTableWeek": {
"Monday": {
"id": 4,
"name": "Burger",
"type": "fleischhaltig",
"price": 2.60
},
"Tuesday": {
"id": 3,
"name": "Reishänchenpfanne",
"type": "fleischhaltig",
"price": 2.60
},
"Wednesday": {
"id": 1,
"name": "Vollkornnudeln",
"type": "vegan",
"price": 2.30
},
"Thursday": {
"id": 5,
"name": "Kartoffelpüree",
"type": "vegetarisch",
"price": 2.30
},
"Friday": {
"id": 2,
"name": "Falafel",
"type": "vegan",
"price": 1.90
}
}
}
MealTablWeekComponent.vue:
<template>
<div class="container">
<h3>Meal Table</h3>
<div class="container">
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th>Meal</th>
<th>Type</th>
<th>Price in $</th>
</tr>
</thead>
<tbody>
<tr v-for="d in mealTables.mealTableWeek" v-bind:key="d.id">
<th></th>
<td>{{d.name}}</td>
<td>{{d.type}}</td>
<td>{{d.price}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</template>
<script>
import MealTableDataService from "#/service/MealTableDataService";
export default {
name: "MealTableWeekComponent",
data() {
return {
mealTables: {
id: " ",
mealTableWeek: {
name: {
id: " ",
name: " ",
type: " ",
price: " "
}
}
}
};
},
methods: {
refreshMealTable() {
const id = this.$route.params.id;
MealTableDataService.retrieveMealTableById(id)
.then(response => {
console.log(response)
this.mealTables = response.data;
});
}
},
created() {
this.refreshMealTable();
}
};
</script>
<style scoped lang="scss">
</style>
View in the Browser:
<tr v-for="(d, key) in mealTables.mealTableWeek" v-bind:key="d.id">
<td>{{key}}</td>
<td>{{d.name}}</td>
<td>{{d.type}}</td>
<td>{{d.price}}</td>
</tr>

How do I display data from JSON into a table in Reactjs

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>

Angular.js - Nested JSON scope with Angular

{
"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>

Creating a table header(th) and body(td) from json in angular app

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}}