Why is array seemingly empty after the loop? [duplicate]

Question

function par(idF, idM) {
  this.IDOvna = idM;
  this.IDOvce = idF;

}



function breeding() {
  let idOvce = [];
  let brOvce = [];
  let mesecOvce = [];
  let godinaOvce = [];
  let istorija1 = [];
  let istorija2 = [];

  let idOvna = [];
  let brOvna = [];
  let mesecOvna = [];
  let godinaOvna = [];

  let y = 0;
  let o = 0;
  let parovi = [];
  let c = 0;
  fetch("http://localhost/ovce/ovce.json")
    .then(function(resp) {
      return resp.json();
    })
    .then(function(data) {
      console.log(data);
      for (let i = 0; i < data.ovce.length; i++) {
        idOvce[i] = data.ovce[i].id;
        brOvce[i] = data.ovce[i].broj;
        mesecOvce[i] = data.ovce[i].mesec;
        godinaOvce[i] = data.ovce[i].godina;
        istorija1[i] = data.ovce[i].istorija1;
        istorija2[i] = data.ovce[i].istorija2;
      }
    });
  fetch("http://localhost/ovce/ovnovi.json")
    .then(function(resp1) {
      return resp1.json();
    })
    .then(function(data1) {
      console.log(data1);
      for (let g = 0; g < data1.ovnovi.length; g++) {
        idOvna[g] = data1.ovnovi[g].id;
        brOvna[g] = data1.ovnovi[g].broj;
        mesecOvna[g] = data1.ovnovi[g].mesec;
        godinaOvna[g] = data1.ovnovi[g].godina;
      }
    });

  while (o < idOvna.length) {
    y = 0;
    while (y < idOvce.length) {
      if (istorija1[y] != 0) {
        if ((istorija2[y] != idOvna[o]) && (istorija2[istorija1[y]] != idOvna[o])) {
          parovi[c] = new par(idOvce[y], idOvna[o]);
          c++;
        }
      } else {
        parovi[c] = new par(idOvce[y], idOvna[o]);
        c++;
      }
      y++;
    }
    o++;
  }
  console.log(parovi);
  return parovi;
}

<html>

<head>
  <title>Sheepify</title>
  <script src="main.js"></script>
</head>

<body>
  <button onclick="breeding()"> Breeding </button>
</body>

</html>

In javascript, i have a loop running and afterwards the pairs array which should be populated is empty.

function pair(idF, idM) {
  this.IDOvna = idM;
  this.IDOvce = idF;
}

function problem() {
  let y = 0;
  let o = 0;
  let pairs = [];
  let c = 0;

  //id, id1, history1, history2 are arrays which are populated from the json files using fetch.

  while (o < id.length) {
    y = 0;
    while (y < id1.length) {
      if (history1[y] != 0) {
        if ((history2[y] != id[o]) && (history2[history1[y]] != id[o])) {
          pairs[c] = new pair(id1[y], id[o]);
          c++;
        }
      } else {
        pairs[c] = new pair(id1[y], id[o]);
        c++;
      }
      y++;
    }
    o++;
  }
  console.log(pairs);
  console.log(pairs.length);
}

When i run a debugger the array is populated and everything is fine, but when i execute the function on button click or through a console, it just returns an empty array. What could be causing this problem? EDIT: I accidentally pasted the pair function inside the problem function, which isn't the case. I have moved it out now. And changed leght to length as suggested. EDIT2: Here is the full code, sorry about the variable names, they are in Serbian.

It would help if you included the values of all the arrays you're accessing. Also, the code would be easier to read if you used for loops instead of while, and pairs.push(). — Barmar, Commented Aug 28, 2020 at 14:09
Are you sure the arrays contain values that fit the criteria used to add pairs to the array? — Barmar, Commented Aug 28, 2020 at 14:10
The pairs variable is local to the function. How do you use it in the button click? — Barmar, Commented Aug 28, 2020 at 14:11
You need to run this in the .then() callback of fetch(). Otherwise the arrays won't be populated. — Barmar, Commented Aug 28, 2020 at 14:13
You say that the variables are all populated, but you could be wrong. Post the actual code. — Barmar, Commented Aug 28, 2020 at 14:21

Barmar · Accepted Answer · 2020-08-28 14:42:32Z

The loop that processes the arrays is outside the fetch callback functions, so it doesn't wait for the arrays to be populated. See Why is my variable unaltered after I modify it inside of a function? - Asynchronous code reference.

You can make your function async and use await to wait for them.

Note also that the code that calls this will need to use await or .then() to get the returned parovi array. See How do I return the response from an asynchronous call?

async function breeding() {
  let idOvce = [];
  let brOvce = [];
  let mesecOvce = [];
  let godinaOvce = [];
  let istorija1 = [];
  let istorija2 = [];

  let idOvna = [];
  let brOvna = [];
  let mesecOvna = [];
  let godinaOvna = [];

  let y = 0;
  let o = 0;
  let parovi = [];
  let c = 0;
  await fetch("http://localhost/ovce/ovce.json")
    .then(function(resp) {
      return resp.json();
    })
    .then(function(data) {
      console.log(data);
      for (let i = 0; i < data.ovce.length; i++) {
        idOvce[i] = data.ovce[i].id;
        brOvce[i] = data.ovce[i].broj;
        mesecOvce[i] = data.ovce[i].mesec;
        godinaOvce[i] = data.ovce[i].godina;
        istorija1[i] = data.ovce[i].istorija1;
        istorija2[i] = data.ovce[i].istorija2;
      }
    });
  await fetch("http://localhost/ovce/ovnovi.json")
    .then(function(resp1) {
      return resp1.json();
    })
    .then(function(data1) {
      console.log(data1);
      for (let g = 0; g < data1.ovnovi.length; g++) {
        idOvna[g] = data1.ovnovi[g].id;
        brOvna[g] = data1.ovnovi[g].broj;
        mesecOvna[g] = data1.ovnovi[g].mesec;
        godinaOvna[g] = data1.ovnovi[g].godina;
      }
    });

  while (o < idOvna.length) {
    y = 0;
    while (y < idOvce.length) {
      if (istorija1[y] != 0) {
        if ((istorija2[y] != idOvna[o]) && (istorija2[istorija1[y]] != idOvna[o])) {
          parovi[c] = new par(idOvce[y], idOvna[o]);
          c++;
        }
      } else {
        parovi[c] = new par(idOvce[y], idOvna[o]);
        c++;
      }
      y++;
    }
    o++;
  }
  console.log(parovi);
  return parovi;
}

function par(idF, idM) {
  this.IDOvna = idM;
  this.IDOvce = idF;
}

<html>

<head>
  <title>Sheepify</title>
  <script src="main.js"></script>
</head>

<body>
  <button onclick="breeding()"> Breeding </button>
</body>

</html>

eltha · Accepted Answer · 2020-08-28 14:39:35Z

how are you using this problem function within the fetch?

If you are using int outside the fetch its totaly normal, your arrays will be empty.

Edit:

As you have post the fetch method, you need to put all your while loop un the last then, when you are populating the data, because fetch is async =/ Since you have two fetch, and both are populating the array's you need to do the second in the last then of the first fetch. And finaly you can do your while loop in last then of your second fetch. It may be more clearner using async await method.

function par(idF, idM) {
    this.IDOvna = idM;
    this.IDOvce = idF;
}
  
  
  
function breeding() {
    let idOvce = [];
    let brOvce = [];
    let mesecOvce = [];
    let godinaOvce = [];
    let istorija1 = [];
    let istorija2 = [];

    let idOvna = [];
    let brOvna = [];
    let mesecOvna = [];
    let godinaOvna = [];

    let y = 0;
    let o = 0;
    let parovi = [];
    let c = 0;
    fetch("http://localhost/ovce/ovce.json")
    .then(function(resp) {
    return resp.json();
    })
    .then(function(data) {
    console.log(data);
    for (let i = 0; i < data.ovce.length; i++) {
        idOvce[i] = data.ovce[i].id;
        brOvce[i] = data.ovce[i].broj;
        mesecOvce[i] = data.ovce[i].mesec;
        godinaOvce[i] = data.ovce[i].godina;
        istorija1[i] = data.ovce[i].istorija1;
        istorija2[i] = data.ovce[i].istorija2;
    }

    fetch("http://localhost/ovce/ovnovi.json")
    .then(function(resp1) {
    return resp1.json();
    })
    .then(function(data1) {
        console.log(data1);
        for (let g = 0; g < data1.ovnovi.length; g++) {
            idOvna[g] = data1.ovnovi[g].id;
            brOvna[g] = data1.ovnovi[g].broj;
            mesecOvna[g] = data1.ovnovi[g].mesec;
            godinaOvna[g] = data1.ovnovi[g].godina;

            while (o < idOvna.length) {
            y = 0;
            while (y < idOvce.length) {
                if (istorija1[y] != 0) {
                if ((istorija2[y] != idOvna[o]) && (istorija2[istorija1[y]] != idOvna[o])) {
                    parovi[c] = new par(idOvce[y], idOvna[o]);
                    c++;
                }
                } else {
                parovi[c] = new par(idOvce[y], idOvna[o]);
                c++;
                }
                y++;
            }
            o++;
            }
            console.log(parovi);
            return parovi;
        }
        });
    });
    

}

In his code he right that the arrays are populated using a fetch on a json file — eltha, Commented Aug 28, 2020 at 14:12
Everything is inside the problem function, I just didn't think it was necessary to include the fetch part because it wasn't relevant to the issue, since the data assignment is working fine. — MilanJ, Commented Aug 28, 2020 at 14:13
Welcome to Stack Overflow! This is really a comment, not an answer. With a bit more rep, you will be able to post comments. I've posted a similar comment for you. — Barmar, Commented Aug 28, 2020 at 14:13
Thank's @Barmar , it's hard when we start, plenty of question and i can't ask them, so ... yes i'm using the Answer area =/ sorry — eltha, Commented Aug 28, 2020 at 14:17

Collectives™ on Stack Overflow

Why is array seemingly empty after the loop? [duplicate]

2 Answers 2

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Linked

Related