Table with full month view with ng-repeat? - javascript

wanted to create a table just like this
(ignore the styling). i got confuse how to formate the data to make this table in html.
$scope.toddlers = [
{
"name": "a",
"day": 1,
"total": 3
},
{
"name": "b",
"day": 2,
"total": 4
},
{
"name": "c",
"day": 4,
"total": 1
}
];
i think i need to change my data format or something i just can't make this table right. how should i format my data to give this result.
FYI: i am getting my data by using mongodb aggregate.
plunker link

This snippet can produce the layout which you're desiring of:
<table border="1">
<tr>
<th></th>
<th ng-repeat="day in days">{{day}}</th>
</tr>
<tr ng-repeat="toddler in toddlers">
<td>{{toddler.name}}</td>
<td ng-repeat="day in days">
<span ng-if="toddler.day === day">{{toddler.total}}</span>
<span ng-if="toddler.day !== day">0</span>
</td>
</tr>
</table>
It first repeats the days in th, with one extra th before all of days. Then if current toddler's day matches the current day, it shows toddler.total, otherwise 0 using ng-if directive.

Related

Array of objects to table rows and columns

is there any javascript library available to convert the nested array of object to table rows and columns...
sample data..
[
{
"headerName": "Product"
},
{
"headerName": "Sale Rate",
"children": [
{
"headerName": "Sales",
"children": [
{
"headerName": "Last Year Sale"
},
{
"headerName": "This Year Sale"
}
]
},
{
"headerName": "Profits",
"children": [
{
"headerName": "Last Year Profit"
},
{
"headerName": "This Year Profit"
}
]
}
]
}
]
need to build the below table structure(row, column along with row and col span) from the data
<table>
<tr>
<th rowspan="3">Product</th>
<th colspan="4">Sale Rate</th>
</tr>
<tr>
<th colspan="2">Sales</th>
<th colspan="2">Profits</th>
</tr>
<tr>
<th>Last Year Sale</th>
<th>This Year Sale </th>
<th>Last Year Profit</th>
<th>This Year Profit</th>
</tr>
</table>
what i tried so far
https://codesandbox.io/s/modest-booth-inhzvm
struggling to get the column and row span from data
I don't know if there is a library that does this.
I looked at your example code and you might be able to use it with slight modifications.
When you are parsing your data check if you have sub level data and if so then create a nested table. Call your original function on the nested data.
Here is an example you will have to adapt it to your use case:
function walkDownTree(data, callback, value = null) {
callback(data, value);
if (data.children.length) {
var items = data.children;
for (var i=0;i<items.length;i++) {
let item = items[i];
walkDownTree(item, callback, value);
}
}
}
function logItems(item) {
console.log(item.nodeName)
}
var results = walkDownTree(data, logItems);
The third parameter is an optional parameter sometimes used to keep track of state data.
walkDownTree(document.body, logItems, count++);

how to give fixed table rows using typescript

I am using table for showing the datas and for data I am using Api.
Api data looks like::
{
"data": [
{
"id": "1",
"name": "name1",
"label": "label1"
},
{
"id": "2",
"name": "name2",
"label": "label2"
},
{
"id": "3",
"name": "name3",
"label": "label3"
}
]
}
html code
<table class="table table-striped">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Label</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let data of sample;">
<td>{{data.id}}</td>
<td>{{data.name}}</td>
<td>{{data.label}}</td>
<tr>
<tbody>
<table>
I need the 10 table rows statically(fixed). The table data is from API. For exanple ,Api contains 2 data... Then UI table should be with 2 rows of data and balance with emply rows... but there should display 10 rows(Mandatory)
which means in UI i want 10 rows with data from Api and balance should be empty.
You can fix in view layer, ts layer or even backend API layer (Not really recommended).
In view layer if you loop over your data, you can calculate if your data's size goes over arbitrary threshold and if not loop again to display as many empty rows as possible.
In ts layer, when you receive data from api you can modify variable you pass to your view by adding to an array as many empty items as you need.
What's important if you use null, then you have to check for it with for example elvis operator.
I would advise agains adding to an array an object with all properties set to null, because then these are not so easily distinguishable from valid data from API and you can for instance make some rows interactive, even though they should not be.
const dataFromApi = [{ "id": "1", "name": "name1" }, { "id": "2", "name": "name2" }]
const minRowsNumber = 10;
const diff = minRowsNumber - dataFromApi.length;
const viewTableData = diff > 0 ? dataFromApi.concat(new Array(diff).fill(null)) : dataFromApi;
console.log(viewTableData)
Example in AngularJs (No Angular in SO Snippets, but it is the same principle)
angular.module('example', [])
.controller('ExampleController', function ExampleController() {
const dataFromApi = [{ "id": "1", "name": "name1" }, { "id": "2", "name": "name2" }]
const minRowsNumber = 10;
const diff = minRowsNumber - dataFromApi.length;
this.viewTableData = diff > 0 ? dataFromApi.concat(new Array(diff).fill(null)) : dataFromApi;
});
table {
border-collapse: collapse;
}
td, th {
border: 1px solid black
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="example" ng-controller="ExampleController as example">
<table>
<thead>
<tr>
<th>Id</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in example.viewTableData track by $index">
<td>{{row ? row.id : ' '}}</td>
<td>{{row ? row.name : ' '}}</td>
</tr>
</tbody>
</table>
</div>

Mapping table data 2D array

I have a slightly strange problem that i cant solve. I have to render a table using react - however my data structure is such that i need the name from the first level to be the table headings - I then need to map the data associated to that heading into the correct cells in the table.
Here is my data
[{
"cell_id": 1,
"step_data": [{
"width": 1920,
"name": "bruce",
}, {
"width": 2236,
"name": "ben",
}],
"cell_name": " boys names"
},
{
"cell_id": 2,
"step_data": [{
"width": 1920,
"name": "grace",
}, {
"width": 2236,
"name": "megan",
}],
"cell_name": "girls names"
}
To map the table headings i do this which dynamically renders the headings however I cant seem to put the data under the correct headings as they all go on the same row.
Any ideas how i do this?
My desired task is to have a table with two headings boys names and girls names - I need the step_data from boys names to be rows under the boys name heading and the step data from girls names to be under the girls names heading
<table className="table">
<tbody>
<tr>
{this.props.data.map((item, key) => <th key={key}>{item.cell_name}</th>
)}
</tr>
{this.props.data.map(data => data.map((z, key) => <td key={key}>{z.name}</td>))}
<tr>
</tr>
</tbody>
</table>
{[
...Array( // get the number of rows you need to create
Math.max(...this.props.data.map(({ step_data }) => step_data.length))
).keys()
].map(i => (
<tr key={i}>
{this.props.data.map(({ step_data, cell_name }) => (
<td key={cell_name}>{(step_data[i] || {}).name}</td>
))}
</tr>
))}

Looping over two arrays for each row in a table

I have the following set of json
[
{
"drink_name": "Ananascocktail",
"ingredients": [
"Ananas",
"Färskpressad limesaft",
"Apelsinjuice",
"Farinsocker",
"Rom"
],
"alternatives": [
"",
"Limesaft",
"",
"Socker",
null
]
},
{
"drink_name": "Blå Pilthammer",
"ingredients": [
"Blåbärsvodka",
"Apelsinjuice",
"Bonaqua Citron"
],
"alternatives": [
"Vodka",
"",
""
]
}
]
How do I loop over the ingredients and alternatives to place each element in separate <td>'s on the same <tr>?
I've tried putting a ng-repeat on the row, but that makes a new row for each element.
I must, however, use a ng-repeat on the <tr> since I have multiple ingredients/alternatives.
I've googled around for over an hour but can't find anything that quite fit my needs.
Any suggestions?
I solved it by doing the following
<tbody>
<tr ng-repeat="ingredient in json.ingredients">
<td>{{ingredient}}</td>
<td ng-repeat="alternative in json.alternatives track by $index" ng-if="$parent.$index === $index">{{alternative}}</td>
</tr>
</tbody>
I only allow alternatives to place a <td> if its $index is the same as its $parent's $index. Why that solved it is beyond me

Knockout table bindings with an object

I have a javascript object that I want to bind to a table using KnockoutJS
Here's my object:
var data = {
"Warnings": {
"numbers": 30,
"content": [
{
"number" : 3001,
"description" : "There may be a problem with the device you are using if you use the default profile"
},
{
"number" : 3002,
"description" : "There may be a problem with the device you are using if you don't use the default profile"
}
]
},
"Errors": {
"numbers": 20,
"content": [
{
"number": 1000,
"description": "No network is loaded"
},
{
"number": 1000,
"description": "No network is loaded"
}
]
}
};
ko.applyBindings(data);
Here's my html code:
<table class="table table-hover">
<thead>
<tr>
<th style="width:100px">Numero</th>
<th>Description</th>
</tr>
</thead>
<tbody data-bind="foreach: Warnings.content">
<tr data-bind="foreach: $data">
<td data-bind="text: $data.number"></td>
<td data-bind="text: $data.description"></td>
</tr>
</tbody>
</table>
Here's a JSFiddle: http://jsfiddle.net/etiennenoel/KmKEB/
I really need to use this format for my data Object.
I don't know why I'm not having the Warnings listed in a table since I'm not getting any errors...
You have an extra foreach that is not needed. Simply remove the foreach on your tr. The foreach on your tbody will assign a new value for $data for each tr that is rendered in the loop.

Categories