Array that is filled with objects has wrong length?

Question

I'm creating a React-native app, and I'm getting some data with AsyncStorage which I transform into an Array with Objects which will be combined/concatnated with data that I fetch from an API

const available_streams = streams.channels.filter(stream => !stream.is_live)
const the_streams = available_streams.map(available_stream => {
  available_stream.checked = false
  return available_stream
})

console.log(the_streams) :
(3) [{…}, {…}, {…}]
0: {name: "channel1", url: "wss%3A%2F%2Fwebsite.com", app_name: "streams", server_name: "channel1", is_live: false, …}
1: {name: "channel3", url: "wss%3A%2F%2Fwebsite.com", app_name: "streams", server_name: "channel3", is_live: false, …}
2: {app_name: "sms", url: "website.com:4443", server_name: "93b5d83448", name: "Test", is_live: false, …}
length: 3

 let saved_stream_names = []
 // LOCAL VALUES
 get_session_value('url').then(url => {
    get_session_object('stream_names')
    .then(stream_names => {
       stream_names.forEach(name => {
           saved_stream_names.push({
                 name: name,
                 checked: false,
                 is_live: false,
                 url: url
            })
       })
    })
 })
Array.prototype.push.apply(saved_stream_names, the_streams)
console.log(saved_stream_names)

the console.log prints the following:

(3) [{…}, {…}, {…}] <---- !! WHY 3 ?!!
0: {name: "channel1", url: "wss%3A%2F%2F.website.com", app_name: "streams", server_name: "channel1", is_live: false, …}
1: {name: "channel3", url: "wss%3A%2F%2Fwebsite.com", app_name: "streams", server_name: "channel3", is_live: false, …}
2: {app_name: "sms", url: "wss://website3:4443/", server_name: "93b5d83448", name: "Test", is_live: false, …}
3: {name: "Xxx", checked: false, is_live: false, url: "https://website.com/"}
4: {name: "Next", checked: false, is_live: false, url: "website.com"}
5: {name: "Arghhj", checked: false, is_live: false, url: "https://website.com/"}
length: 6

also console.log(saved_stream_names.length) says it's 3 in size and i cannot loop over the last 3 objects. What kind of wizardry is this?

[Could be useful information](https://stackoverflow.com/questions/23392111/console-log-async-or-sync). — Andy, Jul 28 '21 at 09:25

score 1 · Accepted Answer · answered Jul 28 '21 at 09:28

It is a synchronicity problem.

get_session_value('url')

Returns a promise, the code inside the then() will only execute when this promise is solved. Even tho console.log(saved_stream_names) is the last line of code, it is being executed before the code inside the then(). Try moving the console.log to inside the then:

 let saved_stream_names = []
 // LOCAL VALUES
 get_session_value('url').then(url => {
    get_session_object('stream_names')
    .then(stream_names => {
       stream_names.forEach(name => {
           saved_stream_names.push(
              ({
                 name: name,
                 checked: false,
                 is_live: false,
                 url: url
               })
           )
       })
       console.log(saved_stream_names)
    })
 })
Array.prototype.push.apply(saved_stream_names, the_streams)

score 1 · Answer 2 · answered Jul 28 '21 at 09:34

I believe it might be because console.log gets called before get_session_value() finishes running. So when console.log is printed it only contains the values of the_streams. However since it is referencing an array, it will show the whole thing by the time you look at it. You can confirm this by doing console.log(JSON.stringify(saved_stream_names)).

I would suggest you put these lines of code:

Array.prototype.push.apply(saved_stream_names, the_streams)
console.log(saved_stream_names)

inside the get_session_object.then() function.

I recreated the whole thing using async/await and now it works... The ```JSON.stringify(saved_stream_names))``` gave me an empty array, so I could see that both you and "pcabete" were right — UnknownFrequency, Jul 28 '21 at 10:09

Array that is filled with objects has wrong length?

2 Answers2