Changing value in all inputs from array

Question

I write a simple function using hrome.storage.local.get

chrome.storage.local.get(['valueInput'], (result) => {
  if (typeof result.valueInput !== 'undefined') {
    let selectorInput = document.querySelectorAll('input');
    result.valueInput.forEach((item, index) => selectorInput[index].value = item);
  }
});

And i splice this code to independent function

function getFromeStorage(value) {
    let arr = [];
    chrome.storage.local.get(value, (result) => {
        if (typeof result.valueInput !== 'undefined') {
            result.valueInput.forEach((item, i) => arr[i] = item);
        }
    });
    return arr;
\\ Array(18)[0: "3" 1: "1" 2: "1" 3: "1" 4: "1" 5: "1" 6: "1" 7: "1" 8: "1" 9: "1" 10: "1" 11: "1" 12: "1" 13: "1" 14: "1" 15: "1" 16: "1" 17: "1"]

}

But when i splice this function this function wont work

let selectorInput = document.querySelectorAll('input');
let valueInput = getFromeStorage("valueInput");
valueInput.forEach((item, index) => selectorInput[index].value = item);

HTML

<tr>
    <td class="center-align">Administrowanie systemami operacyjnymi</td>
    <td class="center-align row">
    <input type="number" class="input-default-weight" min="1" max="20" value="1">
    <i id="hint-default-weight" class="material-icons md-dark center-vertically tooltipped hint" data-position="top" data-delay="250" data-tooltip="Ilość lekcji w tygodniu" data-tooltip-id="1b1400b4-3270-0b0c-da17-8540ce6f2408">info_outline</i></td>  
    <td class="center-align">5</td>
    <td class="center-align yearPresent">86%</td>
</tr>

This is the same code but i only splice my main code to function and i call this in my code. How can i fix this?

Does this answer your question? How to return value from an asynchronous callback function? — Titus
– Titus, Commented Apr 8, 2020 at 10:50

Always Learning · Accepted Answer · 2020-04-08 10:59:17Z

2

It looks like you're returning the arr variable before the callback has been called so it's always returning an empty array.

function getFromeStorage(value) {
    let arr = [];
    chrome.storage.local.get(value, (result) => {
        // This function won't fill 'arr' until later
        if (typeof result.valueInput !== 'undefined') {
            result.valueInput.forEach((item, i) => arr[i] = item);
        }
    });
    // This empty 'arr' gets returned too early
    return arr;

Since chrome.storage.local.get is asynchronous your function accessing it must deal with that. One way is to add a callback or Promise to your function. To keep it simple here's how it would look with a callback:

function getFromeStorage(value, callback) {
  chrome.storage.local.get(value, (result) => {
    const arr = [];
    if (typeof result.valueInput !== 'undefined') {
      result.valueInput.forEach((item, i) => arr[i] = item);
    }
    callback(arr);
  });
}

You would then have to change how you use the function to wait for the callback to be called like this:

let selectorInput = document.querySelectorAll('input');
let valueInput = getFromeStorage("valueInput", (valueInput) =>{
  valueInput.forEach((item, index) => selectorInput[index].value = item);
});

answered Apr 8, 2020 at 10:59

Always Learning

5,6332 gold badges20 silver badges35 bronze badges

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

7 Comments

pawel szewczyk Over a year ago

Thx bro for your amazing answer :D

Titus Over a year ago

Instead of populating a new array, you can simplify this by using callback(result.valueInput || [])

Always Learning Over a year ago

@Titus yes, but this question was about understanding the asynchronous behaviour so I wanted to focus on the way callbacks work rather than optimising other aspects of the code.

Titus Over a year ago

I get it, maybe the OP will see my comment and make the change himself.

pawel szewczyk Over a year ago

Is a way to add this variable to variable outside this function ?

|

Collectives™ on Stack Overflow

Changing value in all inputs from array

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related