Array is undefined when trying to load data into Array - arrays

Im trying to load data into an array and just added soem console.log to test if it works.
reload(){
this.dataService.getPostoffice()
.subscribe(data => this.poArray= data);
console.log(this.poArray);
}
Sadly the array is undefined at this point. I mean im filling the data into the array there but its still undefined. If I try to console.log that array later in the code its working fine and logs the full data of the array. Can someone help me? :)

You are filling the array asynchronously that is why the array is filled but you are not displaying it at a correct time.
reload(){
this.dataService.getPostoffice()
.subscribe(data => {
this.poArray= data;
console.log(this.poArray);
});
}

Here you nee to have the console inside the subscribe like the snippet below:
reload(){
this.dataService.getPostoffice()
.subscribe(data => {
this.poArray= data;
console.log(this.poArray);
});
}
Hope this helps.

Related

How to map Data data(Array) ,if data was a value of object

const [data,setData]=useState([])
i have Received that data as {results:[20objects],info:{}}
i have tried console log of Object.values(data) showing that [[20 objects],{}]
i have to do map over that 20 objects Array ?
From your logging [[20 objects],{}] it seems that your data object is an array and your results array is the 1st element.
So you can access it through data[0].
Then you can map over these 20 objects by using .map on your array.
The code should look like this:
data[0].map((object) => { //some logic here })
Assuming data is {results:[20objects],info:{}}:
data.results.map((item) => {
// do stuff here
})
or
data['results'].map((item) => {
// do stuff here
})

Angular- I got 'undefined' as an output of an array object while I have data in my array object

i have an API whose response is given below in the screenshot. I want to fetch data of my array object and display on the web page. But I got undefined as an output, while i have data in my array object. Please tell me where am doing wrong.
services code:
testfxn(){
return(
this.apiCallService.GET(`${this.myService.myendpoint.xyz}`)
.pipe(
map((testData)=>{
let testresp=testData.response[4];
return testresp;
})
)
);
}
component.ts:
testing(){
this.reportService.testfxn().subscribe((r)=>{
this.resp=r
console.log(this.resp)
})
}
testing(){
this.reportService.testfxn().subscribe((data) => {
this.testingdate=data;
console.log(this.testingdate);
});
}
testfxn() is an asynchronous function. It is possible that your console.log gets executed before the function returns data and is consumed by subscribe()

Filter React Native Data

I searched all day but I didn't find the solution to my problem.
I'm new to React Native so I'm stucked ...
Here's my problem :
I fetch an api to the get data, I'm doing it with axios and it's ok I can render my component !
Then I don't want to display ALL ITEMS of my Array but I want to display some items according to different values with 2 buttons :
<Button onPress={Get ALL ITEMS with this value}/>
<Button onPress={Get ALL ITEMS with ANOTHER VALUE} />
My issue is that I'm modifying the state of my array 'products' with new information but that's not what I want. I always want that I'm displaying information according to a particular VALUE in the Array and still get my Full Array...
Here's some piece of code of what I'm doing :
onPressFirstButton() {
let newArray = [...this.state.products];
this.setState({
products: newArray.filter(function(product){
return product.value == 32;
})
});
}
onPressSecondButton() {
let otherArray = [...this.state.products];
this.setState({
products: otherArray.filter(function(product){
return product.other_value == 389;
})
});
}
I'm sure it's not the best way because it's not working.. I hope you will understand what I'm trying to say..
Thank you
Since you seem to be using the products property to populate your template, consider using a separate variable for that instead, that way you don’t have to mess with your state when doing your filtering. Maybe this will help:
displayProducts = []
onPressFirstButton () {
this.displayProducts = this.state.products.filter(product => /* logic */)
}

Can't access element of Array

I'm adding elements to an array using a service, which successfully adds the elements. I can see the data populated with a console.log
I can't however access the element.
this.routingService.getNode(startNode).subscribe(node => {
node.forEach(node => {
this.openSet.push(new MapNode(node.id, node.lon, node.lat, this.routingService.getNodeNeighbours(node.id)));
});
});
console.log(this.openSet); // this prints out the below screenshot
However, when I use something like:
console.log(this.openSet[0]);
I get output of 'undefined'. I'm not sure if I'm being really thick right now in how I'm accessing it or not...
Any ideas?
subscribe works asynchron, so console.log() will log before the forEach loop runs. It's the same async behaviour as in this little piece of code
let foo = [];
setTimeout(() => {
foo.push(1);
foo.push(2);
}, 500);
console.log(foo); // logs []
Please see the duplicate post for options on how to work with asynchronity.
How to return the response from an asynchronous call?

how to get column headers and return to text list

Has anyone got any ideas on how to get a list of column header on the data grid. I have the issue that I can get text from the list of element on protractor. The return value always are promise and I don't know on Protractor how to get text on these promise before continue the next steps.
function getcolumnheaderlist(columnheader){
var textlist = [];
var promiselist = element.all(by.css('thead[role="rowgroup"] tr th a')).map(function (elmt) {
return elmt.getText();
});
promiselist.then(function (array) {
textlist.push(array);
});
console.log(textlist);
}
As my code above, the console alway print out empty. How I can force the action "get text" excute before printing out on console?
If you want to see the result or the resolve promises on the console, you need to put console.log() into then() function:
promiselist.then(function (headers) {
console.log(headers);
});

Resources