I have a requirement to create a group of checkbox with lebels in a page from JSON response.
The JSON response is
{
"data": [
{
"CodeStatus": "Red"
},
{
"CodeStatus": "Orange"
},
{
"CodeStatus": "Green"
},
{
"CodeStatus": "Yellow"
}
]
}
the design is:
the box is vertically scrollable, as it can have more color codes.
Can anyone suggest how to design the above?
If one can provide the implemantation code, that would be very good as I have very time to implement it.
Create a JsonModel . use the setData() method to define its data from the json you got on the response.
Then use a VerticalLayout element and bind its content to "/data" on the model.
This will create a "line" for each element on the data attribute of your model.
Use a template for the line that is a label+checkbox where the label text is bound to "CodeStatus".
You also need a checked attribute on each entry to store the checked attribute of the checkbox.
Related
Hello Team I need to create two input fields in angular that forms a key value pair exactly like the below image, I have found a article that does the same but the output result from this fields input is not in expected format which I want.
EXPECTED OUTPUT:-
{ "details": [ { "select1-inputvalue": "select2-inputvalue" }, { "select1-inputvalue": "select2-inputvalue" } ] }
The article I found uses reactive forms to achieve this, I have tried different approach to create the output as the expected Json object but it did not work, as I am not a angular expert a help is appreciated. Also the existing fork contains a text input for me it will be a dropdown.
Existing Post:- https://keepnote.cc/code/reactive-form-key-value-pair-bootstrap-angular-4-5-6-7
StackBlitz link : StackBlitz link
Add the following logic in order to parse the key-value pairs from the form.
.ts
public display;
viewJson() {
this.display = Object.entries(this.keyValueForm.value.details).map((e) => {
return {
[e[1].key]: e[1].value,
};
});
}
.html
<button (click)="viewJson()">Click to see translated response</button>
<div>
{{ display | json }}
</div>
Forked stackblitz.
This issue is a bit tricky to describe so bear with me and please ask questions if I am missing anything...
Say you have a json object that defines a list of features, each feature has a the same three properties but has a property that has an entirely different structure. For example:
{
features: [
{
id: "feature-a",
enabled: true,
configurationData: {
featureAConfigPropertyA: {
somePrperty: "whatever",
anotherProperty: true
},
featureAConfigPropertyB: "some string"
}
},
{
id: "feature-b",
enabled: true,
configurationData: {
featureBConfigArrayPropertyA: ["some string"],
featureBConfigPropertyB: [
{
"id": "some string",
"name": "some string",
"description": "some string",
"enabled": true
}
]
}
}
]
}
The actual structure of each feature is irrelevant. I am just trying to express this via json schema whereby the structure of configurationData for each feature is dependent on or dictated by the feature id value of its parent.
EDIT: I guess technically it doesnt need to be dependent on so long as either structure of configurationData is valid schema for that property on the feature schema itself. Also, the types in configurationData arent arbitrary, they would always be one of the two types for a given feature in this example.
This however needs to be structured in a way that can be expressed via Formly as I am using this to generate forms. In this case it would be an array of ObjectFieldTypes, one for feature a and one for feature b, which would enumerate the three properties and provide Input field types, until it got to configurationData at which point it would use an ObjectFieldType again, which would now be different for each field type.
The issue here is that 1) I'm not sure how to express this in json schema and 2) I can't use things like patternProperties with formly because the properties have to be explicitly defined in the json schema in order for formly to render the field types for each property. Although patternProperties would technically be valid schema in this case, if the schema doesn't define those properties, then the model in the valueChanges observable on the FormGroup just excludes them entirely. So I would end up with:
{
features:[
{
id: "feature-a",
enabled: true,
configurationData: { }
},
{
id: "feature-b",
enabled: true,
configurationData: { }
}
]
}
I have tried the if then else construct, but I cant tell if the schema is wrong or if formly just doesn't support this. I made a stack blitz for this below:
https://stackblitz.com/edit/angular-g45ydm?file=src%2Fassets%2Fjson-schema%2Fif_then.json
Trying to figuring out how to deserialize this kind of json in talend components :
{
"ryan#toofr.com": {
"confidence":119,"email":"ryan#toofr.com","default":20
},
"rbuckley#toofr.com": {
"confidence":20,"email":"rbuckley#toofr.com","default":15
},
"ryan.buckley#toofr.com": {
"confidence":18,"email":"ryan.buckley#toofr.com","default":16
},
"ryanbuckley#toofr.com": {
"confidence":17,"email":"ryanbuckley#toofr.com","default":17
},
"ryan_buckley#toofr.com": {
"confidence":16,"email":"ryan_buckley#toofr.com","default":18
},
"ryan-buckley#toofr.com": {
"confidence":15,"email":"ryan-buckley#toofr.com","default":19
},
"ryanb#toofr.com": {
"confidence":14,"email":"ryanb#toofr.com","default":14
},
"buckley#toofr.com": {
"confidence":13,"email":"buckley#toofr.com","default":13
}
}
This JSON comes from the Toofr API where documentation can be found here .
Here the actual sitation :
For each line retreived in the database, I call the API and I got this (the first name, the last name and the company change everytime.
Does anyone know how to modify the tExtractJSONField (or use smthing else) to show the results in tLogRow (for each line in the database) ?
Thank you in advance !
EDIT 1:
Here's my tExtractJSONfields :
When using tExtractJSONFields with XPath, you need
1) a valid XPath loop point
2) valid XPath mapping to your structure relative to the loop path
Also, when using XPath with Talend, every value needs a key. The key cannot change if you want to loop over it. Meaning this is invalid:
{
"ryan#toofr.com": {
"confidence":119,"email":"ryan#toofr.com","default":20
},
"rbuckley#toofr.com": {
"confidence":20,"email":"rbuckley#toofr.com","default":15
},
but this structure would be valid:
{
"contact": {
"confidence":119,"email":"ryan#toofr.com","default":20
},
"contact": {
"confidence":20,"email":"rbuckley#toofr.com","default":15
},
So with the correct data the loop point might be /contact.
Then the mapping for Confidence would be confidence (the name from the JSON), the mapping for Email would be email and vice versa for default.
EDIT
JSONPath has a few disadvantages, one of them being you cannot go higher up in the hierarchy. You can try finding out the correct query with jsonpath.com
The loop expression could be $.*. I am not sure if that will satisfy your need, though - it has been a while since I've been using JSONPath in Talend because of the downsides.
I have been ingesting some complex json structures and did this via minimal json libraries, and tjava components within talend.
The problem is that in my app we have a data structure like this:
{
"adults": {
"jagger_mick_dateOfBirth": {
"name": "Mick"
"lastName": "Jagger",
"more atributes": ""
},
"jolie_angelina_dateOfBirth": : {
"name": "Angelina"
"lastName": "Jolie",
"more atributes": ""
}
},
"children": {
"osbourne_ozzy_dateOfBirth": : {
"name": "Ozzy"
"lastName": "Osbourne",
"more atributes": ""
}
}
}
As you can see, for each Adult & Children, we use a dynamic attribute to identify each object. BUT inside is the same object.
Right now I am in the process to generate JSON Schemas (v4) for this data structure.
My problem is i cannot find a property to evaluate dynamic attributes, althought the object is the same, just the key is different.
I know that it is bad coding, but it is possible to generate a JSON Schema (v4) to validate a dynamic attribute (key) ?
Thanks in advance.
P.D.
If you are wondering why we use this approach, is because we can access directly to the object, instead of search for it.
If your dynamic object attributes can be described with a regular expression, you can use patternProperties keyword.
I've been looking around for an answer to the following questions, but have so far not found one.
Does the OData standard support doing a POST request containing an entity object with child entity objects?
If so, does the ASP.NET MVC Web Api OData framework (EntitySetController) support this out of the box?
The scenario I have in mind goes something like the following. You have a Parent object, containing several Child objects. Could you then do a POST with a body like this?
{ "Property1" : "Property value", "Property2" : 100
"Children" : [
{ "ChildProperty" : "Some value" },
{ "ChildProperty" : "Some other value" },
{ "ChildProperty" : "Some third value" }
]
}
Also, if I later would like to add another child to the Parent object through POSTing a single child, is there a standardized way of linking them together? Something like
{ "ChildProperty" : "Fourth child property val", "Parent" : 321 }
where '321' is the ID of the parent object?
Many thanks for any pointers!
Yes, OData supports this and web API OData supports it as well. OData calls it deep insert. Here is the link to the spec.
Now there can be two types of deep inserts,
1) The nested item is new as well and should be created. An example of the json payload looks like this,
{
‘Property1’: 42,
‘Property2’: ‘Contoso’,
‘Children’: [
{
‘ChildProperty’: 1,
……….
},
{
‘ChildProperty’: 2,
……….
}]
}
2) The nested items already exist, the parent item is new and must be linked to the nested items. OData protocol calls this bind. Sample payload looks like,
{
‘Property1’: 42,
‘Property2’: ‘Contoso’,
‘Children#odata.bind’: [
“http://localhost/Children(1)”,
“http://localhost/Children(2)”,
]
}
Web API OData supports first kind of deep inserts and doesn't have support for binds (the second example). In case of the first payload, your controller would receive a Parent object with the Children collection properly populated.
And regarding your second question, you have two options,
1) POST the child to ~/Parents(321)/Children URL
2) POST the child to ~/Children and then POST the ID link of this child from this response to the URL ~/Parents(321)/$links/Children.
You could refer to this link for this part of the OData spec.