Cannot push item to array with map() and async-await

Question

I'm making a discord bot to play youtube video. I'm using this google API to get the video titles from their IDs but the get_title() function returns an empty jsons array.

I've tried to log the jsons array right after the request() function and right after the map() function but they both return empty arrays. If i console.log(jsons) right after jsons.push(json) , it does return arrays with titles.

const browser = require('https')
var urls = ['https://www.googleapis.com/youtube/v3/videos?key=AIzaSyC7udvST-lyLpx_gxHBc22kGYhEUOeQz5k&part=snippet&id=QKm4q6kZK7E', 'https://www.googleapis.com/youtube/v3/videos?key=AIzaSyC7udvST-lyLpx_gxHBc22kGYhEUOeQz5k&part=snippet&id=ib3fDx75Esw']

function get_title() {
    return new Promise(function(resolve, reject) {
        var jsons = []
        urls.map(url => {
            browser.request(url, res => {
                let body = ''
                res.on('data', data => {
                    body += data
                })
                res.on('end', () => {
                    var json = JSON.parse(body).items[0].snippet.title
                    jsons.push(json)
                })
            }).end()
        })
        resolve(jsons)

    })
}
async function main() {
    res = await get_title()
    console.log(res)
}
main()

I expect the output to be like this

[ 'Santa Tracker: Making a penguin-proof password','Google Duo: Stay in touch after the Holidays' ]

You are returning jsons before you receive any response for your API calls. The data is pushed to jsons, but the result has already been returned. — Sachin Gupta
– Sachin Gupta, Commented Dec 28, 2018 at 20:02
@SachinGupta i've just edited the code. I tried using promise but resolve didnt work too. — Minh Doan
– Minh Doan, Commented Dec 28, 2018 at 20:14

trincot · Accepted Answer · 2018-12-28 20:18:04Z

3

You need a separate promise for each URL request, and then use Promise.all, which will await them all and will gather the responses in an array:

function get_title() {
    return Promise.all(urls.map(url => {
        return new Promise(function(resolve, reject) {
            browser.request(url, res => {
                let body = ''
                res.on('data', data => {
                    body += data
                })
                res.on('end', () => {
                    var json = JSON.parse(body).items[0].snippet.title
                    resolve(json)
                })
            }).end()
        })
    })
}

answered Dec 28, 2018 at 20:18

trincot

357k38 gold badges282 silver badges338 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

r0hitsharma · Accepted Answer · 2018-12-28 20:32:24Z

1

Since Promise.all() takes in an array, it helped to consume the map that you have setup. This way you also don't have to track the array:

function get_title() {
    return Promise.all(
        urls.map(url => new Promise(function(resolve, reject) {
            browser.request(url, res => {
                let body = ''
                res.on('data', data => {
                    body += data
                })
                res.on('end', () => {
                    var json = JSON.parse(body).items[0].snippet.title
                    resolve(json)
                })
            }).end()
        }))
    )
}

answered Dec 28, 2018 at 20:32

r0hitsharma

1,7821 gold badge13 silver badges16 bronze badges

Collectives™ on Stack Overflow

Cannot push item to array with map() and async-await

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related