I'm kinda new to Angular and I need to do a function that does an http.post on click and it works (POST DONE is returned and I get the data), the problem is that i need to render data inside tables but 'postReponse' returns only [Object Object] in my html file and I can't find a way to render the data as it should, does anyone have a fix for this issue please ?
Here's the code sample :
public postReponse: any;
postRefs(){
return this.httpClient.post('someUrl',
{
"someBody"
})
.subscribe(
data => {
console.log("POST DONE", data)
return this.postResponse = data;
},
error => {
console.log("ERROR POST", error)
}
)
}
//home.component.html
<tr>
<td>{{postResponse}}</td>
<td>{{postResponse}}</td>
<td>{{postResponse}}</td>
<td>{{postResponse}}</td>
</tr>
postResponse is an object with keys and values, for example if it contains two attributes id and name then it will look like this :
{ id : 1, name = 'name' }
So if you need to access to the name attribute you need to write inside your html:
<td>{{postResponse.name}}</td>
Related
This question already has answers here:
How can I access and process nested objects, arrays, or JSON?
(31 answers)
Closed 2 years ago.
I am attempting to create a weather app using the Openweather API. I am able to retrieve the JSON object successfully, but I am having trouble iterating through the object, I would like to access the weather details for specific dates and times but I just cannot for the life of me wrap my head around the concept. There were times where I was able to access the name of the JSON object, but when I attempt to access a specific weather detail from a specific date and time, I am met with errors constantly. Some of the information is so deeply nested that I am unsure exactly how to retrieve the information
fetch(`https://api.openweathermap.org/data/2.5/forecast?zip=${zip}&units=imperial&appid=5672e526c1cbc8d71aed230e5e151426`)
.then(response => response.json())
.then(json => {
console.log(json.list);
});
}, [apiSearch]);
If I simply try to add an index to the end of json.list:
console.log(json.list[1]);
I am sometimes met with errors such as Cannot convert undefined or null to object or something along those lines, I would like to know the best way to access the object array below and all of its information, thank you!
I've tried multiple approaches including Object.keys, mapping, etc. but I always get hit with an object is null error or something of the sorts. I would like to iterate through the 40 arrays and lets say access the temperature, every attempt to do so has led me to failure. Any help would be greatly appreciated, thank you!
Hope this will help you.
fetch(`https://api.openweathermap.org/data/2.5/forecast?zip=99501&units=imperial&appid=5672e526c1cbc8d71aed230e5e151426`)
.then(response => response.json())
.then(json => {
const forcasetList = json.list;
forcasetList.forEach(f => {
console.log(f.main.temp)
})
});
There can be several issues here:
Fetch and response status
Since you are using fetch the returned response may not always be a valid response, you should first check that you have an HTTP 200 status response e.g.:
fetch(url).then(
response => {
if (response.status !== 200) {
throw new Error(`Expected status 200 ok got status: ${response.status}`)
}
return response.json()
}
).then(...)
Impartial / Invalid data
I am not familiar with the openweathermap API but from what i can see in the API the forecast list should always have complete non null objects.
But you could add some validation or guards by either e.g.:
Using a JSON schema validation like AVJ
Or having a parse method that checks for the list and returns non null elements
fetch(url).then(
response => {
if (response.status !== 200) {
throw new Error(`Expected status 200 ok got status: ${response.status}`)
}
return response.json()
}
).then(
forecast => {
// here you could validate using something like AVJ to
// check that the json response is valid
if (!valid(forecast)) {
throw new Error('Invalid forecast data')
}
// Some custom filtering and validation example
const list = forecast.list || []
return list.filter(
item => {
// filter out null objects
if (!item) {
return false
}
// other validations.
...
// validate the date is within your range
if (item.dt ...) {
return false
}
// valid item
return true
}
)
.map (
// extract the weather part
item => item.weather
)
}
).then(
weatherItems => {
// work with weather items here
}
)
I'm trying to export the data of my datatable into a json file.
The table is create with JQwidget on Angular6 and the data come from an API.
But, with the jqwidgets method exportData('json');, only can make a format of a json of the table.
[{"id":"1","name":"test"},
{"id":"2","name":"toto"}]
jsonExport(): void {
this.myDataTable.exportData('json');
};
I don't know how to change the format of the json to have something like that:
["number":"2",
"1":{"id":"1","name":"test"},
"2":{"id":"2","name":"toto"}]
Thanks
I manage to do what I wanted, it goes like that:
First, You can't do it with JqWidgets https://www.jqwidgets.com/community/topic/how-to-generate-specific-json-with-exportdatajson-jqwidgets-and-angular/
Then, my solution is:
I created the String inside my Nodejs API as a GET.
app.get('jsonfile', function (req, res) {
res.header("Content-Disposition", "attachment;filename=\filename.txt\"");
connection.query('select * from heroes', function(error, results, fields) {
if (error) throw error;
var JSONstring = "[";
...
...
...
JSONstring = "]";
res.end(JSONstring);
console.log(JSONstring);
});
});
res.header('Content-Disposition', 'attachment;filename=\filename.txt\""); is mandatory for my solutio if you want to make this JSON string downloalable as a file.
I tried to use this end-point just like the others but I had this problem :
ERROR
Object { headers: {…}, status: 200, statusText: "OK", url: "http://localhost:3000/jsonfile", ok: false, name: "HttpErrorResponse", message: "Http failure during parsing for http://localhost:3000/jsonfile", error: {…} }
Because it was not working with a button click and ts function.
Instead I just made this:
<a href="http://localhost:3000/jsonfile" ><button>Creation JSON File</button></a>
It works for me, but if there are better solutions, I will be glad to know.
Thanks all for your help!
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>
Hi I am trying to make a http request from this rss feed. I tried this:
makeRequest() {
this.http.get('http://www.gazetaexpress.com/rss/auto-tech/?xml=1')
.subscribe(data => {
this.posts = data;
console.log("request funktioniert");
}, error => {
console.log(JSON.stringify(error.json()));
});
}
When I use {{posts}} in the html page it returns:
Response with status: 200 OK for URL: http://m.gazetaexpress.com/mobile/rss/auto-tech/?xml=1
When using {{post | json}} it return the whole html page. I tried using:
this.http.get('http://www.gazetaexpress.com/rss/ballina/?xml=1').map(res => res.json())
instead for the first line but it returned an error:
TypeError: error.json is not a function
Please help me :D
EDIT
I imported the xml2js library and typings and imported in the ts file:
import * as xml2js from "xml2js"
And changed the request to:
makeRequest() {
this.http.get('http://www.gazetaexpress.com/rss/auto-tech/?xml=1').subscribe(data => {
this.posts = data;
xml2js.parseString(this.posts, function (err, result) {
console.log(result);
});
}, error => {
console.log(JSON.stringify(error.json()));
});
}
The console returns undefined...
EDIT 2
Okay I hotfixed the issue. I just took the hole string and cut it down to pieces using the node structure and using this.posts.replace(/\\t|\\n|\\r/gi, ""); to get rid of escaped chars. Surely there must be a good library working on this issue my code is pretty badass ;). I will overlook this code later on for now it`s working and thats okay. If you have some better ideas feel free to tell me :D
If you get a response of Status 200 OK you should be able to show the results as they are ordered on the website you are making the http request.
Try to fetch the data each when subscribing and use an asnyc pipe in your html code this should do the trick
In the following code I am getting data from server and filling array with them:
Vue.http.post('/dbdata', DataBody).then((response) => {
App.$refs.userContent.rasters_previews_list.$set(response); // putting JSON answer to Component data in userContent
console.log("App.$refs.userContent.rasters_previews_list: ", App.$refs.userContent.rasters_previews_list.length);
}, (response) => {
console.log("Error")
});
Now I am filling. data is declared in var userContent = Vue.extend({. I am using App.$refs.userContent.rasters_previews_list to set it's value, because one man from SO said that there is no other way to get access to constructor. I tried to do output of rasters_previews_list after changing with watch, but here is what I am see. http://img.ctrlv.in/img/16/08/04/57a326e39c1a4.png I really do not understand am I setting it's right way or no. If yes, why I do not see data and see only this crap?
data: function () {
return {
rasters_previews_list: []
}
}
But How I can iterate it with v-for?
<ul v-for="img in rasters_previews_list">
<li>{{img}}</li>
<ul>
This code is display one bullet. So it's look like it's assume that there is one object.
My object in browser console look like:
Object {request: Object, data: Array[10], status: 200, statusText: "OK", ok: true}
Your setting the full response instead of just the data you actually need.
Vue.http.post('/dbdata', DataBody).then((response) => {
App.$refs.userContent.rasters_previews_list.$set(response.data);
console.log("App.$refs.userContent.rasters_previews_list: ", App.$refs.userContent.rasters_previews_list.length);
}, (response) => {
console.log("Error")
});
If this isn't what you are looking for please post a full example.