Angular2 : Iterate to get only array I decide - arrays

I need to iterate over json objects and array and for a specific thing I need return only array with my reviews.
I get and endpoint from my api like this :
{total_reviews: 206, average_score: 4.2,…}
average_score
:
4.2
reviews
:
[{meta_id: "259", rating_post_id: "5", rating_user_id: "1", rating_user_name: "christophe",…},…]
total_reviews
:
206
And in my angular service, I getting my endpoint like this :
getReviewsByPostId(paramsObj) {
let params = this.util.transformRequest(paramsObj);
return this.http.get(this.wpApiURL + '/reviews?' + params)
.map(res => {
this.reviews = res.json();
return this.reviews;
});
}
I also have a component :
loadReviews(postId) {
this.wp.getReviewsByPostId({post: postId}).subscribe(
data => {
console.log(data);
this.reviews = data;
},
error => {}
);
}
What's the method te return only reviews array in my angular app ? And not total_reviews and average_score
Thank you !

You can directly access the "reviews" value from your json response
Im not sure of the exact syntax but try one of the following
res.json().reviews
or
res.reviews
You could alternatively run a 'foreach' on your JSON response to only take the value of a specific key you require(in your case'reviews')
example:
getReviewsByPostId(paramsObj) {
let params = this.util.transformRequest(paramsObj);
return this.http.get(this.wpApiURL + '/reviews?' + params)
.map(res => {
this.reviews = res.json();
angular.forEach(this.reviews,function (key,value){
if(key==='reviews'){
//store value in an array or any other data container
}
});
// return array/dataContainer;
});
}

Related

i need to access a POST request Response and that Response is An array of SearchSample objects Angular

The Function in my Component :
searchWithNyckel(){
const formData = new FormData();
formData.append('image', this.updateFormGroup.get('updateProduct.image').value);
this.productService.searchProductNyckel(formData).subscribe(
data => {
this.resForSearch= data
console.log(JSON.stringify(this.resForSearch));
// this.resForSearch.values()
}
)
}
The Function in my service :
searchProductNyckel(formData: FormData):Observable<SearchRes[]> {
const url = `https://www.nyckel.com/v0.9/functions/1wx5f2474e1ntc/search`
return this.httpClient.post<SearchRes[]>(url,formData);
}
The Console Response :
{
"searchSamples":
[{
"sampleId": "<sampleId>",
"distance": 0.86,
"externalId": "<externalId>"
}]
}
I NEED TO GET THE VALUE OF sampleId and distance
You can access the content of the response by using a map operator.
for instance:
this.productService.searchProductNyckel(formData).pipe(
map (response => response.searchSamples)
).subscribe((samples => console.log(sample))
will output the array of samples.
If you just want to access 1 variable of the 1st item of the array, you can use:
this.productService.searchProductNyckel(formData).pipe(
map (response => response.searchSamples[0].sampleId)
).subscribe((id => console.log(id))

ANGULAR Components array key in result get value by id

this.crudService.get('user.php?mode=test')
.subscribe((data:any) => {
{ for (var key in data) { this[key] = data[key]; } };
}
);
This use to work on angular 7 now on angular 13 i get this error (look image)
In template i was using the values for example in json string was and array and i had users, in template was {{users}} , {{posts}} etc.. now the this[key] give error , please help me out its very important can't find solution
i'll show an example code, and then applied to your code:
Example
// creating global variables to receive the values
users: any = null;
posts: any = null;
// simulating the data you will receive
data: any[] = [
{users: ['user1', 'user2', 'user3']},
{posts: ['post1', 'post2', 'post3']}
];
getCrudService() {
// access each object of the array
this.data.forEach(obj => {
// getting keys name and doing something with it
Object.keys(obj).forEach(key => {
// accessing global variable and setting array value by key name
this[String(key)] = obj[String(key)]
})
})
}
Apllied to your code
this.crudService.get('user.php?mode=test').subscribe((data:any) => {
data.forEach(obj => {
Object.keys(obj).forEach(key => {
this[String(key)] = obj[String(key)]
});
});
});
I hope it helped you, if you need help, just reply me.

Values are not stored in array AsyncStorage react native

I am trying to store values in AsyncStorage as array, but values are not saving there and getting nothing when i try to get the values from array.Any help would be appreciated.Thank you in advance,here is my code :
let searchString = this.state.inputValue
AsyncStorage.getItem('searches', (res) => {
var searches
if (res === null) {
searches = []
}else {
searches = JSON.parse(res)
}
searches.push({
searchString: searchString
})
AsyncStorage.setItem('searches', JSON.stringify(searches), (res) => {
console.log('====FirstPage====setItem==async==='+res)
})
});
//getting values from asyncstorage :
AsyncStorage.getItem('searches', (res) => {console.log('===res==='+res)})
Please try this
AsyncStorage.getItem("searches").then((value) => {
this.setState({"searches": value});
}).done();
Also see
https://www.thepolyglotdeveloper.com/2015/09/saving-data-in-your-react-native-mobile-application/
You can store the data as following:
AsyncStorage.setItem('searches', JSON.stringify(searchString));
In order to fetch/get, you can do that using following:
AsyncStorage.getItem('searches', (err, result) => { // err indicating the error
console.log("Storage Data(String):", result); // print is string format
console.log("Storage Data(Object):", JSON.parse(result)); // print is json format
})

Angular 5 display result from JSON response

I am trying to access the "list" parameter in the following data set received from [Open weather map][1]. I basically need to access the list layer in the below set where I can get the temp parameter.
{
"cod":"200",
"message":0.0046,
"cnt":37,
"list":[
{
"dt":1518080400,
"main":{
"temp":297.81,
"temp_min":295.457,
"temp_max":297.81,
"pressure":1011.64,
"sea_level":1018.79,
"grnd_level":1011.64,
"humidity":71,
"temp_kf":2.35
},
"weather":[
{
"id":800,
"main":"Clear",
"description":"clear sky",
"icon":"01d"
}
],
"clouds":{
"all":0
},
"wind":{
"speed":3.76,
"deg":322.502
},
"sys":{
"pod":"d"
},
"dt_txt":"2018-02-08 09:00:00"
},
{
"dt":1518091200,
"main":{
"temp":298.03,
"temp_min":296.468,
"temp_max":298.03,
"pressure":1010.47,
"sea_level":1017.64,
"grnd_level":1010.47,
"humidity":65,
"temp_kf":1.57
},
"weather":[
{
"id":802,
"main":"Clouds",
"description":"scattered clouds",
"icon":"03d"
}
],
"clouds":{
"all":48
},
"wind":{
"speed":4.77,
"deg":315
},
"sys":{
"pod":"d"
},
"dt_txt":"2018-02-08 12:00:00"
},
{
"dt":1518102000,
"main":{
"temp":294.89,
"temp_min":294.104,
"temp_max":294.89,
"pressure":1011.17,
"sea_level":1018.11,
"grnd_level":1011.17,
"humidity":77,
"temp_kf":0.78
},
"weather":[
{
"id":802,
"main":"Clouds",
"description":"scattered clouds",
"icon":"03d"
}
],
"clouds":{
"all":44
},
"wind":{
"speed":4.91,
"deg":287.002
},
"sys":{
"pod":"d"
},
"dt_txt":"2018-02-08 15:00:00"
}
]}
I am not sure as to how to go about it. I keep on getting this error "ERROR Error: Cannot find a differ supporting object"
I tried looping through it like below
this.http.get('http://api.openweathermap.org/data/2.5/forecast?id=3362024&APPID=bbcf57969e78d1300a815765b7d587f0').subscribe(data => {
this.items = JSON.stringify(data);
console.log(this.items);
for(var i = 0; i < this.items.length; i++){
this.min = this.items[i].dt;
console.log(this.min);
}
});
Try this. Make sure you import following import on top of the component
import 'rxjs/Rx';
or
import 'rxjs/add/operator/map'
getData(){
this.http.get('https://api.openweathermap.org/data/2.5/forecast?id=3362024&APPID=bbcf57969e78d1300a815765b7d587f0')
.map(res=>res.json()).subscribe(data => {
this.items = data;
console.log(this.items);
for(var i = 0; i < this.items.list.length; i++){
this.min = this.items.list[i].main;
console.log(this.min);
}
});
}
WORKING DEMO
Do console.log(data); and check what kind of data you are getting from API.
If you are getting JSON data from API, then do not do JSON.stringify(data);
If you are getting JSON contained in string then do JSON.parse();
After this you will get JSON in a variable and you can iterate it as follows
Also, do not post your api key in question , others can hit API using your api key
this.http.get('http://api.openweathermap.org/data/2.5/forecast?id=yourId&APPID=yourapikey')
.subscribe(data => {
var res = JSON.parse(data); //if you are getting JSON in a string, else do res = data;
for(var i = 0; i < res.list.length; i++){
console.log(res.list[i].main.temp);
}
});
Considering you are correctly getting json response:=>
One way is :
if you know response in advance and its basic structure is always same then:
you can create a model object similar to the json response and assign the json response to that object and access any values.
e.g.
export class TopLayer{
fieldName1: dataType;
fieldName2: Array<SecondLayer>;
}
export class SecondLayer{
fieldName1: datatype;
fieldName2: ThirdLayer;
}
export class ThirdLayer{
fieldName: datatype
}
another is: assign your json response to a var variable then access what you need:
e.g.
var x = response;
var list = x.list;
We can also do:
this.http.get("some-api-url")
.subscribe((response)=>{
for (let key in response) {
if (response.hasOwnProperty(key)) {
let element = response[key];
let singleData = {id: element.id, value: element.value};
this.dataArray.push(singleData);
}
}
},
(error)=>{
console.log(error)
});
When the response is like [{}, {}, ...]

Angular: What's the correct way to return Observable?

I have the following method which isn't working correct:
getProducts(): Observable<Product[]> {
let PRODUCTS: Product[];
this.http.get(this.base_url + "api/products")
.subscribe(
(data) => {
for(var i in data) {
PRODUCTS.push(new Product(data[i].id, data[i].name, data[i].category, data[i].description, data[i].price, data[i].amount));
}
},
(error) => {
console.log(error);
});
return of(PRODUCTS);
}
The error I'm getting is this:
TypeError: Cannot read property 'push' of undefined
Now, I know that the PRODUCT array is not accessable from within the subscribe function, but I cannot get the correct solution for it.
Can anyone help me with that. I want to return an Observable<Product[]>.
Thank you in advance!
Edit: Updated to account for the fact that the API seems to return an array-like object rather than a true array.
You want to use map:
getProducts(): Observable<Product[]> {
return this.http.get(this.base_url + "api/products")
.map(data => {
let products = [];
for (let i in data) {
products.push(new Product(data[i].id, data[i].name, data[i].category, data[i].description, data[i].price, data[i].amount));
}
return products;
})
.do(null, console.log);
}
Since #pixelbit's comment keeps getting upvotes despite being wrong, here's an example showing why it is wrong:
// Fakes a HTTP call which takes half a second to return
const api$ = Rx.Observable.of([1, 2, 3]).delay(500);
function getProducts() {
let products = [];
api$.subscribe(data => {
for (let i in data) {
products.push(data[i]);
}
});
return Rx.Observable.of(products);
}
// Logs '[]' instead of '[1, 2, 3]'
getProducts().subscribe(console.log);

Resources