I am trying to get the get the data from oracle db and displaying it. I have created a service using express api and node and able to run it successfully.
I have created angular service to fetch the data, and assign it in angular component, but i am not able to map the JSON response to the angular variable. Please check the code below and help me what i need to change in angular component.ts and how can i use that variable in html.
JSON Data from oracle DB:
[{"COUNT":27}]
angular service:
getCount(): Promise<String[]> {
return this.http.get(this.heroesUrl)
.toPromise()
.then(response => response.json().data)
.catch(this.handleError);
}
angular component.ts
dataGS : String[];
getData(): void {
this.dataService
.getCount()
.then(dataGS => this.dataGS = dataGS);
Your response does not have a property data, it's just an array. So instead of:
.then(response => response.json().data)
do:
.then(response => response.json())
Now you will get your array. Then as proposed by jitender you can iterate your response:
<div><p *ngFor="let d of dataGS ">{{d}}</p></div>
You can achieve this with the help of template bindings in angular.
For Example -
In your component you receive this.dataGS = [{"COUNT":27}] after getting the data from the db. Then on your html template you can display this with the help of Interpolation like
<div>{{dataGS[0].count}}</div>
What about
getCount(): Promise<String[]> {
return this.http.get(this.heroesUrl)
.toPromise()
.then(response => {
response.json().map(function(item) {
return item['COUNT'];
})
})
.catch(this.handleError);
}
in your html
<div><p *ngFor="let d of dataGS ">{{d}}</p></div>
Related
onMounted(() => {
productService.value
.getProducts()
.then((data) => (products.value = data));
console.log((products))
});
When I print products with console.log, here what I have.
capture of the console
I see that the data I want are in RawValue but I don't know how to access them.
I tried Object.values(products) or just console.log(products._rawValue) or console.log(products.rawValue) it print undefined.
Do you know what function call ?
Thanks
There are 2 issues
#1 - you're using console.log(products) which shows you the reactive object, what you need instead is console.log(products.value) which will only show the value, which should match the content of data.produtcs
#2 - you might find that 👆 now shows an empty result. The reason that's happening is that you're calling the console log after the async function, but before it finishes, so you're calling it before it has a chance to update. To fix that, you can log as part of the async function
onMounted(() => {
productService.value
.getProducts()
.then((data) => {
products.value = data;
console.log(products.value);
})
});
If you're using the products inside a template, you don't need to worry about what's before or after the async function since it will re-render the component on change.
Also, you probably don't need to define productService as a ref, the class is likely not something that needs to be reactive, so you can just do simple assignment and then skip the .value to call getProducts
with axios what I do is take out the data with response.data you could try
onMounted(() => {
productService.value.getProducts().then((response) => (
products = response.data
));
console.log(products.length);
});
So I'm working on a simple .html file .
I'm making the query:
var toDo= Trello.get('/lists/5d3ef8543a911e79f63df8c0/cards');
And I'm calling:
console.log(toDo);
And I'm getting this weird JSON
JSON returned by Trello API
So my problem is that I need to acces the responseJSON atributte, and I dont know ho to do it.
I already tried with toDo.responseJSON but it returns 'undefined'
How can I handle this type of JSON?
How can I access the atributes shown on the image?
Here is a basic example on how to handle the Promise:
Trello.get('/lists/5d3ef8543a911e79f63df8c0/cards')
.then(
(success) => {
console.log(success);
}
).catch(
(error) => {
console.log(error);
}
);
I have been learning Angular and I made simple app which use database request and print all information from MySQL. In my service I made this method
getCharacters(){
return this.http.get('http://localhost/something/controller/characters')
.map(
(response: Response) => {
return response.json();
}
);
}
In characters-list component I used subscribe()
this.charactersService.getCharacters().subscribe(
(characters) => {
this.characters = characters;
}
);
It works of course but it's not practical. I want to use one array to a few components so I would retrieve data from MySQL one time and use this array in all components I want to.
How to do that?
I am using angular4, in a simple component I am trying to load a json, the json and component are on the same path/folder.
import metacoin_artifacts from './MetaCoin.json';
I also tried
import metacoin_artifacts from 'MetaCoin.json';
all of them throw me a error Cannot find module './MetaCoin.json'.
The first approach used to work on one project before, but now it can't work anymore, I don't know what is the difference between them.
Json is not a module, you cannot load json file as above, you can do it as,
public getJSON(): Observable<any> {
return this.http.get("./MetaCoin.json")
.map((res:any) => res.json())
.catch((error:any) => console.log(error));
}
I have an issue with Observables in Angular 2
My component calls service function on Init like below:
delivery: IDeliveryCountry[];
ngOnInit() {
this.checkoutService._getInfo().subscribe(dev => this.delivery = dev);
}
This is how interface looks like IDeliveryCountry:
export interface IDeliveryCountry {
iso: string;
name: string;
}
This is how Service looks like:
_getInfo(): Observable<IDeliveryCountry[]> {
return this.http.get(this.deliveryCountryUrl)
.map((response: Response) => <IDeliveryCountry[]>response.json())
}
json file with data looks like this:
[
{
"iso":"se",
"name":"Sweden"
},
{
"iso":"dk",
"name":"Denmark"
}
]
My html file is just a simple ngFor loop:
<div *ngFor='let dev of delivery'>{{dev.iso}}</div>
So far all things works perfect, as expected I get back "se" and "dk" in UI.
The problem appears when I change a structure of data in my json file to following:
{
"country": {
"iso":"se",
"name":"Sweden"
}
}
I want data to only have one country with iso and name property for it. So my html file looks like following:
<div>{{delivery.iso}}</div>
But I am getting iso as undefined all the time
" Cannot read property 'iso' of undefined "
Thank you!
You should first of all use:
{{delivery.country.iso}}
The undefined error you are getting, is because the data is coming async, so use the safe navigation operator to avoid this:
{{delivery?.country?.iso}}
Demo
Optionally you could extract the data that is inside country, so you can shorten your code in your template from {{delivery?.country?.iso}} to just {{delivery?.iso}}, this can be done like so:
.map(res => res.json().country) // extract the data from the object country
You can just do this without ngFor since it is an Object
<div>{{delivery.country.iso}}</div>
After your comments, undefined is because the data is coming async, so use the elvis operator to avoid this:
{{delivery?.country?.iso}}
Alternatively you could change your service to return the DeliveryCountry[]
getInfo(): Observable<IDeliveryCountry[]> {
return this.http.get(this.deliveryCountryUrl)
.map((response: Response) => response.json())
.map(delivery => delivery.country);
}
Then:
ngOnInit() {
this.checkoutService.getInfo()
.subscribe(deliveryCountries => this.deliveryCountries = deliveryCountries);
}
Then:
<div *ngFor="let deliveryCountry of deliveryCountries">{{deliveryCountry?.iso}}</div>