Проблема области видимости, ссылаясь на итератор "i" из одного цикла for в другой цикл for

Question

Задача

Я сталкиваюсь с тем, что, как мне кажется, является проблемой области действия этих двух for loops Каждый из них выполняет итерацию по разному количеству элементов.

• Я пытаюсь выяснить, как ссылаться на итератор i из первого цикла во втором цикле.
• В частности, я объединяю строку в остальной части оператора if во втором цикле, и мне нужно иметь возможность ссылаться на i и j

Разъяснение

Я пытаюсь создать сетку 11 x 8 на 88 квадратов. Им нужно иметь определенный класс, который будет окрашивать квадраты. Каждый квадрат имеет идентификатор данных от 1 до 88, который определяет их размещение в сетке. Состояния / квадраты, которые должны быть закрашены на основе данных, не являются последовательными, как видно из фрагмента data.json.

Петля № 1

я начинаю с 0, 1, 2 ... 50

for (i = 0; i < data.length; i++) {}

Петля № 2

j начинается с 1, 2, 3 ... 88

for (j = 1; j < squaresTotal + 1; j++) {

    // If it doesn't exist, push those values into the an array
    if (states.indexOf(j) === -1){
        blanks.push(j);

        $("<div class='square is-white' data-id='" + j + "'></div>").appendTo(".map");
    } else {
        $("<div class='square " + data[i].class + "' data-id='" + j + "'><p class='square__state'>" + data[i].abbr + "</p></div>").appendTo(".map");
    }
}

scripts.js

<script>
        $(function(){
            $.ajax({
                url: 'data.json',
                method: 'GET',
                dataType: 'json'
            }).then(main);
        });

        function main(data) {

            // The parent container that holds the map
            let map = $(".map");

            // IDs of the states and the blank tiles
            let blanks = [];
            let states = [];

            // Contains data for all 50 states
            for (i = 0; i < data.length; i++) {

                // Data is sorted by the rank field in descending order
                data.sort(function(a, b){
                    return a['rank'] - b['rank'];
                });

                // Fields for the data table below the map
                // Numbered rank (i.e. 1, 2, 3)
                let rank = data[i].rank;

                // Full state name (i.e. Alaska)
                let state = data[i].state;

                // Total consumer electric power
                let value = (data[i].total_consumption_electric_power).toLocaleString();

                // Each row in the table contains a rank, state and value
                if (rank) {
                    $("<tr><th scope='row'>" + data[i].rank + "</th><td>" + data[i].state + "</td><td>" + value + "</td></tr>").appendTo("tbody");
                }

                // Push the ids to the empty states array
                states.push(data[i].id);
            }

            // The grid is 11 by 8 for a total of 88 squares
            const squaresTotal = 88;

            for (j = 1; j < squaresTotal + 1; j++) {

                // If it doesn't exist, push those values into the an array
                if (states.indexOf(j) === -1){
                    blanks.push(j);

                    $("<div class='square is-white' data-id='" + j + "'></div>").appendTo(".map");
                } else {
                    $("<div class='square " + data[i].class + "' data-id='" + j + "'><p class='square__state'>" + data[i].abbr + "</p></div>").appendTo(".map");
                }
            }

            var pymChild = new pym.Child();
            pymChild.sendHeight();
        }


    </script>

data.json (фрагмент)

[
  {
    "id": 1,
    "state": "Alaska",
    "rank": "",
    "abbr": "AK",
    "class": "square-1",
    "total_consumption_electric_power": 707913
  },
  {
    "id": 11,
    "state": "Maine",
    "rank": "",
    "abbr": "ME",
    "class": "square-1",
    "total_consumption_electric_power": 62360
  },
  {
    "id": 17,
    "state": "Wisconsin",
    "rank": "",
    "abbr": "WI",
    "class": "square-5",
    "total_consumption_electric_power": 19482575
  }
]

Answer 1

Я упростил часть кода, чтобы показать, как я буду пытаться структурировать код.

Если вы хотите использовать рендеринг JQuery, его легко конвертировать обратно.

Это не отвечает на ваш вопрос i, index j, потому что вы на самом деле не нуждаетесь в них, чтобы сделать это способом, который лично мне кажется более простым.

var states = [
  {
    "id": 1,
    "state": "Alaska",
    "rank": 2,
    "abbr": "AK",
    "class": "square-1",
    "total_consumption_electric_power": 707913
  },
  {
    "id": 11,
    "state": "Maine",
    "rank": 3,
    "abbr": "ME",
    "class": "square-1",
    "total_consumption_electric_power": 62360
  },
  {
    "id": 17,
    "state": "Wisconsin",
    "rank": 1,
    "abbr": "WI",
    "class": "square-5",
    "total_consumption_electric_power": 19482575
  }
];

var render_rankings_table = function( states ) {
  // We want the table to be sorted by rank.
  // By creating a new array from the passed states array,
  // we retain the original order inside the states array.
  var sorted_by_rank = states.sort((a, b ) => a.rank - b.rank );
  // Create a row for each sorted_by_rank state.
  // Since this is a new array, we can just loop over it without affecting the original states array.
  var rows_html = sorted_by_rank.map( state => {
    return `<tr><td scope="row">${ state.rank }</td><td>${ state.state }</td><td>${ state.total_consumption_electric_power }</td></tr>`;
  });
  // Overwrite the content of the table to render it.
  // See how we update the table only once at the end instead of for every state individually.
  var table = document.querySelector( '#electric_consumption_ranking' );
  table.innerHTML = rows_html.join( '' );
};

// The original contains: if (states.indexOf(j) === -1){ blanks.push(j); }
// The states array contained all the id's.
// So translated, this means that the id of the state, equals the square it will render to.
// So Maine, with id 11, will be the eleventh square.
var render_squares = function( states ) {
  // Creating the 88 squares and mapping the states to it can be done in multiple ways.
  // I would prefer the 'easy' solution of just creating an array with 88 elements and
  // then putting the states in the correct position,
  // instead of figuring out the position of the state inside the loop.
  var squares = Array.from({ length: 88 }).fill( false );
  // We now have an array cotnaining 'false' 88 times.
  // Now lets add the states to it.
  // The squares start at 1, the array index starts at 0, so subtract 1 from the id to get the correct index.
  states.forEach( state => { squares[ state.id - 1 ] = state; });
  // Now all the states are in the correct position, according to their id.
  // Create the squares.
  var squares_html = squares.map(( state, index ) => {
    if ( state ) {
      return `<div class="square ${ state.class }" data-id="${ index + 1 }"><p class="square__state">${ state.abbr }</p></div>`;
    
    }
    // The data-ids start at 1, the array index starts at 0, so add 1 to the index.
    // The <div> has to have height to actually show up on the screen.
    // The easiest way is to make sure the div contains text, so adding a space already works.
    // We could also give the divs a minimum height with CSS.
    else {
      return `<div class='square is-white' data-id="${ index + 1 }">&nbsp;</div>`;
    }
  });
  // Overwrite the map.
  var map = document.querySelector( '.map' );
  map.innerHTML = squares_html.join( '' );
};

render_rankings_table( states );
render_squares( states );

table {
  border-collapse: collapse;
}

td {
  border: 1px solid grey;
}

.square {
  border-bottom: 1px solid grey;
  border-top: 1px solid grey;
}

.map {
  border: 1px solid grey;
}
.is-white {
  background-color: rgb( 238, 238, 238 );
}
.square-1 {
  background-color: red;  
}
.square-5 {
  background-color: green;
}

<table id="electric_consumption_ranking"></table>
<figure class="map"></figure>