將JSON解析為嵌套的對象數組

Question

我有一個ReactJS，用戶可以在其中上傳圖像和文本輸入。 表單被分為多個動態部分，每個部分都包含相同類型的信息，如下所示：

<div>
    <input placeholder="Name of the author" />
    <input type="file" />
    <input placeholder="Age of the author" />
</div>

我曾經做過JSON.stringify()將數據發送到我的node.js后端並將其保存到我的數據庫，但是，由於我現在還允許文件上傳，因此我必須使用FormData() 。 當我使用JSON.stringify() ，它整潔地將我保存為對象數組，但是現在不起作用了，我只是得到了一個字符串數組。

首先是我的ReactJS前端的相關代碼：

class Form extends React.Component {
    constructor (props) {
        super(props);
        this.state = {
            formdata : [
                {author : "name", age: 1},
                {author : "othername", age: 144}
            ]
        }
    }
    onSubmit = (e) => {

    let formData = new FormData();

    for (var i = 0; i < formdata.length; i++) {
        formData.append('formdata', JSON.stringify(formdata[i]));
    }

    axios.post('newauthor',
        formData)
        .then(function (response) {
            console.log(response);
        })
        .catch(function (error) {
            console.log(error);
        });
    }

render() {
    return(
        <form onSubmit={this.onSubmit} encType="multipart/form-data">
        //Content see above
        </form>
    )
}

And in node.js I save the formdata to my database like so:

NewEntry.formdata = req.body.data;

但這將返回一個JSON對象數組，如下所示：

[{"author" : "name", "age": 1},{"author" : "othername", "age": 144}]

但是，我需要以后再使用該數據，直到現在，我才可以映射數據並使用對象的名稱來獲取值。 我閱讀了有關此主題的幾個問題，但無濟於事。 我也嘗試了JSON.parse但是由於某種原因，這總是給我一個錯誤（它給了我不同的錯誤，其中之一是JSON中的位置1處有一個意外字符）。 那么，如何將JSON字符串轉換為對象數組？

Answer 1

答案是，您的formData的一部分被字符串化，而不是整個formdata。 您正在迭代某個對象，並在每個元素上應用JSON.stringify 。 這里：

for (var i = 0; i < data.length; i++) {
        formData.append('data', JSON.stringify(data[i]));
    }

但是在解析時，您嘗試解析JSON.parse整個formdata 。

相反，在將數據發送到服務器之前，對於JSON.parse您需要對formdata數據本身進行stringify 。

將axios pst代碼更改為：

axios.post('newauthor',{data: JSON.stringify(formData)}
        )
        .then(function (response) {
            console.log(response);
        })

第二，您的代碼有太多錯誤。

像：內部constructor狀態未正確定義，缺少comma 。

甚至如何編譯，第一個元素后仍缺少逗號。

this.state = {
            formdata : [
                {author : "name", age: 1}
                {author : "othername", age: 144}
            ]
        }

而且您不應該在類聲明中使用arrow函數，我不確定這對您有何作用！