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?](https://stackoverflow.com/questions/6847697/how-to-return-value-from-an-asynchronous-callback-function) — Titus, Apr 08 '20 at 10:50

score 2 · Accepted Answer · answered Apr 08 '20 at 10:59

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 08 '20 at 10:59

Always Learning

5,510
2
17
34

Thx bro for your amazing answer :D – pawel szewczyk Apr 08 '20 at 11:09
Instead of populating a new array, you can simplify this by using `callback(result.valueInput || [])` – Titus Apr 08 '20 at 11:14
@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. – Always Learning Apr 08 '20 at 14:29
I get it, maybe the OP will see my comment and make the change himself. – Titus Apr 08 '20 at 18:21
Is a way to add this variable to variable outside this function ? – pawel szewczyk Apr 09 '20 at 12:01
you can set a variable outside of the function to the value it has, but it will not hold that value until after the callback function has happened. To be sure you have the right value you should put the processing that depends on it within the body of the callback function. – Always Learning Apr 09 '20 at 15:43
If you use Promises, then you can so something like this: `let myVar = await getFromeStorage("valueInput");` But that is a different topic - Look up Promises to learn more about that – Always Learning Apr 09 '20 at 15:44

Changing value in all inputs from array

1 Answers1