Problem with $ .getJSON.then ()

Question

Problem with $ .getJSON.then ()

Navigation

#1 by (1 votes)
#2 by (0 votes)

4

I do a data extraction with $ .getJSON () without problems, I get what I want from my database and then I work with .then but in this line

getKeys().then(data => data.map(key => keys.push(key)));

that I keep in my variable 'keys' which is an array but when I open it in the browser I see it by console and it comes out like this [], I click and it unfolds in this way

Array[0]
0:Object
1:Object
length:2

and the array remains as an object type, preventing me from mapping it, how can I make it mappable without having to do this.setState () in React? (with mappable I mean Array.prototype.map ())

javascript jquery reactjs react

asked by Orlando Andaur 15.03.2017 в 20:24

source

2 answers

Integrate Materialize css in Laravel 5.4 Group and concatenate columns of more than one row in a Javascript, such as STUFF in SQL

score 1 · Answer 1

I already solved it with this:

getKeys().then(data => this.setState({ keys : data.filter(info => info.keygen == key) }))

The idea is that it does not reveal all the keys to me but only reveals the one that was selected, that's why I filtered it with respect to what was sent. Greetings and thanks for the answers.

score 0 · Answer 2

You are using promises. The promises are executed asynchronously, so if you try to access 'keys' outside of the promise, probably the line where you print the content will run before the promise itself, therefore it will print an empty array but when you inspect the object in the debugger you will surely see that it is already full of values, this because the asynchronous code is probably only out of phase by thousandths.

If you print keys in this way

getKeys().then(data => data.map(key => keys.push(key))); // asincrono
console.trace(keys);

the second line will be executed before the promise, to work with the values of the promise and to change the state of the React component, you must change the state at the end of the execution of the promise, this is achieved by doing it within the chain of promises, not outside.

getKeys()
    .then(data => {
        data.map(key => keys.push(key));
        return keys;
    })
    .then(keys => {
        ... alguna logica extra
        this.setState({keys: keys})
    })

On the last part the variable 'keys' is still an array, it is not an object.

to work with asynchronous code you can also use async / await which also involves promises