createElement создает бесконечный цикл

Question

Я действительно новичок в javascript и кодировании в целом, и я не могу понять, почему это вызывает бесконечный цикл:

  let newTr = document.createElement('tr');

Если я вынимаю его, веб-страница загружается нормально, но если я оставляю его, веб-страница никогда не загружается полностью, и мой браузер использует 50% моего процессора.

Вот остальная часть моего кода:

// client-side js
// run by the browser each time your view template referencing it is loaded

console.log('hello world :o');

let arrPfcCases = [];

// define variables that reference elements on our page

const tablePfcCases = document.getElementById("tablePfcCases");
const formNewPfcCase = document.forms[0];
const caseTitle = formNewPfcCase.elements['caseTitle'];
const caseMOI = formNewPfcCase.elements['caseMOI'];
const caseInjuries = formNewPfcCase.elements['caseInjuries'];

// a helper function to call when our request for case is done
const  getPfcCaseListener = function() {
  // parse our response to convert to JSON
  arrPfcCases = JSON.parse(this.responseText);

  // iterate through every case and add it to our page
  for (var i = 0; i = arrPfcCases.length-1;i++) {
    appendNewCase(arrPfcCases[i]);
  };
}

// request the dreams from our app's sqlite database
const pfcCaseRequest = new XMLHttpRequest();
pfcCaseRequest.onload = getPfcCaseListener;
pfcCaseRequest.open('get', '/getDreams');
pfcCaseRequest.send();

// a helper function that creates a list item for a given dream
const appendNewCase = function(pfcCase) {
  if (pfcCase != null) {
  tablePfcCases.insertRow();
  let newTr = document.createElement('tr');
  for (var i = 0; i = pfcCase.length - 1; i++) {
    let newTd = document.createElement('td');
    let newText = document.createTextNode(i.value);
    console.log(i.value);
    newTd.appendChild(newText);
    newTr.appendChild(newTd);
  }

  tablePfcCases.appendChild(newTr);
  }
}

// listen for the form to be submitted and add a new dream when it is
formNewPfcCase.onsubmit = function(event) {
  // stop our form submission from refreshing the page
  event.preventDefault();
  let newPfcCase = [caseTitle, caseMOI, caseInjuries];
  // get dream value and add it to the list
  arrPfcCases.push(newPfcCase);
  appendNewCase(newPfcCase);

  // reset form 
  formNewPfcCase.reset;

};

Спасибо!

PS Возможно, в коде масса других проблем, я просто не могу ничего сделать, пока не пойму это!

Answer 1

Как объяснение, в вашем коде

i = pfcCase.length - 1

присвоено значение pfcCase.length - 1 в i, Синтаксис этой части цикла должен быть

выражение, которое будет оцениваться перед каждой итерацией цикла. Если это выражение имеет значение true, оператор выполняется.

Оценка вашего кода не имеет смысла.

Оценка

i < pfCase.length

перед каждой итерацией проверять, что текущий индекс меньше длины массива, однако работает правильно.

Answer 2

Здесь нет условного утверждения здесь. В этом утверждении вы назначаете длину pfcCase минус 1 переменной I.

for (var i = 0; i = pfcCase.length - 1; i++) {

Вы должны сравнить переменную i с длиной pfcCase минус 1.

Это должно работать.

for (var i = 0; i < pfcCase.length - 1; i++) {

заметил что-то еще

Эта линия не делает то, что вы думаете, это доза.

let newText = document.createTextNode(i.value);

я просто индекс, то есть число. У него нет свойства value.

Это то, что вы хотите сделать.

let newText = document.createTextNode(pfcCase[i].value);

мои предпочтения (forEach)

Я предпочитаю использовать метод массива forEach. Он чище и менее подвержен ошибкам.

pfcCase.forEach( function(val){
    let newTd = document.createElement('td');
    let newText = document.createTextNode(val.value);
    console.log('The array element is. '. val.value, ' The value is. ', val.value);
    newTd.appendChild(newText);
    newTr.appendChild(newTd);
  });