Fetching data from API in JS

Question

I've recently been working on a boxrater for a game I play, and I ran into a little problem. The function takes in the user input value from myTextarea and then splits it into an array. The function then fetches the api with user input, and if successful adds the rating to the subtotal category (ex:Golden). Once the loop is finished the value of all categories is displayed for the user.

For Some reason the output of the total and the subtotal categories will always have different values. This only happens when the user input is large.

Input that causes different outputs Output1 Output2

Again these outputs are totally random, and are just examples. Sometimes it even outputs the correct amount, but it's rare.

function boxRater() {
    var x = document.getElementById("myTextarea").value.split(/\n|-|Level|:| |,/);
    var helper = {
        total: "Total: ",
        shadow: 0,
        cursed: 0,
        rainbow: 0,
        glitter: 0,
        golden: 0,
        luminous: 0,
        amount: 0
    };
    var doNothing = {
        total: "Total: ",
        amount: 0
    };

    url = 'https://pokemoncreed.net/ajax/pokedex.php?pokemon='

    for (var i = 0; i <= x.length; i++) {
        fetch(url + x[i])
            .then((res) => res.json())
            .then((data) => {
                console.log(data.rating);
                if (data.success === false) {
                    console.log("error");
                    console.error(err);
                }
                if (data.name.includes("Golden")) {
                    if (data.rating.includes("m")) {
                        doNothing.amount = parseFloat(data.rating) * 1000000;
                        helper.golden = doNothing.amount + helper.golden;
                    }
                    if (data.rating.includes("k")) {
                        doNothing.amount = parseFloat(data.rating) * 1000;
                        helper.golden = doNothing.amount + helper.golden;
                    }
                }
                if (data.name.includes("Rainbow")) {
                    if (data.rating.includes("m")) {
                        doNothing.amount = parseFloat(data.rating) * 1000000;
                        helper.rainbow = doNothing.amount + helper.rainbow;
                    }
                    if (data.rating.includes("k")) {
                        doNothing.amount = parseFloat(data.rating) * 1000;
                        helper.rainbow = doNothing.amount + helper.rainbow;
                    }
                }
                if (data.name.includes("Shadow")) {
                    if (data.rating.includes("m")) {
                        doNothing.amount = parseFloat(data.rating) * 1000000;
                        helper.shadow = doNothing.amount + helper.shadow;
                    }
                    if (data.rating.includes("k")) {
                        doNothing.amount = parseFloat(data.rating) * 1000;
                        helper.shadow = doNothing.amount + helper.shadow;
                    }
                }
                if (data.name.includes("Luminous")) {
                    if (data.rating.includes("m")) {
                        doNothing.amount = parseFloat(data.rating) * 1000000;
                        helper.luminous = doNothing.amount + helper.luminous;
                    }
                    if (data.rating.includes("k")) {
                        doNothing.amount = parseFloat(data.rating) * 1000;
                        helper.luminous = doNothing.amount + helper.luminous;
                    }
                }
                if (data.name.includes("Cursed")) {
                    if (data.rating.includes("m")) {
                        doNothing.amount = parseFloat(data.rating) * 1000000;
                        helper.cursed = doNothing.amount + helper.cursed;
                    }
                    if (data.rating.includes("k")) {
                        doNothing.amount = parseFloat(data.rating) * 1000;
                        helper.cursed = doNothing.amount + helper.cursed;
                    }
                }
                if (data.name.includes("Glitter")) {
                    if (data.rating.includes("m")) {
                        doNothing.amount = parseFloat(data.rating) * 1000000;
                        helper.glitter = doNothing.amount + helper.glitter;
                    }
                    if (data.rating.includes("k")) {
                        doNothing.amount = parseFloat(data.rating) * 1000;
                        helper.glitter = doNothing.amount + helper.glitter;
                    }
                }

                helper.amount = helper.cursed + helper.rainbow + helper.golden + helper.luminous + helper.shadow + helper.glitter;
                document.getElementById("testing").innerHTML = x;

                document.getElementById("golden").innerHTML = helper.golden;
                document.getElementById("rainbow").innerHTML = helper.rainbow;
                document.getElementById("shadow").innerHTML = helper.shadow;
                document.getElementById("cursed").innerHTML = helper.cursed;
                document.getElementById("glitter").innerHTML = helper.glitter;
                document.getElementById("luminous").innerHTML = helper.luminous;
                document.getElementById("total").innerHTML = helper.amount;
            })
    }
}

The code below is the html page that I've been testing it on. Again these examples given in the myTextarea will work, but given a longer list like the one showed in screenshot.

<!DOCTYPE html>
<html>
<head>
<title> In update </title>
</head>
<body> Testing
<h1>Testing</h1>
<script src="js/boxrater.js"> </script>
   <div id="content">
     <header>
           <h2> Box Rater:</h2><br>
            <textarea rows ="6" cols="40" id="myTextarea">  *****HOW TO USE******
GoldenMankey  - Level 5
ShadowPichu - Level 5
RainbowCaterpie  - Level 5
GlitterDialga - Level 5
CursedMaractus - Level 5
LuminousBidoof - Level 5
*****Make sure to capitalize correctly (ex:GoldenMankey) and do the format above preferabaly ending each line with enter.*****
            </textarea>
            </header>
          <p>Read inside the box to understand how to use and formating.</p>
                    <p>Make sure to  to use <a  href="https://pokemoncreed.net/box_organise.php" target="_blank">Box Organise</a> for quick and easy use. </p>
                    <p> NOTE:The box rater doesn't calculate off for unbased pokemon or do 3x rate for rare genders </p>
       <button type="button" onclick="boxRater()">Rate Box</button>
                        <p id="rainbow"> Rainbow: </p>
            <p id="glitter"> Glitter: </p>
            <p id="cursed"> Cursed: </p>
            <p id="shadow">Shadow: </p>
            <p id="luminous">Luminous: </p>
            <p id="golden">Golden: </p>
            <p id="total">Total: </p>
            <p id="testing"> </p>

</div>
 </body>
</html>

If anyone knows how to solve this problem please explain to me. The rater works for individual cases but I need it to work for a large user input. ~Happy Holidays!

Answer 1

Thanks to Jaromanda X comment I was able to fix my code. The problem was because it wasn't an async function so I tweaked my code to make it work with an async.

function boxRater(){
var x = document.getElementById("myTextarea").value.split(/\n|-|Level|:| |5|,/);
return x;
}
url = 'https://pokemoncreed.net/ajax/pokedex.php?pokemon='
async function totalC () {
const x = boxRater();
console.log(x);
let helper = {total: "Total: ", shadow:0, cursed:0, rainbow:0, glitter:0,
golden:0,luminous:0, amount:0};
let doNothing = {total: "Total: ", amount:0};

for(let i =0; i <= x.length; i++){
let response = await fetch (url+x[i])
        let data = response.json()
        .then((data) => {
            console.log(data.rating);
        if(data.success === false){
    throw new SyntaxError("Error");
 }
if(data.success === true){

  if(data.name.includes("Golden")){
    if (data.rating.includes("m")){
      doNothing.amount = parseFloat(data.rating) * 1000000;
      helper.golden = doNothing.amount + helper.golden;
    }
    if (data.rating.includes("k")){
      doNothing.amount = parseFloat(data.rating) * 1000;
      helper.golden = doNothing.amount + helper.golden;
    }
}
if(data.name.includes("Rainbow")){
  if (data.rating.includes("m")){
      doNothing.amount = parseFloat(data.rating) * 1000000;
      helper.rainbow = doNothing.amount + helper.rainbow;
  }
  if (data.rating.includes("k")){
      doNothing.amount = parseFloat(data.rating) * 1000;
      helper.rainbow = doNothing.amount + helper.rainbow;
  }
}
if(data.name.includes("Shadow")){
  if (data.rating.includes("m")){
      doNothing.amount = parseFloat(data.rating) * 1000000;
      helper.shadow = doNothing.amount + helper.shadow;
  }
  if (data.rating.includes("k")){
     doNothing.amount = parseFloat(data.rating) * 1000;
      helper.shadow = doNothing.amount + helper.shadow;
  }
}
if(data.name.includes("Luminous")){
  if (data.rating.includes("m")){
      doNothing.amount = parseFloat(data.rating) * 1000000;
      helper.luminous = doNothing.amount + helper.luminous;
  }
  if (data.rating.includes("k")){
      doNothing.amount = parseFloat(data.rating) * 1000;
      helper.luminous = doNothing.amount + helper.luminous;
  }
}
if(data.name.includes("Cursed")){
    if (data.rating.includes("m")){
      doNothing.amount = parseFloat(data.rating) * 1000000;
      helper.cursed = doNothing.amount + helper.cursed;
    }
    if (data.rating.includes("k")){
      doNothing.amount = parseFloat(data.rating)*1000;
      helper.cursed = doNothing.amount + helper.cursed;
    }
}
if(data.name.includes("Glitter")){
  if (data.rating.includes("m")){
   doNothing.amount = parseFloat(data.rating) * 1000000;
      helper.glitter = doNothing.amount + helper.glitter;
  }
  if (data.rating.includes("k")){
      doNothing.amount = parseFloat(data.rating) * 1000;
      helper.glitter = doNothing.amount + helper.glitter;
  }
}
if (data.rating.includes("Not rated")){
    console.log("Not rated");
}
} 
helper.amount = helper.cursed+helper.rainbow+helper.golden+helper.luminous+helper.shadow+helper.glitter;
document.getElementById("golden").innerHTML = helper.golden;
document.getElementById("rainbow").innerHTML = helper.rainbow;
document.getElementById("shadow").innerHTML = helper.shadow;
document.getElementById("cursed").innerHTML = helper.cursed;
document.getElementById("glitter").innerHTML = helper.glitter;
document.getElementById("luminous").innerHTML = helper.luminous;
document.getElementById("cost").innerHTML = helper.amount ;
        })

}

}