将文本作为对象添加到数组答案

【问题标题】：adding text as object to array将文本作为对象添加到数组
【发布时间】：2022-01-20 13:05:15
【问题描述】：

以下程序会将输入中输入的文本添加到数组中，并在p 标记中显示该数组。当用户按下提交时，文本将被添加到数组中。我需要将其添加为包含索引和文本的对象。

目前，该数组将如下所示：['a', 'b', 'c']

我需要数组看起来像：[{"index": 0, "text": "a"}, {"index": 1, "text": "b"}]

let arr = [];
function addText() {
    let text = document.getElementById('text').value;
    arr.push(text);
    res = document.getElementById('result-text').innerText = arr;
}

<input type="text" id="text" placeholder="Enter a text" />
<input type="submit" onclick="addText()" />

<p id="result-text"></p>

【问题讨论】：

标签： javascript html arrays json

【解决方案1】：

简单地做

let arr = [];
function addText() {
    let text = document.getElementById('text').value;
    arr.push({ index: arr.length, text });
    res = document.getElementById('result-text').innerText = JSON.stringify(arr);
}

【讨论】：

p 标签显示为[Object Object]。有什么方法可以显示数据吗？
使用JSON.stringify 将其转换为字符串。
它正在工作

【解决方案2】：

只需创建对象并将其存储在数组中

let arr = [];
function addText() {
    let text = document.getElementById('text').value;
    let textObj = {
                     index: arr.size,
                     text: text
                  }
    arr.push(textObj);
    res = document.getElementById('result-text').innerText = arr;
}

<input type="text" id="text" placeholder="Enter a text" />
<input type="submit" onclick="addText()" />

<p id="result-text"></p>

【讨论】：

显示为[object Object]。但是，我需要按原样显示它
参考@TheWhiteFang 所做的编辑

【解决方案3】：

而不是将文本推入 arr。您可以像维护索引变量并对其进行递增一样对其进行操作。

let arr = [];
let index = 0;
function addText() {
    let text = document.getElementById('text').value;
    const obj = {index, text}
    arr.push(obj);
    res = document.getElementById('result-text').innerText = JSON.stringify(arr);
    index+=1
}

<input type="text" id="text" placeholder="Enter a text" />
<input type="submit" onclick="addText()" />

<p id="result-text"></p>

【讨论】：

【解决方案4】：

只需使用地图：

function addText() {
    const text = document.getElementById('text').value;
    const arr = text.split(',');
    const result = arr.map((text, index) => ({index, text}))
    document.getElementById('result-text').innerText = JSON.stringify(result);
}

<input type="text" id="text" placeholder="Enter a text" />
<input type="submit" onclick="addText()" />

<p id="result-text"></p>

【讨论】：

【解决方案5】：

这是可能的解决方案：

let arr = [];
function addText() {
    let text = document.getElementById('text').value;
    let index = arr.length;
    arr.push({index:index,text:text});
    res = document.getElementById('result-text').innerText = JSON.stringify(arr);
}

<input type="text" id="text" placeholder="Enter a text" />
<input type="submit" onclick="addText()" />

<p id="result-text"></p>

【讨论】：