name.forEach 不是单击按钮后的函数

Question

我正在尝试使用已成功启用 onclick 的 contenteditable 属性 edit/update 当前数据。我的 'enter' 密钥允许提交数据。但是，console.log 显示已针对特定列表项发出 PUT 请求，但 'title' 或 'isbn' 没有随之更新。

另一个突出的问题是我的 console.log 显示 books.forEach is not a function，我不知道为什么会这样，因为处理了该函数中的代码。

HTML（'li' 项完全由 JS 生成，带有 POST 请求）

<div id="divShowBooks">
  <li id="[object HTMLParagraphElement]">
    <p id="24" name="anID" placeholder="24">1</p>
    <p id="TEST" name="aTitle" placeholder="TEST">TEST</p>
    <p id="12345" name="anISBN" placeholder="12345" contenteditable="true">12345</p>
    <button>Delete</button>
  </li>
</div>

JavaScript

var book_list = document.querySelector('#divShowBooks');

    book_list.innerHTML = "";

    var books = JSON.parse(this.response);

    books.forEach(function (book) {

        // Text information to be displayed per item
        var id = document.createElement('p');
        id.type = 'text';
        id.innerHTML = book.id;
        var title = document.createElement('p');
        title.type = 'text';
        title.innerHTML = book.title;

        var isbn = document.createElement('p');
        isbn.type = 'text';
        isbn.innerHTML = book.isbn;

        // Defining the element that will be created as a list item
        var book_item = document.createElement('li');

        // Displays id, title and ISBN of the books from the database
        book_item.appendChild(id);
        book_item.appendChild(title);
        book_item.appendChild(isbn);

        // Creates an ID attribute per list item
        book_item.setAttribute("id", id)

        // Assigns attributes to p items within book items
        id.setAttribute("id", book.id)
        title.setAttribute("id", book.title)
        isbn.setAttribute("id", book.isbn)

        // Adding a generic name to these elements
        id.setAttribute("name", "anID")
        title.setAttribute("name", "aTitle")
        isbn.setAttribute("name", "anISBN")


        title.addEventListener('click', function (e) {
            e.preventDefault();
            title.contentEditable = "true";
            title.setAttribute("contenteditable", true);
            title.addEventListener('keypress', function (e) {
                if (e.keyCode === 13) {
                    e.preventDefault();
                    xhttp.open("PUT", books_url + '/' + book.id, true);
                    var editTitle = new FormData() /
                        editTitle.append("title", document.getElementsByName("aTitle")[0].value)
                    xhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded')
                    xhttp.send(); //
                }
            });
        });

更新

我已将以下内容添加到我的代码中。这似乎将我的数据库项目显示为日志中的数组。但是，我现在遇到了与 Uncaught TypeError: JSON.parse(...).map is not a function:

类似的问题

var params = [
    id = 'id',
    title = 'title',
    isbn = 'isbn',
    createdAt = 'createdAt',
    updatedAt = 'updatedAt'
];

var books = JSON.parse(this.response).map(function(obj) {
    return params.map(function(key) {
        return obj[key];
    });
});
console.log(books);

更新 2

这是我在 console.log 中收到的图像。第一部分显示原始JSON内容，第二部分是我尝试将每个对象转换为数组。

See Image

Answer 1

您正在从 JSON.parse() 获取书籍，这意味着书籍是一个对象而不是数组。 forEach 是一个数组方法。尝试控制台日志记录并在其中查找数组。

Answer 2

您必须确保您的 books 变量在解析后确实包含一个数组。

或者，但这没有意义，只是为了解决 "books.forEach is not a function" 问题，您可以使用 Object.assign([], this.response);。为了确保 books 将包含一个数组，您将其包装在一个 try catch 中并制作如下内容：

var books = [];

try {
    books = Object.assign([], this.response);

} catch (error) {
    books = [];
}

books.forEach 将被期望始终有效，但您必须小心，因为可能会发生这样的事情：

var myStringObject = "{'myProperty':'value'}";
var myArray = Object.assign([], myStringObject );
//myArray value is ["{", "'", "myProperty", "'", ":", "'", "value", "'", "}"]

这将使您不得不检查 forEach 回调中的 book 是否正确：

//at the topmost of your forEach callback
if(!book.id) throw BreakException; //A simple break will not work on forEach

这将再次给您留下另一个需要处理的异常。或者让你不得不使用传统的 for 循环，因为你 cannot short circuit Array.forEach with a break.

TLDR：确保 books 始终包含数组。

name.forEach 不是单击按钮后的函数

name.forEach is not a function after button is clicked

javascript

function

xmlhttprequest

submit

contenteditable