JavaScript for loop iterates too many times through array

Question

I continued my project from my last question.
Right now it nearly does everything the way I want it to.

The basic function of this website is to iterate through the World Of Tanks API in order to create cards showing the provinces our clan owns.

Therefore I am using the following for loop in order to create the cards.

function loopProvince(provinces, jsonData) {
  for (i = 0; i < provinces.length; i++) {
    createCard(i);
    getMaps(jsonData[clan_id][i].arena_id, i);
    changeProvinceDetails(jsonData[clan_id], i + 1);
  }
}

The problem here is that if we own 15 provinces (so the script should produce 15 cards) it instead creates 15 filled cards and an empty 16th one.
I was wondering how I could either remove the 16th card or stop it from being created at all.

The full code is:

//var clan_id = 500071433;
var clan_id = 500025989; // FAME

// Get province ID
//TODO: ein Feld zu viel --> Entfernen
var province_list = "https://api.worldoftanks.eu/wot/globalmap/clanprovinces/?application_id=bbdd3a54ffe280ff581db61299acab9c&clan_id=" + clan_id + "&fields=province_name%2C+province_id%2C+arena_id%2C+clan_id%2C+daily_revenue%2C+max_vehicle_level%2C+prime_time%2C+front_id";
// Get JSON Data



fetch(province_list)
  .then(res => res.json())
  .then((out) => {
    loopProvince(out.data[clan_id], out.data);

  })
  .catch(err => {
    throw err
  });



function loopProvince(provinces, jsonData) {
  for (i = 0; i < provinces.length; i++) {
    createCard(i);
    getMaps(jsonData[clan_id][i].arena_id, i);
    changeProvinceDetails(jsonData[clan_id], i + 1);
  }
}

function createCard(i) {
  var card = `
  <div class="province" id="province` + (i + 1) + `">
    <div class="province_title" id="province_name` + (i + 1) + `">
      <h2>Provinz ` + (i + 1) + `</h2>
    </div>
    <div class="province_information">
      <div class="map_name" id="province_map` + (i + 1) + `">
        <p>Map Name</p>
      </div>
      <div class="details">
        <div class="time" id="province_time` + (i + 1) + `">
          <p>Prime Time: XX:XX Uhr</p>
        </div>
        <div class="tier" id="province_tier` + (i + 1) + `">
          <p>Stufe: X</p>
        </div>
        <div class="income" id="province_income` + (i + 1) + `">
          <p>Einkommen: X/Tag</p>
        </div>
      </div>  <!-- details -->
    </div>
  </div>
  `;

  document.getElementById('contentid').innerHTML += card;
}

function getMaps(arena_id, i) {
  fetch('./data/maps.json')
    .then((res) => res.json())
    .then((jsonMap) => {
      changeProvinceMap(jsonMap.data[arena_id].name_i18n, jsonMap.data[arena_id].minimap_location, i);
    })
}

// start changing information

function changeProvinceDetails(json, i) {
  changeProvinceName(json[i].province_name, i);
  changeProvinceIncome(json[i].daily_revenue, i);
  changeProvinceTier(json[i].max_vehicle_level, i);
  changeProvinceTime(json[i].prime_time, i);
}

function changeProvinceName(province_name, i) {
  document.getElementById("province_name" + i).innerHTML = "<h2>" + province_name + "</h2>";
}

function changeProvinceMap(province_map, province_minimap, i) {
  document.getElementById("province_map" + i).innerHTML = "<p>" + province_map + "</p>";
  document.getElementById("province_map" + i).setAttribute("style", "background:url(" + province_minimap + "); background-size:cover; background-position:center;");
}

function changeProvinceIncome(province_income, i) {
  document.getElementById("province_income" + i).innerHTML = "<p>Einkommen: " + province_income + " / Tag </p>";
}

function changeProvinceTier(province_tier, i) {
  document.getElementById("province_tier" + i).innerHTML = "<p>Stufe: " + province_tier + "</p>";
}

function changeProvinceTime(province_prime_time, i) {
  document.getElementById("province_time" + i).innerHTML = "<p>Prime Time: " + province_prime_time + " Uhr</p>";
}

body {
  background: #EBEBEB;
  font-family: sans-serif;
  color: #343434;
}

.container {
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-areas: "head" "information" "copyright";
  height: 100vh;
  grid-gap: 50px;
}

header {
  display: grid;
  background: #343434;
  border-bottom: #ACACAC 5px solid;
}

#title {
  grid-area: head;
  padding: 20px;
  font-size: 20px;
  text-transform: uppercase;
  font-weight: bold;
  color: #ffffff;
}

.content {
  grid-area: information;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(600px, 1fr));
  grid-gap: 20px;
  align-items: start;
}

.province {
  background: #ACACAC;
  display: grid;
  grid-template-rows: auto 300px;
}

.province_title {
  display: grid;
  align-items: center;
  justify-items: center;
  background: #343434;
  color: #ffffff;
}

.province_information {
  height: minmax(200px, auto);
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "map details";
}

.province_information p {
  margin: 0;
  padding: 0;
}

.province_information .map_name {
  grid-area: map;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  font-weight: bold;
  color: #343434;
  background: white;
  background-position: center;
  background-size: cover;
}

.province_information .map_name>p {
  background: #ffffff;
  padding: 5px;
}

.province_information .details {
  grid-area: details;
  padding: 10px;
  padding-right: 0;
  display: grid;
  grid-gap: 5px;
  align-items: center;
}

.province_information .details .time {
  font-weight: bold;
  text-align: center;
  font-size: 20px;
}

footer {
  padding: 10px;
  gird-area: copyright;
  background: #343434;
  border-top: #ACACAC 3px solid;
  color: #ffffff;
}


/*
          __  __          _ _
    ____ |  \/  |        | (_)
   / __ \| \  / | ___  __| |_  __ _
  / / _` | |\/| |/ _ \/ _` | |/ _` |
 | | (_| | |  | |  __/ (_| | | (_| |
  \ \__,_|_|  |_|\___|\__,_|_|\__,_|
   \____/
  */

@media (max-width: 600px) {
  .container {
    grid-gap: 20px;
  }
  .content {
    grid-area: information;
    display: grid;
    grid-template-columns: minmax(70%, 1fr);
    grid-gap: 20px;
    align-items: start;
    justify-items: stretch;
  }
  .province_information {
    height: minmax(200px, auto);
    display: grid;
    grid-template-columns: 1fr;
    grid-template-row: 1fr 1fr;
    grid-template-areas: "map" "details";
  }
  #title {
    text-align: center;
  }
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>WOT Clan Wars Dashboard</title>
  <link rel="stylesheet" href="css/style.css">
  <script type="text/javascript" src="javascript/main.js"></script>
</head>

<body>
  <div class="container">
    <header "head">
      <div id="title">
        <h1>Clan Wars Dashboard</h1>
      </div>
    </header>
    <div class="content" id="contentid">
      <!-- generated by JavaScript -->
    </div>
    <!-- content -->

    <footer>
      Copyright &copy; 2018 Kay Kleinvogel
    </footer>
  </div>

</body>

</html>

The background pictures don't work here since they are saved locally.
For all the files including the maps.json and the images just have a look at the Github page.

I am sorry if the code is messy since this is my 1st web project bigger than the basic tutorials.

Thanks for helping out :)

Liftoff · Accepted Answer · 2018-07-25 23:09:26Z

0

You actually have 16 maps coming through from the API. The problem is that you're skipping the first one when you set the details of each card.

changeProvinceDetails(jsonData[clan_id], i + 1);

That i+1 there skips the first index. You can compensate for this by subtracting one when you get the info from the json.

function changeProvinceDetails(json, i) {
  changeProvinceName(json[i-1].province_name, i);
  changeProvinceIncome(json[i-1].daily_revenue, i);
  changeProvinceTier(json[i-1].max_vehicle_level, i);
  changeProvinceTime(json[i-1].prime_time, i);
}

answered Jul 25, 2018 at 23:09

Liftoff

25.6k16 gold badges74 silver badges127 bronze badges

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

Comments

brda · Accepted Answer · 2018-07-25 23:04:12Z

0

Have you tried doing "i < provinces.length - 1"? That should work.

answered Jul 25, 2018 at 23:04

brda

214 bronze badges

1 Comment

Ironlors Over a year ago

it works with the text and infos but the map name and background image won't change

Don Macarthur · Accepted Answer · 2018-07-25 23:05:43Z

0

Arrays are zero-based, so your array indices run from 0-14. The length property is 15, so your for loop is running until it looks for at item at index 15.

When in doubt on these things, run a console.log(i) statement inside your loop and you'll see the indices of everything it is returning.

Hope that helps :-)

answered Jul 25, 2018 at 23:05

Don Macarthur

336 bronze badges

Comments

Ironlors · Accepted Answer · 2018-07-25 23:16:25Z

0

Fixed:

function loopProvince(provinces, jsonData) {
  for (i = 0; i < provinces.length; i++) {
    createCard(i);
    getMaps(jsonData[clan_id][i].arena_id, i+1);
    changeProvinceDetails(jsonData[clan_id], i+1);
  }
}

and

function changeProvinceDetails(json, i) {
  changeProvinceName(json[i-1].province_name, i);
  changeProvinceIncome(json[i-1].daily_revenue, i);
  changeProvinceTier(json[i-1].max_vehicle_level, i);
  changeProvinceTime(json[i-1].prime_time, i);
}

solves the Problem. I was using i+1 for the province details but not for the getMaps. I should have used the rubber duck method. Still thank you everyone.

edited Jul 25, 2018 at 23:16

answered Jul 25, 2018 at 23:10

Ironlors

1931 gold badge5 silver badges19 bronze badges

1 Comment

Liftoff Over a year ago

There are 16 provinces though. Notice how "Milan" is present in the JSON as the first element, but "Gap" is the first card on your page.

Collectives™ on Stack Overflow

JavaScript for loop iterates too many times through array

4 Answers 4

Comments

1 Comment

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related