Arrays length returns undefined?

I am making a Chrome Extension, and I use the chrome.storage API in it. I am not putting my full code here (as its over 200 lines), but I'm putting enough that will probably show what I'm trying to do.

Content Script (a script injected into a webpage due to my extension):

....

var videos = 

var imgs = 

var img = this.getElementsByTagName('img')

var video = this.getElementsByTagName('video')

for (i = 0; i <img.length; i++){

    if (img[i].className == "FFVAD"){

        imgs.push(img[i].src)

        addselection(img[i].parentNode.parentNode)

    }

}

for (i = 0; i <video.length; i++){

    if (video[i].className == "tWeCl"){

        videos.push(video[i].src)

        addselectionV(video[i].parentNode.parentNode)

    }

}



function addselectionV(e){

    e.style.border = "2px solid red"

    console.log(videos)

    for (var i = 0; i < videos.length; i++){

        chrome.storage.sync.set({['video'+i]: videos[i]}, function() {

          console.log('Value is set to ' + videos[i] + ' and key is set to ' + ['video'+i]);

    })



   chrome.storage.sync.set({vcount: videos.length}, function() {

      document.querySelector('.selectionbar').innerHTML = "Item(s) selected: "+videos.length

    });

}

I noticed that it wasn't working, so I added console.log(videos) to print the item in the array. It was there, so I did console.log(videos[0]) and it was also there too. I looked in the developer console and noticed during my for loop, videos.length is returning undefined. Which is strange because I seem to have set everything up correctly. (image of the console here)

edited Jan 3 at 0:57

asked Jan 3 at 0:47

johnboy13

336

You are looping over videos variable in a loop over video variable, within the one you add items to videos... That's pretty a mess

– quirimmo
Jan 3 at 0:50

@quirimmo I may have made a simple mistake in my code but could you please explain more on what you're talking about? It all seems right to me

– johnboy13
Jan 3 at 0:55

inside your second for, you loop over video, you call videos.push and then addselection. Inside addselection then, you loop over the videos

– quirimmo
Jan 3 at 0:58

@quirimmo I am looping through video which represents every video HTML element. Then, I'm adding that element's source (video.src) to the array, videos. I then loop through videos to find the item I just added to the array and put it's value in chrome.storage. At least that's what I think I'm doing.

– johnboy13
Jan 3 at 1:05

add a comment |

Content Script (a script injected into a webpage due to my extension):

....

var videos = 

var imgs = 

var img = this.getElementsByTagName('img')

var video = this.getElementsByTagName('video')

for (i = 0; i <img.length; i++){

    if (img[i].className == "FFVAD"){

        imgs.push(img[i].src)

        addselection(img[i].parentNode.parentNode)

    }

}

for (i = 0; i <video.length; i++){

    if (video[i].className == "tWeCl"){

        videos.push(video[i].src)

        addselectionV(video[i].parentNode.parentNode)

    }

}



function addselectionV(e){

    e.style.border = "2px solid red"

    console.log(videos)

    for (var i = 0; i < videos.length; i++){

        chrome.storage.sync.set({['video'+i]: videos[i]}, function() {

          console.log('Value is set to ' + videos[i] + ' and key is set to ' + ['video'+i]);

    })



   chrome.storage.sync.set({vcount: videos.length}, function() {

      document.querySelector('.selectionbar').innerHTML = "Item(s) selected: "+videos.length

    });

}

edited Jan 3 at 0:57

asked Jan 3 at 0:47

johnboy13

336

You are looping over videos variable in a loop over video variable, within the one you add items to videos... That's pretty a mess

– quirimmo
Jan 3 at 0:50

@quirimmo I may have made a simple mistake in my code but could you please explain more on what you're talking about? It all seems right to me

– johnboy13
Jan 3 at 0:55

inside your second for, you loop over video, you call videos.push and then addselection. Inside addselection then, you loop over the videos

– quirimmo
Jan 3 at 0:58

@quirimmo I am looping through video which represents every video HTML element. Then, I'm adding that element's source (video.src) to the array, videos. I then loop through videos to find the item I just added to the array and put it's value in chrome.storage. At least that's what I think I'm doing.

– johnboy13
Jan 3 at 1:05

add a comment |

Content Script (a script injected into a webpage due to my extension):

....

var videos = 

var imgs = 

var img = this.getElementsByTagName('img')

var video = this.getElementsByTagName('video')

for (i = 0; i <img.length; i++){

    if (img[i].className == "FFVAD"){

        imgs.push(img[i].src)

        addselection(img[i].parentNode.parentNode)

    }

}

for (i = 0; i <video.length; i++){

    if (video[i].className == "tWeCl"){

        videos.push(video[i].src)

        addselectionV(video[i].parentNode.parentNode)

    }

}



function addselectionV(e){

    e.style.border = "2px solid red"

    console.log(videos)

    for (var i = 0; i < videos.length; i++){

        chrome.storage.sync.set({['video'+i]: videos[i]}, function() {

          console.log('Value is set to ' + videos[i] + ' and key is set to ' + ['video'+i]);

    })



   chrome.storage.sync.set({vcount: videos.length}, function() {

      document.querySelector('.selectionbar').innerHTML = "Item(s) selected: "+videos.length

    });

}

edited Jan 3 at 0:57

asked Jan 3 at 0:47

johnboy13

336

Content Script (a script injected into a webpage due to my extension):

....

var videos = 

var imgs = 

var img = this.getElementsByTagName('img')

var video = this.getElementsByTagName('video')

for (i = 0; i <img.length; i++){

    if (img[i].className == "FFVAD"){

        imgs.push(img[i].src)

        addselection(img[i].parentNode.parentNode)

    }

}

for (i = 0; i <video.length; i++){

    if (video[i].className == "tWeCl"){

        videos.push(video[i].src)

        addselectionV(video[i].parentNode.parentNode)

    }

}



function addselectionV(e){

    e.style.border = "2px solid red"

    console.log(videos)

    for (var i = 0; i < videos.length; i++){

        chrome.storage.sync.set({['video'+i]: videos[i]}, function() {

          console.log('Value is set to ' + videos[i] + ' and key is set to ' + ['video'+i]);

    })



   chrome.storage.sync.set({vcount: videos.length}, function() {

      document.querySelector('.selectionbar').innerHTML = "Item(s) selected: "+videos.length

    });

}

javascript google-chrome-extension

edited Jan 3 at 0:57

asked Jan 3 at 0:47

johnboy13

336

edited Jan 3 at 0:57

asked Jan 3 at 0:47

johnboy13

336

edited Jan 3 at 0:57

asked Jan 3 at 0:47

johnboy13

336

asked Jan 3 at 0:47

johnboy13

336

asked Jan 3 at 0:47

johnboy13

336

You are looping over videos variable in a loop over video variable, within the one you add items to videos... That's pretty a mess

– quirimmo
Jan 3 at 0:50

@quirimmo I may have made a simple mistake in my code but could you please explain more on what you're talking about? It all seems right to me

– johnboy13
Jan 3 at 0:55

inside your second for, you loop over video, you call videos.push and then addselection. Inside addselection then, you loop over the videos

– quirimmo
Jan 3 at 0:58

@quirimmo I am looping through video which represents every video HTML element. Then, I'm adding that element's source (video.src) to the array, videos. I then loop through videos to find the item I just added to the array and put it's value in chrome.storage. At least that's what I think I'm doing.

– johnboy13
Jan 3 at 1:05

add a comment |

You are looping over videos variable in a loop over video variable, within the one you add items to videos... That's pretty a mess

– quirimmo
Jan 3 at 0:50

@quirimmo I may have made a simple mistake in my code but could you please explain more on what you're talking about? It all seems right to me

– johnboy13
Jan 3 at 0:55

inside your second for, you loop over video, you call videos.push and then addselection. Inside addselection then, you loop over the videos

– quirimmo
Jan 3 at 0:58

@quirimmo I am looping through video which represents every video HTML element. Then, I'm adding that element's source (video.src) to the array, videos. I then loop through videos to find the item I just added to the array and put it's value in chrome.storage. At least that's what I think I'm doing.

– johnboy13
Jan 3 at 1:05

You are looping over videos variable in a loop over video variable, within the one you add items to videos... That's pretty a mess

– quirimmo
Jan 3 at 0:50

@quirimmo I may have made a simple mistake in my code but could you please explain more on what you're talking about? It all seems right to me

– johnboy13
Jan 3 at 0:55

inside your second for, you loop over video, you call videos.push and then addselection. Inside addselection then, you loop over the videos

– quirimmo
Jan 3 at 0:58

@quirimmo I am looping through video which represents every video HTML element. Then, I'm adding that element's source (video.src) to the array, videos. I then loop through videos to find the item I just added to the array and put it's value in chrome.storage. At least that's what I think I'm doing.

– johnboy13
Jan 3 at 1:05

add a comment |

2 Answers
2

active

oldest

votes

Based on the documentation (https://developer.chrome.com/extensions/storage) it looks like the chrome storage API runs asynchronously. What is most likely occurring is the console.log fires before the item is put in storage which is why you are getting undefined.

answered Jan 3 at 1:10

Nick Codes

154

how would I make changes to my code to make it work?

– johnboy13
Jan 3 at 3:07

The modern solution is to load the WebExtension polyfill and use async/await as shown in the link.

– wOxxOm
Jan 3 at 6:05

add a comment |

Thank you to @NickCodes for telling me that chrome.storage is asynchronous. So, I modified my code to make it asynchronous and it works perfectly fine!

function addselection(e){



    var fetchData = function () {

        return new Promise(function (resolve, reject) {

            resolve();

        });

    };

    function appendOutput (i,item) {

        fetchData(item).then(function () {

            chrome.storage.sync.set({['image'+i]: item}, function() {

                console.log('Value is set to ' + item + ' and key is set to ' + 'images'+i);

            })

            chrome.storage.sync.set({count: i}, function() {

                c = i + 1

                document.querySelector('.selectionbar').innerHTML = "Item(s) selected: "+ c

            });

        });

    }

    for (var i = 0; i < imgs.length; i++){

        console.log(imgs[i])

        appendOutput(i,imgs[i])

    }



}

answered Jan 3 at 17:09

johnboy13

336

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54015029%2farrays-length-returns-undefined%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

answered Jan 3 at 1:10

Nick Codes

154

how would I make changes to my code to make it work?

– johnboy13
Jan 3 at 3:07

The modern solution is to load the WebExtension polyfill and use async/await as shown in the link.

– wOxxOm
Jan 3 at 6:05

add a comment |

answered Jan 3 at 1:10

Nick Codes

154

how would I make changes to my code to make it work?

– johnboy13
Jan 3 at 3:07

The modern solution is to load the WebExtension polyfill and use async/await as shown in the link.

– wOxxOm
Jan 3 at 6:05

add a comment |

answered Jan 3 at 1:10

Nick Codes

154

answered Jan 3 at 1:10

Nick Codes

154

answered Jan 3 at 1:10

Nick Codes

154

answered Jan 3 at 1:10

Nick Codes

154

answered Jan 3 at 1:10

Nick Codes

154

how would I make changes to my code to make it work?

– johnboy13
Jan 3 at 3:07

The modern solution is to load the WebExtension polyfill and use async/await as shown in the link.

– wOxxOm
Jan 3 at 6:05

add a comment |

how would I make changes to my code to make it work?

– johnboy13
Jan 3 at 3:07

The modern solution is to load the WebExtension polyfill and use async/await as shown in the link.

– wOxxOm
Jan 3 at 6:05

how would I make changes to my code to make it work?

– johnboy13
Jan 3 at 3:07

The modern solution is to load the WebExtension polyfill and use async/await as shown in the link.

– wOxxOm
Jan 3 at 6:05

add a comment |

Thank you to @NickCodes for telling me that chrome.storage is asynchronous. So, I modified my code to make it asynchronous and it works perfectly fine!

function addselection(e){



    var fetchData = function () {

        return new Promise(function (resolve, reject) {

            resolve();

        });

    };

    function appendOutput (i,item) {

        fetchData(item).then(function () {

            chrome.storage.sync.set({['image'+i]: item}, function() {

                console.log('Value is set to ' + item + ' and key is set to ' + 'images'+i);

            })

            chrome.storage.sync.set({count: i}, function() {

                c = i + 1

                document.querySelector('.selectionbar').innerHTML = "Item(s) selected: "+ c

            });

        });

    }

    for (var i = 0; i < imgs.length; i++){

        console.log(imgs[i])

        appendOutput(i,imgs[i])

    }



}

answered Jan 3 at 17:09

johnboy13

336

add a comment |

Thank you to @NickCodes for telling me that chrome.storage is asynchronous. So, I modified my code to make it asynchronous and it works perfectly fine!

function addselection(e){



    var fetchData = function () {

        return new Promise(function (resolve, reject) {

            resolve();

        });

    };

    function appendOutput (i,item) {

        fetchData(item).then(function () {

            chrome.storage.sync.set({['image'+i]: item}, function() {

                console.log('Value is set to ' + item + ' and key is set to ' + 'images'+i);

            })

            chrome.storage.sync.set({count: i}, function() {

                c = i + 1

                document.querySelector('.selectionbar').innerHTML = "Item(s) selected: "+ c

            });

        });

    }

    for (var i = 0; i < imgs.length; i++){

        console.log(imgs[i])

        appendOutput(i,imgs[i])

    }



}

answered Jan 3 at 17:09

johnboy13

336

add a comment |

Thank you to @NickCodes for telling me that chrome.storage is asynchronous. So, I modified my code to make it asynchronous and it works perfectly fine!

function addselection(e){



    var fetchData = function () {

        return new Promise(function (resolve, reject) {

            resolve();

        });

    };

    function appendOutput (i,item) {

        fetchData(item).then(function () {

            chrome.storage.sync.set({['image'+i]: item}, function() {

                console.log('Value is set to ' + item + ' and key is set to ' + 'images'+i);

            })

            chrome.storage.sync.set({count: i}, function() {

                c = i + 1

                document.querySelector('.selectionbar').innerHTML = "Item(s) selected: "+ c

            });

        });

    }

    for (var i = 0; i < imgs.length; i++){

        console.log(imgs[i])

        appendOutput(i,imgs[i])

    }



}

answered Jan 3 at 17:09

johnboy13

336

Thank you to @NickCodes for telling me that chrome.storage is asynchronous. So, I modified my code to make it asynchronous and it works perfectly fine!

function addselection(e){



    var fetchData = function () {

        return new Promise(function (resolve, reject) {

            resolve();

        });

    };

    function appendOutput (i,item) {

        fetchData(item).then(function () {

            chrome.storage.sync.set({['image'+i]: item}, function() {

                console.log('Value is set to ' + item + ' and key is set to ' + 'images'+i);

            })

            chrome.storage.sync.set({count: i}, function() {

                c = i + 1

                document.querySelector('.selectionbar').innerHTML = "Item(s) selected: "+ c

            });

        });

    }

    for (var i = 0; i < imgs.length; i++){

        console.log(imgs[i])

        appendOutput(i,imgs[i])

    }



}

answered Jan 3 at 17:09

johnboy13

336

answered Jan 3 at 17:09

johnboy13

336

answered Jan 3 at 17:09

johnboy13

336

answered Jan 3 at 17:09

johnboy13

336

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

Search This Blog

Ufyukyu