Angular 4 Tree Grid/Tabular Data with Radio Button selection - json

I am working on a Angular 4 code where i need to create a table/grid structure UI with expanded selection and every item has radio button.
Below is the Exact UI which i want
example
and I also have below format input data in my Json file
{
"Id": 1,
"Name": "India",
"Description": "India",
"ParentId": 0,
"SubGroup": [
{
"Id": 2,
"Name": "Mumbai",
"Description": "Mumbai",
"ParentId": 1,}
]
}
Please tell me which Library i can use or how i can achieve this UI with Angular 4.

PrimeNg Tree Table Can be a good choice. Good comunity support also there.

Related

Fixing local JSON file for working with structs

I have a local json file like this
{
"scroll": [
{
"id": 0,
"titles": "1",
"course": ["first", "Second"]
},
{
"id": 1,
"titles": "2",
"course": ["Third", "Fourth"]
}
]
}
So, I want that every item of "course" has its own string parameter. For example, "Third" has "third" parameter, "Fourth" has "fourth" parameter and so on. But I don't know how to do it in json file. I want that clicking "first" button in the list it navigate to the text that is written in json, and after clicking in "Second " button it navigate to another text. Please help me to solve this problem. Thanks.

Add data to a json file using Talend

I have the following JSON:
[
{
"date": "29/11/2021",
"Name": "jack",
},
{
"date": "30/11/2021",
"Name": "Adam",
},
"date": "27/11/2021",
"Name": "james",
}
]
Using Talend, I wanna add 2 lines to have something like:
[
{
"company": "AMA",
"service": "BI",
"date": "29/11/2021",
"Name": "jack",
},
{
"company": "AMA",
"service": "BI",
"date": "30/11/2021",
"Name": "Adam",
},
"company": "AMA",
"service": "BI",
"date": "27/11/2021",
"Name": "james",
}
]
Currently, I use 3 components (tJSONDocOpen, tFixedFlowInput, tJSONDocOutput) but I can't have the right configuration of components in order to get the job done !
If you are not comfortable with json .
Just do these steps :
In the metaData just create a FileJson like this then paste it in your job as a tFileInputJson
Your job design and mapping would be
In your tFileOutputJson don't forget to change in the name of the data block "Data" with ""
What you need to do there according to the Talend practices is read your JSON. Then extract each object of it, add your properties and finally rebuild your JSON in a file.
An efficient way to do this is using tMap componenent like this.
The first tFileInputJSON will have to specify what properties it has to read from the JSON by setting your 2 objects in the mapping field.
Then the tMap will simply add 2 columns to your main stream, here is an example with hard coded string values. Depending on you needs, this component will also offer you the possibility to assign dynamic data to your 2 new columns, it's a powerful tool for manipulating the structure of a data stream.
You will find more infos about this component in the official documentation : https://help.talend.com/r/en-US/7.3/tmap/tmap; especially the "tMap scenarios" part.
Note
Instead of using the tMap, if you are comfortable with Java, you can use a tjavaRow instead. Using this, you can setup your 2 new columns with whatever java code you want to put as long as you have defined the output schema of the component.
output_row.Name = input_row.Name;
output_row.date = input_row.date;
output_row.company = "AMA";
output_row.service = "BI";

How to ensure a JSON file "id" field always stays unique in VS Code?

Working on JSON file in VS Code that is feeding big app with multiple layers that all have "ID" tag that needs to be unique or the app is broken. Multiple people are working on it and with large number of layers it is hard to keep track. Is there a way to make it appear as error or a warning to a user if there are 2 identical IDs or to make some script that will check it.
Sample code:
"layers":[
{
"id": "firstID",
"name": "name1"
},
{
"id": "secondID",
"name": "name2"
},
{
"id": "thirdID",
"name": "name3"
},
{
"id": "firstID",
"name": "name4"
}]
As seen in this code, is it possible for VS code to mark or make and error for last object as it have same "id" as first?
Thanks in advance

Unable to get data to show in Adaptive Card FactSet

I am trying to create an adaptive card with a fact set. However, I can't seem to get the actual facts to display. Even the example at https://adaptivecards.io/designer/ is not working. Instead of pulling in the data from the properties element as specified, it just shows ${key} and ${value} as the pair. You can see the output and the full JSON at the link above, but here are the relevant sections for my issue/query:
Adaptive card specification
{
"type": "FactSet",
"facts": [
{
"$data": "${properties}",
"title": "${key}:",
"value": "${value}"
}
]
}
Data object
"properties": [
{
"key": "Board",
"value": "Adaptive Cards"
},
{
"key": "List",
"value": "Backlog"
},
{
"key": "Assigned to",
"value": "Matt Hidinger"
},
{
"key": "Due date",
"value": "Not set"
}
]
As this or similar questions came up multiple times recently. You have to make sure to use the "Preview" button
Elements bound to any array in JSON are not rendered during design time or only when the specific array element is referenced with array[x].xx. Dynamically generated elements currently are only rendered in preview mode when working in the web editor version https://adaptivecards.io/designer
If you need a design time experience for array bound elements you can use Adaptive Cards Studio the Visual Studio Code Extension for card authoring.

Angular2/4 app to display forms based on JSON data using ngFor and ngIf only. Could it work?

I have to build an Angular application that has a single task: It receives JSON data that describe a form structure, e.g.:
{
"textbox": {
"type": "string",
"name": "name",
"maxlength": 30,
"description": "Full Name"
},
"textbox": {
"type": "string",
"name": "email",
"maxlength": 40,
"description": "Email"
},
"date": {
"name": "birthdate",
"description": "Birthdate"
},
"checkbox": {
"name": "subscribe",
"options": [
"Yes",
"No"
],
"default": "No",
"description": "Subscribe?"
},
"button": {
"type": "submit",
"description": "Send"
}
}
And it should display it: (All forms are different with varying elements.)
I'm relatively new to Angular and my initial approach would be to create a simple template that has an ngFor in it, and inside many ngIfs (one for text fileds, one for text area, another for radio button, and so on...) that examine for the "type" of the given form element, and if there is a match, it gets displayed with its attributes written in the JSON.
Is it a good idea to start like this, or should I first learn some more Angular to be able to come up with a more professional solution?
Are things like dynamic and reactive forms in Angular for this purpose, or which part of Angular should I have a deeper understanding in for this task?