Вызов функции на каждой итерации для l oop in Javascript - PullRequest
Новая
       16

Вызов функции на каждой итерации для l oop in Javascript

0 голосов
/ 10 февраля 2020 
function myFunction(xml) {
  var i;
  var xmlDoc = xml.responseXML;
  var table =
    "<tr><th>Title</th><th>Author</th><th>Cover Page</th><th>Ratings</th></tr>";
  var x = xmlDoc.getElementsByTagName("best_book");
  for (i = 0; i < x.length; i++) {
    bookname = x[i].getElementsByTagName("title")[0].childNodes[0].nodeValue;
    authorname = x[i].getElementsByTagName("name")[0].childNodes[0].nodeValue;
    table +=
      "<tr><td class='book'>" +
      bookname +
      "</td><td class='author'>" +
      authorname +
      "</td><td>" +
      "<img src='" +
      x[i].getElementsByTagName("image_url")[0].childNodes[0].nodeValue +
      "' height='100px' width='70px'>" +
      "</td><td>" +
      "<div class='stars' data-rating='1'>" +
      "<span class='star'>&nbsp;</span>" +
      "<span class='star'>&nbsp;</span>" +
      "<span class='star'>&nbsp;</span>" +
      "<span class='star'>&nbsp;</span>" +
      "<span class='star'>&nbsp;</span>" +
      "<input type='button' value='Add Rating' onClick = 'submitRating()'>" +
      "</div>" +
      "</td></tr>";
    console.log(bookname);
  }

  document.getElementById("result").innerHTML = table;
}

async function submitRating() {
  try {
    let boo = bookname;
    console.log(boo);
    let auth = authorname;
    console.log(auth);
    let rat = 5;
    console.log(rat);
    let data = JSON.stringify({
      author: auth,
      book: boo,
      rating: rat
    });
    console.log(data);
    let res = await fetch(hostUrl + "api/ratings", {
      method: "POST",
      body: data,
      headers: {
        "Content-Type": "application/json"
      }
    });
    console.log(res);
    res.json().then(matter => {
      console.log(matter);
    });
    // let myJson = res.json();
    // console.log(myJson);
    if (res.status == 200) {
      console.log("the status is " + res.status);
    } else {
      console.log("the status is " + res.status);
      alert("rating not given");
    }
  } catch (error) {
    console.log("Error:" + error);
  }
}

Я пытаюсь вызвать submitRating функцию на каждой итерации of для l oop, но я не получаю правильный метод для этого в JavaScript. Прямо сейчас после запуска функции l oop, onclick = submitRating() отправляется только последнее значение в mongodb. Может ли кто-нибудь помочь мне с этим, пожалуйста?

1 Ответ

0 голосов
/ 10 февраля 2020

Это потому, что bookname и authorname сохраняют последнее значение, установленное последней итерацией для для l oop. Другими словами, эти переменные просто перезаписываются несколько раз до тех пор, пока не закончится for l oop. Если вы хотите сохранить эту информацию для каждого элемента, вы можете сохранить их в атрибутах HTML5 data- и получить их в обработчике onclick.

Например, вы можете сделать это: 

"<input type='button' value='Add Rating' data-bookname='"+bookname+"' data-authorname='"+authorname+"' onClick='submitRating(this)' />"

И затем, в вашем методе submitRating, вы можете просто прочитать информацию, используя Element.dataset: 

async function submitRating(el) {
    const bookname = el.dataset.bookname;
    const authorname = el.dataset.authorname;

    // More logic here
}
...