JavaScript - Can't read property of undefined - javascript

Okay, this might be a stupid question, because I'm missing something, but I just can't seem to figure out what!
this is my object, using {{ definitionList | json }}
{
"State": "Success",
"Data": [
{
"Description": "Default",
"ID": 4,
},
{
"Description": "Hello World",
"ID": 14,
},
{
"Description": "Test Def",
"ID": 11,
},
{
"Description": "test definitie",
"ID": 12,
},
{
"Description": "testffvfvfvffv",
"ID": 8,
},
{
"Description": "Werknemer_kantoor",
"ID": 3,
"Type":
},
{
"Description": "Werknemer_kantoor",
"ID": 6,
}
],
"Error": null
}
okay now I want to print out "Data" uisng {{ definitionList.Data | json }}
and I receive the error
ORIGINAL EXCEPTION: Cannot read property 'Data' of undefined
I don't understand why? What am I missing?

Maybe you're loading definitionList asynchronously and it is not yet defined when your template is executed?
Try the following code instead (note the ?):
{{ definitionList?.Data | json }}

Related

Node.js parse non-standard hast data to HTML?

How can we convert non-standard hast (which is parsed from a Markdown file) to HTML?
For example, this is the HTML tree data I have:
{
"_path": "/hello",
"_draft": false,
"_partial": false,
"_empty": false,
"title": "Hello!",
"description": "",
"body": {
"type": "root",
"children": [
{
"type": "element",
"tag": "h1",
"props": {
"id": "hello!"
},
"children": [
{
"type": "text",
"value": "Hello!"
}
]
}
],
"toc": {
"title": "",
"searchDepth": 2,
"depth": 2,
"links": []
}
},
"_type": "markdown",
"_id": "content:hello.md",
"_source": "content",
"_file": "hello.md",
"_extension": "md"
}
How can I parse that 'body' bit to HTML in Node.js?
I tried to use hast-util-to-html:
import { toHtml } from 'hast-util-to-html'
console.log('data.body =', toHtml(data.body))
But I got the following error:
TypeError: Cannot read properties of undefined (reading 'toLowerCase')
I think the tag key in the data should be tagName for using hast-util-to-html. tag and prop are non-standard keys I suppose, how can I standardise them?

Display object inside object in angular

Here's my object inside EntryList variable in my component
{
"id": 0,
"startAddress": {
"id": 6,
"addressString": "addressString"
},
"endAddress": {
"id": 6,
"addressString": "addressString"
},
"distanceInKm": 5.637376656633329,
"travelTime": "travelTime",
"standingTime": "standingTime",
"vehicle": {
"id": 2,
"licensePlateNumber": "licensePlateNumber"
},
"driver": {
"id": 7,
"name": "name"
}
}
I want to display columns: driverName, vehicleName, startAdrress, endAdress, distanceInKm, travelTime, standingTime.
I tried using <tr *ngFor="let DLBlist of EntryList"> but there's no display.
Those are nested elements. You can access them with the following code
DLBlist?.driver?.name
DLBlist?.startAddress?.addressString
DLBlist?.endAddress?.addressString
?. is the safe access operator, so if they don't exist no error is thrown

Assign array of JSON objects to array of interface Angular/Typescript

Currently, this works and doesn't give my error while running but my text editor is giving me an error that says property 'categories' does not exist on type 'CategoryInterface[]' (on the line where response.categories is assigned to variable) so I'm not sure if I'm doing things right.
public categories: CategoryInterface[];
.subscribe((response: CategoryInterface[]) => {
this.categories = response.categories;
console.log(this.categories);
});
My backend returns this:
{
"categories": [
{
"categoryId": 1,
"name": "Important",
"description": "This category is important.",
"order": 1,
"createdBy": null,
"createdAt": "2017-11-25 12:09:04",
"updatedBy": null,
"updatedAt": "2018-01-17 23:53:25",
"categoryBoards": [
{
"categoryBoardId": 1,
"categoryId": 1,
"name": "Announcements",
"description": null,
"order": 2,
"createdBy": null,
"createdAt": "2017-11-25 12:09:49",
"updatedBy": null,
"updatedAt": "2018-01-18 00:09:02"
},
{
"categoryBoardId": 23,
"categoryId": 1,
"name": "Rules",
"description": null,
"order": 1,
"createdBy": null,
"createdAt": "2018-01-18 00:08:57",
"updatedBy": null,
"updatedAt": "2018-01-19 00:05:51"
}
]
}
]
}
You are trying to cast your api response to an array of CategoryInterface which is not the case, you better use your subscribe method like this:
.subscribe((response: any) => {
this.categories = <CategoryInterface[]> response.categories;
console.log(this.categories);
});
It's the your api response categories which needs to be casted to CategoryInterface[]
Bonus: The angular style-guide notice that you need to declare classes instead of interfaces and you don't have to suffix the class name with Interface, so just name your CategoryInterface to Category.
You get the error because you declare response as a CategoryInterface[], but response.categories is actually the CategoryInterface[]. response is just a wrapper around the array. All the types are stripped out when the typescript is converted to javascript, which is why it works fine at runtime.

Extract information from json

So I have the following object from my controller, which has a name, a list of beans and a list of operations:
{
"name": "Charge",
"beans": [
],
"operations": [
{
"name": "getSize",
"returnType": "java.lang.Integer",
"description": "empty description",
"parameters": [
]
},
{
"name": "truncate",
"returnType": "java.lang.Void",
"description": "empty description",
"parameters": [
]
},
{
"name": "count",
"returnType": "java.lang.Integer",
"description": "empty description",
"parameters": [
{
"name": "javaCode",
"type": "java.lang.String",
"value": null
}
]
},
{
"name": "update",
"returnType": "java.lang.Integer",
"description": "empty description",
"parameters": [
{
"name": "javaSelectCode",
"type": "java.lang.String",
"value": null
},
{
"name": "javaUpdateCode",
"type": "java.lang.String",
"value": null
}
]
},
{
"name": "delete",
"returnType": "java.lang.Integer",
"description": "empty description",
"parameters": [
{
"name": "javaCode",
"type": "java.lang.String",
"value": null
}
]
},
{
"name": "dump",
"returnType": "java.lang.Void",
"description": "empty description",
"parameters": [
{
"name": "javaSelectCode",
"type": "java.lang.String",
"value": null
},
{
"name": "destinationPath",
"type": "java.lang.String",
"value": null
}
]
},
{
"name": "select",
"returnType": "java.lang.String",
"description": "empty description",
"parameters": [
{
"name": "javaCode",
"type": "java.lang.String",
"value": null
}
]
}
],
"$$hashKey": "object:620"
}
Basically I want to display all the operations from this object in a dropdown menu.
So I was thinking of having something like:
<div ng-repeat="operation in object.operations">
{{operation.name}}
</div>
Except the code above doesn't display anything on the screen, no errors in the console, nothing.
Any help would be much appreciated!
EDIT:
Javascript service:
app.controller('selectAll', ['$http', '$scope' , '$rootScope', function ($http, $scope, $rootScope) {
$scope.response;
$scope.operations;
$rootScope.$on("invokeSelectAll", function(){
$scope.invokeSelectAll();
});
$scope.invokeSelectAll = function(){
$scope.response = $http.post('/invoke/selectAll/', $rootScope.dataObj);
$scope.object = JSON.stringify($rootScope.object);
console.log(" object operation from selectAll " + $scope.object);
$scope.response.then(function(data) {
$scope.responses = data.data ? data.data : "Select Operation not supported on this bean";
});
}
}]);
Screenshot of dev console:
https://imgur.com/a/8WAAL
Use JSON.stringify() to create a JSON string from a JavaScript object.
Use JSON.parse() to parse a JSON string to a JavaScript object.
In your case, you need to use JSON.parse() because you get a JSON string from the server and want to parse it to a JavaScript object.
$scope.object = JSON.parse($rootScope.object);
you are using JSON.stringify which is used to change javascript object to string and store it as a string only.
You should Parse the data with JSON.parse(), and the data becomes a JavaScript object. and you can easily use that in ng-repeat.
Try it ,It will work fine

Iterate through nested Javascript Objects from API response

I've tried 100 different things, and spend days looking through Google and Stackoverflow, but I can't find a solution to this problem. Everything I call after the body of this API response returns undefined!
The response from Facebook SDK looks like this:
[
{
"body": "[
"data": [
{
"name": "Larry Syid Wright",
"administrator": false,
"id": "xxx"
}, {
"name": "Melissa Long Jackson",
"administrator": false,
"id": "xxx"
}, {
"name": "Charlotte Masson",
"administrator": false,
"id": "xxx"
}
],
"paging": {
"next": "url"
}
]"
},{
"body": "{
"data": [
{
"id": "xxx_xxx",
"message": "In honor of Halloween, how many of you have your own ghost stories? Who believes in ghosts and who doesn't?",
"type": "status",
"created_time": "2014-10-31T20:02:01+0000",
"updated_time": "2014-11-01T02:52:51+0000",
"likes": {
"data": [
{
"id": "xxx",
"name": "Joe HerBatman Owenby Jr."
}
],
}
"paging": {
"cursors":
{
"after": "xxx",
"before": "xxx"
}
}
}
},{
"id": "xxx_xxx",
"from": {
"id": "xxx",
"name": "Jessica Starling"
},
"message": "Watching the "Campaign" and I can't help but notice what a fantastic job they did (Will ferrell and all) with that North Carolina accent! Ya'll know we sound different than other southern states ;)",
"type": "status",
"created_time": "2014-11-01T02:36:21+0000",
"updated_time": "2014-11-01T02:36:21+0000",
"likes": {
"data": [
{
"id": "xxx",
"name": "Scott Williams"n
}
]
}
}
],
"paging": {
"previous": "xxx",
"next": "xxx"
}
}"
}
]
This response is from a batch call. If I call them separately, I can easily iterate through the responses, and get everything from them. When I call them in the batch though, I can't get past "body", and I need to use a batch call.
console.log(response[0].body); will return the object inside the body of the first part of the response, but console.log(response[0].body.data); returns undefined. I just don't get it. This should be simple but it's like there's a lock on the door and I don't have the right key.
I normally have no issue iterating through objects, so I don't need a generalized answer. I need help seeing whatever it is here that I don't see. Why does the console show undefined when I call anything after the body, and what do I need to be doing to get any of these values?
That JSON contains nested JSON. body seems to be a string. Use
var body = JSON.parse(response[0].body);
The values from the body are just strings.which are embedded as json.So firstly you would need to parse them using JSON.parse.
The code would be like
var body = JSON.parse(response[0].body);

Categories