My JSON data returned via API call:
{
"edit_date": "2019-05-27 15:50:03",
"active": 1,
"form_uuid": "e5ae0a15-3914-4e1d-a356-6490369c5d0b",
"staff_uuid": "",
"regarding_object": "job",
"regarding_object_uuid": "22ce9784-8f03-45dc-9d4b-c62a85fb2adb",
"field_data": "[{\"FieldType\":\"Multiple Choice\",\"Question\":\"Retest In\",\"Response\":\"6 Months\",\"UUID\":\"113fc0c0-6d6d-443e-970d-4fc6ea9044c1\",\"SortOrder\":10},{\"FieldType\":\"Multiple Choice\",\"Question\":\"Insulation Resistance\",\"Response\":\"Pass\",\"UUID\":\"63100366-0dc8-4787-805e-db8a2a90b07b\",\"SortOrder\":5},{\"FieldType\":\"Multiple Choice\",\"Question\":\"PAT Result\",\"Response\":\"Pass\",\"UUID\":\"9f9ed288-c56d-4b39-88dc-a1a9941c65ab\",\"SortOrder\":9},{\"FieldType\":\"Multiple Choice\",\"Question\":\"Condition\",\"Response\":\"Good\",\"UUID\":\"d6f0c0d8-7935-4292-8d79-38e4bf70454b\",\"SortOrder\":3},{\"FieldType\":\"Multiple Choice\",\"Question\":\"Appliance Type\",\"Response\":\"Portable Appliance\",\"UUID\":\"ca94ec70-74da-4432-a1e8-3c2c040ecb8d\",\"SortOrder\":1},{\"FieldType\":\"Multiple Choice\",\"Question\":\"Earth Resistance\",\"Response\":\"N\\/A\",\"UUID\":\"45a46b64-b28b-4f0a-b86e-a73f2742892b\",\"SortOrder\":4},{\"FieldType\":\"Multiple Choice\",\"Question\":\"Leakage Current\",\"Response\":\"Pass\",\"UUID\":\"2d492371-ba9f-4fb6-a1a6-9c978549479b\",\"SortOrder\":6},{\"FieldType\":\"Multiple Choice\",\"Question\":\"Appearance Changed\",\"Response\":\"No\",\"UUID\":\"9a4f3b3d-40b9-4038-b0c5-e5866a607f71\",\"SortOrder\":7}]",
"timestamp": "2019-05-27 15:50:02",
"form_by_staff_uuid": "8b3031c3-469f-48f4-9e46-daa8fe01ccfb",
"document_attachment_uuid": "",
"asset_uuid": "b6420210-0709-4a4c-956b-3d7d4575d00a",
"uuid": "198fc098-0271-4f28-be4c-1a2fb5066dfa"
}
How can I index the nested field_data array?
I am chasing the "Response" object where "Question" = "Retest In"
I don't understand what all the backslashes are there for and I can't seem to call the object value
myJSONdata.field_data[0].Response
Related
I have an object which is given back through my REST API and I need to iterate through it for synchronizing a DB. So the object contains another object called tables. The tables object has different arrays with table names and their key value pairs.
I could not loop through the tables object about two days whatever I did and it is really annoying getting null or undefined values back.
For example I tried iterating through the table array with the JavaScript function object.forEach((article)=>console.log(article.id,article.name));
const obj = response.content.tables.article;
function findArticles(obj) {
obj.forEach((article)=>console.log(article.id,article.name));
}
I can't get any value back. When I try to console.log(response.content); it shows me everything. As soon as I try to output response.content.tables it says undefined.
This is the structure of the object response.content:
{
"status": "1",
"message": "sync out request successfull",
"tables": {
"article": [
{
"id": 1,
"name": "baseball"
},
{
"id": 2,
"name": "truck"
},
],
"food": [],
"animals: []
}
}
Try converting the response to an object using JSON.parse(xyz) before attempting to get the properties.
var xyz = '{ "status": "1", "message": "sync out request successfull", "tables": { "article": [{"id": 1,"name": "baseball"},{"id": 2,"name": "truck"}],"food": [],"animals": []}}'
var obj = JSON.parse(xyz);
$(obj.tables).each(function (ix, el) {
console.log(el)
});
I solved it like this:
var obj = response.content;
var JSON = JSON.parse(obj);
var articleTable = JSON.tables.article;
articleTable.forEach((article)=>console.log(article.id,article.name));
After I parsed the response.content object to JSON it was available to access the nested objects as 'tables' and 'article'. After passing the article object with the articleTable variable to the forEach it has been possible to access each elements. Now I get results.
I really appreciate your help
T3.0 it wasn't able to solve the problem without you.
I am new to Ionic 3 & Angular and ran into an issue with *ngFor and .subscribe() method. Please forgive me if it is an easy question. I tried to figure out the behaviour of http.get(..).map(..).subscribe() function when used along with *ngFor to maintain an array of objects and show the records to user using *ngFor on the .html template file but unable to know *ngFor's odd behaviour.
In my Ionic 3 App, I am getting the data using an API and storing it inside a component variable called "users" which is declared as below in component .ts file -
users: Array<any>;
I have below component function which gives me data for this users array -
addUser(count: number) {
this.http.get('https://randomuser.me/api/?results=' + count)
.map(data => data.json().results)
.subscribe(result => {
for (let val of result) {
this.users.push(val);
}
})
}
Initially, I get data for 10 users from the API using above component function by simply calling it inside my ngAfterViewInit() function like -
this.addUser(10);
This gives me 10 user record objects inside my users array which I show to the user using something like below in the view .html file -
<ion-card *ngFor="let user of users">
{{user.email}}
</ion-card>
At this time *ngFor puts the last array element at first in the view and shows the records in the descending order as the elements in the array starting from index 9 to 0.(LIFO order)
Now I start popping the last element from this users array using users.pop(); and push another element at the beginning at index 0 by shifting current elements using users.unshift(..) in below function and calling it as addNewUser(1); -
addNewUser(count: number) {
this.http.get('https://randomuser.me/api/?results=' + count)
.map(data => data.json().results)
.subscribe(result => {
for (let val of result) {
this.users.unshift(val);
}
})
}
At this moment, if we consider the first array which had 10 elements, the last object at index 9 had been removed and another element at index 0 has been added making the previous elements on index 0-8 to shift to index 1-9.
On doing so, my view gets updated which has *ngFor and surprisingly this time it shows the first element at first place which is actually on index 0 which is the one I recently put. This is opposite to the order earlier followed by *ngFor to render elements on the screen.
Why *ngFor in Ionic 3 view shows the recently inserted object element first from the array of objects which is dependent on the subscribe method .subscribe() method. I am really confused about this.
I really need to clear the concept of *ngFor and subscribe(). Please help me.
Note : The API mentioned above is publicly accessible for testing and you may call it to check the response structure if required.
Pasting a sample API response below on calling https://randomuser.me/api/?results=1 -
{
"results": [
{
"gender": "male",
"name": {
"title": "mr",
"first": "daniel",
"last": "stoll"
},
"location": {
"street": "9719 tannenweg",
"city": "cottbus/chosebuz",
"state": "bremen",
"postcode": 81443
},
"email": "daniel.stoll#example.com",
"login": {
"username": "greenleopard994",
"password": "chat",
"salt": "OUjisBdQ",
"md5": "8148d51998f3fef835a5f3979218c181",
"sha1": "131ae09d045b345efe36a330bf17a450b76f7de3",
"sha256": "94c3a362b5f516d0fb1d4e9dbb632d32d57b8886d5cc7bf0d5cedc99e7d55219"
},
"dob": "1957-04-26 22:07:14",
"registered": "2002-04-29 10:57:34",
"phone": "0556-4348870",
"cell": "0172-5116200",
"id": {
"name": "",
"value": null
},
"picture": {
"large": "https://randomuser.me/api/portraits/men/14.jpg",
"medium": "https://randomuser.me/api/portraits/med/men/14.jpg",
"thumbnail": "https://randomuser.me/api/portraits/thumb/men/14.jpg"
},
"nat": "DE"
}
],
"info": {
"seed": "8fd4afe85884c767",
"results": 1,
"page": 1,
"version": "1.1"
}
}
Refer this example showing my issue.
If you have a sorting issue with indexing and you think it's related.. you could work around the issue by assigning an index:
*ngFor="let user of users; let i = index"
and then reference the direct index value
users[i]
You should make a copy of that array. Editing array elements while looping them can lead to unexpected behaviour.
I have a json data like below
{
"data": {
"points": 390,
"medal": "gold",
"activeGoals": [{
"examType": full,
"dateApplied": null,
"status": "Active-GoodStanding",
"term": 2,
"amountPaid": 2500,
"pointEarned": null,
"examDetails": {
"totalAmountPaid": 4500,
"examDate": 1459449000000,
"endDate": 1554057000000,
"totalMarks": 100,
"nextExamDate": 1493577000000,
"interestRate": 0
}
}]
}
}
In this Json data there is 'activeGoal' array,and inside of that there is an another array 'examDetails'
In Controller,I tried assigning these data into the angular object like below
examCtrl.details ={};
examCtrl.details =data;
examCtrl.activeGoals=data.activeGoals;
examCtrl.examDetails=data.activeGoals.examDetails;
I am getting activeGoals, but for examDetails I am getting 'undefined' error.
What is the wrong i am doing here??
assign like this : examCtrl.examDetails=data.activeGoals[0].examDetails;
since activeGoals is itself an array and you need first index([0]) value of it i.e., examDetails.
Further: as per your JSON examDetails is object not array.
if you're confused what the exactly the data is you can always convert in JSON editor.then you can easily assign the object from JSON data.
I guess I'm stuck on stupid. I've been at this for the last few hours and can't seen to figure it out. Admittedly, I am new to ng/ionic2.
I am trying to loop through the response from my post request. I am getting a valid(validated online) big, fat JSON object from my own web api. It looks like this:
`"details": [{
"item_ID": "4",
"item_attribute_ID": "JiggyJamband_1_642",
"item_color_bool": "false",
"item_name": "Test Item 4",
"item_price": "18.95",
"item_desc": "4 This is a test of the ajax input",
"item_gender": "Girls"
},
{ ... },
"attributes": {
"JiggyJamband_1_642": [{
"color": "no-color",
"Xs": "80",
"Sm": "0",
"Med": "0",
"Lrg": "0",
"Xl": "0",
"Xxl": "10"
}],
"JiggyJamband_5_5664": [{
"color": "no-color",
"Xs": "0",
"Sm": "0",
"Med": "0",
"Lrg": "0",
"Xl": "0",
"Xxl": "50"
}],
{ ... }`
I am able to access individual "details" and "attributes" like this:
this.itemsDataService.getRemoteData(urlCode)
.subscribe(response => {
this.itemsJson = response;
this.dObj = this.boothItemsJson.details;
//this.aObj = this.boothItemsJson.attributes;
this.aObj = response["attributes"]["JiggyJamband_1_642"];
});
My provider looks like this:
getRemoteData(urlCode): any {
return this.http.post('http://localhost/process-fe-app/_itemJson.php', JSON.stringify(urlCode))
.map(res => res.json()); }
My question: items in details is dynamic and has an item-attribute_ID that is related to at least 1 entry in attributes. Entrys for attributes are dynamic as well - each item can have multiple attributes. The array keys of the individual attributes are the static (sizes and colors) and either have values or they don't. I need to be able to loop over the attributes object (aObj) of arrays and the arrays inside them. I do not need the ngFor or ngIf statements as this data won't be directly displayed per se. The json data is returned just fine but I just need to be able to access it call methods on the based on the data (like putting into storage with the attribute ID as the key "JiggyJamband: color: no-color, xs:50, s:100... etc"
What I've tried: this tutorial https://www.youtube.com/watch?v=0kHJgw6Li_4, and googling ever iteration of the wording for this problem I could think of.
Perhaps this sample iteration will help you get your head around it.
this.itemsDataService.getRemoteData(urlCode)
.subscribe(response => {
for(var k in response){
for(var k2 in response[k]){
console.log([k,k2,response[k][k2]]);
}
}
});
I am trying to initialize an observable array from a json object which is rendered from the server as Javascript/Json;
Basically I have a simple model (from the server) that looks like this
var BaseModel = { "changeRequestLocations":
[{ "location": "New Zealand", "devices":
[
{ "id": "5", "deviceName": "Server 1" },
{ "id": "6", "deviceName": "Server 2" }
],
"id": 1 }] };
I then initialize an observable array from the baseModel
this.changeRequestLocations = ko.observableArray(BaseModel.changeRequestLocations);
This basically does what I want but the "devices" element is an array not an observable array.
I really need to have it as an observable array - is there a way to tell Knockout to do this automatically or do I need to do it manually?
See a fiddle here that shows the case
In itself Knockout does not do this for you automatically, so
you do it manually like your jsfiddle
you use the Knockout.Mapping plugin which is designed for this scenario: convert plain JavaScript objects to objects with observable properties.
So in your example you just need to write:
this.changeRequestLocations = ko.mapping.fromJS(BaseModel.changeRequestLocations);
and the mapping plugin will convert your location array into an observable array.
Demo JSFiddle.