Parse an Object in Angular Component Template file - javascript

I have an object in my address.component.ts as follows:
address : any;
This is the data that gets populated in address from back-end
{street1: "abc"
city: "some state"
country: "some country"
}
I am getting this data after calling a service.
My Template file is as follows:
<h1>{{address}}</h1>
On the browser, it is displayed as follows:
[Object object]
Instead of this I want to display entire address Object. I know I can do
<h1>{{address.street1}}</h1>
<h1>{{address.state}}</h1>
<h1>{{address.country}}</h1>
But I don't want to do it because there is a possibility that back-end might change the fields in address (like adding one more field). Is there any way I can display all the data in address object instead of just [Object object] on the browser.


Use
<h1 ng-repeat="(key, value) in address">{{value}}</h1>
ng-repeat repeats your element based on the condition in it.
For more information please see ng-repeat documentation.


You can use this function for getting all information. After it, print it in HTML:
var newAddress = Object.values(address);

Related

get the child element value from first array irrespective of parent element name in JSON

I'm getting below response (snippet) from JSON (for detailed json response hit (GET) https://restcountries.com/v3.1/all in postman or browser)
[
{
"status": "officially-assigned",
"unMember": true,
"currencies": {
"KES": {
"name": "Kenyan shilling",
"symbol": "Sh"
}
}
}
]
I want to fetch currency name in above json in Oracle Visual Builder irrespective of currency abbreviation like "KES" i must get the currency..name value
I have used below code to fetch currency name value but i'm getting blank value
<oj-table scroll-policy="loadMoreOnScroll" class="oj-flex-item oj-sm-12 oj-md-12"
data="[[$page.variables.getAllListSDP]]"
columns='[{"headerText":"Currency","field":"currencies","template":"officialCellTemplate2"}]'>
<template slot="officialCellTemplate2">
<oj-bind-text value="[[ $current.data..name"]]"></oj-bind-text>
</template>
</oj-table>

With JSONPath, you should be able to use wildcards to find the name of any currency, assuming the JSON structure of the currencies field is what you have shared.
You'll need to import the JSONPath libraries into your project.
The text binding will then become something like this;
<oj-bind-text value="[[ $current.data.[*].name]]"></oj-bind-text>
P.S - I have not tested the behavior of JSONPath with OJet components myself, but theoretically this is how it should work.

jQuery Datatables: Using a database object

I am populating the fields of my User object in a datatable. The User object has a database field for email and phone , so that works as expected. The name field is actually an object with a bunch of keys in it so I want to use first_name. I tried doing the below but it doesn't seem to work. If I use just name, it renders out [Object object] so I know it's accessing name correctly.
$('#example').DataTable( {
data: [
'email,
'phone',
'name['first_name']'
]
});

According to https://datatables.net/reference/option/columns.data, you could reference it by using name.first_name.

Can't display javascript object properties in mandrill template using handlebars

I am trying to display dynamic content by using the mandrill template api in a node project.
I have followed the docs and looked at plenty of examples, and for the most part can get things working.
However, when I try to access properties of an object that I pass through the api in the mandrill template, it does not display anything.
Here is my mandrill template (using handlebars):
<p>{{greeting}} {{person.firstName}},</p>
<p>{{greeting}} {{person.0.firstName}},</p>
<p>Your location is {{person.location}}.</p>
Now, the greeting does display the value passed in the global_merge_vars part. But the properties for the person object do not get displayed, as if they are undefined.
Here is part of the json being sent:
var greeting = "Hello ";
var person = {firstName:"testfname",location:"testlocation"};
var globalMergeVars = [
{"name": "greeting","content":greeting},
{"name": "person","content": person},
];
Am I not passing the object correctly or naming the 'name' property correctly in the api call? I have tried a bunch of different things. I know that I could create multiple vars inside the globalMergeVars object instead of passing the entire person object, however I have a lot more properties attached to the person object.
I have also successfully used an each loop for an array of items and that all gets displayed correctly.
Thanks.

get JSON object javascript

I have the Student.groovy class that hasMany Note.groovy
Student Class extend to User.groovy
I have a JavaScript function that takes as a parameter a list of notes in JSON.
The code below works.
$.each(data,function(key, value) {
alert(value.note);
alert(value.semester)
});
But if I do alert(value.student); me is returned [object, object]
and when I put alert(value.student.toSource()); It's shown ({class: "project.Student", id: 1})
If I do alert(value.student.name); It's shown undefined

You're most likely not sending back the correct JSON format to access the student's name.
As of now with the examples you have given you can only access the class and id of a given student.
value.student.class //<-- project.student
value.student.id //<-- 1
To be able to access the student's name you would have to have an object like so:
{
class: "project.Student",
id: 1,
name: "Example name"
}
If you think you are actually sending everything you need from the server just do a little $(document.body).append(data); or console.log(data); on your getJSON success callback so you can see clearly what you have.
I wouldn't be surpized if value.name works by the way. Depends on your json structure.

Xstream generated json response for List<Object>

I am using Xstream to generate JSON for my application.I want to use JSON for ajax support. When i try
xstream.alias(classAlias, jsonModel.getClass()); //Note classAlias="records"
responseStream.println(xstream.toXML(jsonModel));
where jsonModel is actually a List of entity objects.Entity class name is Person which is in "beans" package so full qualified name would be beans.Person. OK
Person class has properties like id,name,age etc.
Generated JSON is
{"records":[{"beans.Person":[{"id":21,"name":"Name21","username":"Username21","password":"password21","age":41,"sex":true},{"id":22,"name":"Name22","username":"Username22","password":"password22","age":42,"sex":true},{"id":23,"name":"Name23","username":"Username23","password":"password23","age":43,"sex":true},{"id":24,"name":"Name24","username":"Username24","password":"password24","age":44,"sex":true},{"id":25,"name":"Name25","username":"Username25","password":"password25","age":45,"sex":true},{"id":26,"name":"Name26","username":"Username26","password":"password26","age":46,"sex":true},{"id":27,"name":"Name27","username":"Username27","password":"password27","age":47,"sex":true},{"id":28,"name":"Name28","username":"Username28","password":"password28","age":48,"sex":true},{"id":29,"name":"Name29","username":"Username29","password":"password29","age":49,"sex":true},{"id":30,"name":"Name30","username":"Username30","password":"password30","age":50,"sex":true}]}]}
I used $.getJSON of jquery to get this response on button click event. I checked the status which is "success" every time so this is working well.Problem occurs when i try to access first records i.e. person's information like id,username etc.
I write statements in Javascript as
<script>
$(document).ready(function() {
$("input").click(function(){
$.getJSON("http://mylocalhost:8080/Paging/paging/records?page=3",function(data,status){
alert(status);
alert(data.records[0].beans.Person[0].id);
});
});
});
</script>
First alert works but second doesn't.
Then javascript stops working as it does whenever encounters an error.What i can guess is that in records array Person object is followed by package name.This could be the reason because browser may look for beans object in records array which is not there because beans.Person is a single, atomic name in this case as shown in above. But not sure?
If this is actually problem then how can i stop/control XStream to name an object's name as just classname(person) instead of package.classname(beans.person) as it is being named by default.
or If everything is OK in produced JSON object then why can't i see the expected result? Why simple second alert statement is not working.

I got the answer I was to use
alert(data.records[0]["beans.Person"][0].id);
instead of
alert(data.records[0].beans.Person[0].id);
A useful link
http://www.javascripttoolbox.com/bestpractices/#squarebracket

Categories

Resources