I am trying to create a datagrid - or lets call it a table in angular2 using a JSON object to create it. The problem I have is that I dont know how many columns will be in table nor do I know the names or those columns.
From my current understanding i need to define what a row looks like in order to render the cells, but if I dont know what the columns are called then I cant render the row!
Maybe an example will make things more clear...
Below are two examples of JSON that I will need to render in the same table...
Example 1
{
"table": {
"columns": {
"column": [
{
"-articleColumn": "articleCode",
"-label": "Article Code ",
"-fCode": "f9",
"-value": "column1"
},
{
"-articleColumn": "Article.trend",
"-label": "Trend ",
"-fCode": "f25",
"-value": "column2"
}
]
},
"rows": {
"row": [
{
"column1": "articleCode",
"column2": "Avg"
},
{
"column1": "151110103",
"column2": "100"
},
{
"column1": "151110109",
"column2": "101"
},
{
"column1": "151110111",
"column2": "102"
},
{
"column1": "151110117",
"column2": "103"
}
]
}
}
}
Example 2
{
"table": {
"columns": {
"column": [
{
"-articleColumn": "articleCode",
"-label": "Article Code ",
"-fCode": "f9",
"-value": "column1"
},
{
"-articleColumn": "Article.trend",
"-label": "Trend ",
"-fCode": "f25",
"-value": "column2"
}
{
"-averageDemand": "Article.averageDemand",
"-label": "Average Demand ",
"-fCode": "f564",
"-value": "column3"
},
{
"-warehouse": "Article.warehouse",
"-label": "Warehouse ",
"-fCode": "f295",
"-value": "column4"
}
]
},
"rows": {
"row": [
{
"column1": "151110103",
"column2": "100"
"column3": "500"
"column4": "TOT"
},
{
"column1": "151110109",
"column2": "101"
"column3": "46"
"column4": "TOT"
},
{
"column1": "151110111",
"column2": "102"
"column3": "16"
"column4": "SEL"
},
{
"column1": "151110117",
"column2": "103"
"column3": "112"
"column4": "SEL"
}
]
}
}
}
Here are my Components...
The Table:
<table class="mdl-data-table mdl-js-data-table mdl-shadow--2dp">
<tbody>
<app-field-mapping-row [rowData]="row" *ngFor="let row of rows"></app-field-mapping-row>
</tbody>
</table>
app-field-mapping-row:
NOTE This is where I get stuck!
<tr>
<td class="mdl-data-table__cell--non-numeric" *ngFor="let cell of rowData" >
{{cell}}
</td>
</tr>
How can I create the correct number of cells and how do I loop through the children of the rows when each one is named differently... If all children were called cell then I would have an array to use, but I wont know what they are called.
I haven't been able to find any method to turn the 'children' of a JSON node into and array...
eg. *ngFor="let cell of rowData.children()"
Help as always is greatly appreciated.
Here is how i have done it in AngularJS, but you will get the point.
Your second JSON is missing a lot of comma's
This is my view:
<table class="table table-striped table-hover display" style="cellspacing:0;width:100%">
<thead>
<tr>
<th ng-repeat="columns in tableData.table.columns.column">
{{columns.label}}
</th>
</tr>
</thead>
<tbody >
<tr ng-repeat="row in tableData.table.rows.row">
<td ng-repeat="(key,val) in row">{{val}}</td>
</tr>
</tbody>
</table>
This is your JSON, with me just removing - in label , and fixing JSON format
{
"table": {
"columns": {
"column": [
{
"-articleColumn": "articleCode",
"label": "Article Code ",
"-fCode": "f9",
"-value": "column1"
},
{
"-articleColumn": "Article.trend",
"label": "Trend ",
"-fCode": "f25",
"-value": "column2"
},
{
"-averageDemand": "Article.averageDemand",
"label": "Average Demand ",
"-fCode": "f564",
"-value": "column3"
},
{
"-warehouse": "Article.warehouse",
"label": "Warehouse ",
"-fCode": "f295",
"-value": "column4"
}
]
},
"rows": {
"row": [
{
"column1": "151110103",
"column2": "100",
"column3": "500",
"column4": "TOT"
},
{
"column1": "151110109",
"column2": "101",
"column3": "46",
"column4": "TOT"
},
{
"column1": "151110111",
"column2": "102",
"column3": "16",
"column4": "SEL"
},
{
"column1": "151110117",
"column2": "103",
"column3": "112",
"column4": "SEL"
}
]
}
}
}
So let me explain, for thead , i am just repeating columns and placing labels, while in rows , i am first repeating ROWS , and then inside repeating columns , by returning val and key.
jsFiddle:
http://jsfiddle.net/noitse/Lvc0u55v/9487/
Related
I have an elastic search index
like
{
"title": "A",
"comments": [
{
"id": "1"
},
{
"id": "2"
}
]
},
{
"title": "B",
"comments": [
{
"id": "1"
},
{
"id": "3"
}
]
},
{
"title": "C",
"comments": [
{
"id": "7"
},
{
"id": "3"
}
]
}
I want to collapse is the group by the nested object. In the above JSON, I want to group it by Id.
So the output will be like
hits:[{
"title": "A",
"comments": [
{
"id": "1"
},
{
"id": "2"
}
]
},
inner_hits {[
{
"title": "A",
"comments": [
{
"id": "1"
},
{
"id": "2"
}
]
},
{
"title": "B",
"comments": [
{
"id": "1"
},
{
"id": "3"
}
]
}
]}
}]
Baiscally I need collapse bases on the nested object property.
Tried this
/_search?track_total_hits=true
{
"collapse": {
"field": "comments.id",
"inner_hits": {
"name": "id",
"size": 10
},
"max_concurrent_group_searches": 3
}
}
But its always returing first object only in the inner hits
Within the mapping of the object comments , you should remove the nested type.
I have an array of JSON objects formatted as follows:
[
{
"id": 1,
"names": [
{
"name": "Bulbasaur",
"language": {
"name": "en",
"url": "http://myserver.com:8000/api/v2/language/9/"
}
},
],
},
{
"id": 1,
"types": [
{
"slot": 1,
"type": {
"name": "grass",
"url": "http://myserver.com:8000/api/v2/type/12/"
}
},
{
"slot": 2,
"type": {
"name": "poison",
"url": "http://myserver.com:8000/api/v2/type/4/"
}
}
]
},
{
"id": 2,
"names": [
{
"name": "Ivysaur",
"language": {
"name": "en",
"url": "http://myserver.com:8000/api/v2/language/9/"
}
},
],
},
{
"id": 2,
"types": [
{
"slot": 1,
"type": {
"name": "ice",
"url": "http://myserver.com:8000/api/v2/type/10/"
}
},
{
"slot": 2,
"type": {
"name": "electric",
"url": "http://myserver.com:8000/api/v2/type/8/"
}
}
]
},
{
"id": 3,
"names": [
{
"name": "Venusaur",
"language": {
"name": "en",
"url": "http://myserver.com:8000/api/v2/language/9/"
}
},
],
},
{
"id": 3,
"types": [
{
"slot": 1,
"type": {
"name": "ground",
"url": "http://myserver.com:8000/api/v2/type/2/"
}
},
{
"slot": 2,
"type": {
"name": "rock",
"url": "http://myserver.com:8000/api/v2/type/3/"
}
}
]
}
]
Note that these are pairs of separate objects that appear sequentially in a JSON array, with each pair sharing an id field. This pattern repeats several hundred times in the array. What I need to accomplish is to "merge" each id-sharing pair into one object. So, the resultant output would be
[
{
"id": 1,
"names": [
{
"name": "Bulbasaur",
"language": {
"name": "en",
"url": "http://myserver.com:8000/api/v2/language/9/"
}
},
],
"types": [
{
"slot": 1,
"type": {
"name": "grass",
"url": "http://myserver.com:8000/api/v2/type/12/"
}
},
{
"slot": 2,
"type": {
"name": "poison",
"url": "http://myserver.com:8000/api/v2/type/4/"
}
}
]
},
{
"id": 2,
"names": [
{
"name": "Ivysaur",
"language": {
"name": "en",
"url": "http://myserver.com:8000/api/v2/language/9/"
}
},
],
"types": [
{
"slot": 1,
"type": {
"name": "ice",
"url": "http://myserver.com:8000/api/v2/type/10/"
}
},
{
"slot": 2,
"type": {
"name": "electric",
"url": "http://myserver.com:8000/api/v2/type/8/"
}
}
]
},
{
"id": 3,
"names": [
{
"name": "Venusaur",
"language": {
"name": "en",
"url": "http://myserver.com:8000/api/v2/language/9/"
}
},
],
"types": [
{
"slot": 1,
"type": {
"name": "ground",
"url": "http://myserver.com:8000/api/v2/type/2/"
}
},
{
"slot": 2,
"type": {
"name": "rock",
"url": "http://myserver.com:8000/api/v2/type/3/"
}
}
]
}
]
I've gotten these objects to appear next to each other via the group_by(.id) command, but I'm at a loss as to how I should actually combine them. I'm very much still a novice with jq so I'm a bit overwhelmed with the amount of possible solutions.
[Note: The following assumes that the data shown in the Q have been corrected so that they are valid JSON.]
The merging you want can be achieved by object addition (x + y). For example, given the two JSON objects as shown in the question (i.e., as a stream), you could write:
jq -s '.[0] + .[1]'
However, since the question also indicates these objects are actually in an array, let's next consider the case of an array with two objects. In that case, you could simply write:
jq add
Finally, if you have an array of arrays each of which is an array of objects, you could use map(add). Since you don't have a very large array, you could simply write:
group_by(.id) | map(add)
Please note that jq defines object addition in a non-commutative way. Specifically, there is a bias towards the right-most key.
I have a table which shows the below data in the grid.Each value have a column in the table.I displayed all data by calling the api. I dont know how to display the currencies code,name,symbol,languages in the table.Can anyone help me to sort this out?
[
{
"name": "Afghanistan",
"topLevelDomain": [
".af"
],
"currencies": [
{
"code": "AFN",
"name": "Afghan afghani",
"symbol": "؋"
}
],
"languages": [
{
"iso639_1": "ps",
"iso639_2": "pus",
"name": "Pashto",
"nativeName": "پښتو"
},
{
"iso639_1": "uz",
"iso639_2": "uzb",
"name": "Uzbek",
"nativeName": "Oʻzbek"
},
{
"iso639_1": "tk",
"iso639_2": "tuk",
"name": "Turkmen",
"nativeName": "Türkmen"
}
],
"translations": {
"de": "Afghanistan",
"es": "Afganistán",
"fr": "Afghanistan"
}
}
}]
You can just do like:
<table>
<tr>
<td>{{data.name}}</td>
<td>
<span *ngFor="let item of data.currencies">
Code: {{item.code}}
Name: {{item.name}}
Symbol: {{item.symbol}}
</span>
</td>
</tr>
data is the item of your json.
Am having the following JSON data in my hand, I need to create a table, but the data is dynamic(both row header and column header & cell values).
JSON structure as follows,
{
"data": {
"vertical_header": [
"football",
"hockey"
],
"horizontal_header": [
"China",
"Brazil",
"Australia"
],
"researchDetails": [
{
"country": "brazil",
"game": "hockey",
"player": "Mr.r"
},
{
"country": "china",
"game": "hockey",
"player": "Mr.X"
},
{
"country": "china",
"game": "football",
"player": "Mr.Y"
},
{
"country": "china",
"game": "football",
"player": "Mr.Z"
},
{
"country": "brazil",
"game": "football",
"player": "Mr.M"
},
{
"country": "brazil",
"game": "football",
"player": "Mr.E"
}
]
}
}
The following is the table structure, I have to parse such JSON to construct a dynamic table like this using handlebars template. The headers are also dynamic, I have to create an array (2D/3D) so that I can construct the following,
<html>
</body>
<table border="1">
<tr><th/><th>hockey</th><th>football</th></tr>
<tr><td rowspan="2">china</td><td>Mr.X</td><td>Mr.Y</td></tr>
<tr><td></td><td>Mr.Z</td></tr>
<tr><td rowspan="2">brazil</td><td>Mr.r</td><td>Mr.M</td></tr>
<tr><td ></td><td>Mr.e</td></tr>
<tr><td>Australia</td><td></td><td/></tr>
</table>
</body>
</html
I have a JSON document like
{
"branch": [
{
"section": [
{
"sub": "edc",
"time": "one hour",
"frequency": "3"
},
{
"sub": "bee",
"time": "two hours",
"frequency": "4"
}
]
},
{
"section": [
{
"sub": "ss",
"time": "one hour",
"frequency": "2"
},
{
"sub": "ms",
"time": "two hours",
"frequency": "5"
}
]
}
]
}
Now I want to delete
{
"sub": "edc",
"time": "one hour",
"frequency": "3"
}
using "sub":"edc" from the following collection
I want the query to perform changes in mongo db
You need to use $pull, although i've not done it with nested array.
See http://docs.mongodb.org/manual/reference/operator/pull/
Something like: (but you'll need to test it)
db.yourcoll.update( { "branch.section.sub": 'edu' }, { $pull: { "branch.section.sub": 'edu' } } )
This is a similar question:
How to remove an element from a doubly-nested array in a MongoDB document