Question

我正在尝试使用已经成功启用onclick的contenteditable属性来编辑/更新当前数据。我的“ enter”键允许提交数据。但是，console.log读取到已针对特定列表项进行了PUT请求，但没有同时更新“标题”或“ isbn”。

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

HTML（“ li”项完全是通过POST请求由JS生成的）

<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不是函数”问题，可以使用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", "'", "}"]

如果这是正确的话，您将不得不在book回调中检查forEach：

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

这将使您再次遇到另一个异常要处理。或者让您自cannot short circuit Array.forEach with a break起就不必使用传统的for循环。

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

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

2 个答案: