使用 JavaScript 将新对象添加到 JSON 数组答案

【问题标题】：Add new object to JSON array using JavaScript使用 JavaScript 将新对象添加到 JSON 数组
【发布时间】：2020-04-03 11:05:27
【问题描述】：

我有product.json、admin.html 和一个admin.js 文件。我的目标是通过管理页面以 JSON 格式添加新产品，我的网站使用 JSON 来显示产品列表。

注意：我只想从客户端添加 json 中的对象，我已经创建了一个电子商务网站，其中列出了所有产品和一个管理面板登录以添加更多产品，所以什么都没有是服务器端，将在本地完成。

JSON 包含一个对象数组，例如：

[
  {
    "company": "xyz",
    "item": "shirt",
    "price": 100,
    "discount": 10%
  }
]

我必须通过包含 html 表单的管理页面在 JSON 中添加更多对象，例如：

  <form>
  <h3>Company</h3>
        <input type="text" id="campany" placeholder="enter company name">
        <h3>Item</h3>
        <input type="text" id="item" placeholder="enter item name">
        <h3>Price</h3>
        <input type="text" id="price" placeholder="enter price">
        <h3>Discount</h3>
        <input type="text" id="discount" placeholder="enter disc.">
    </form>

    <button onclick="show()" class="btn">Submit</button>

js文件是这样的：

const obj = fetch("json/products.json")

var myJSON = JSON.stringify(obj);
var addObj;

function show()
{

     addObj =
      `{"campany": "${campany.value}",
    "item": "${item.value}",
    "price": ${price.value},
    "discount": "${discount.value}%"},`

    myJSON = myJSON + addObj;
    console.log(obj); 

}
obj.push(addObj);

我是 js 新手，第一次处理 JSON，所有其他相关答案都没有帮助我，我在文档中找不到正确的东西。我希望我的目标很明确，请帮助我。

【问题讨论】：

您的问题到底是什么？将新对象附加到“JSON”数组或将 JSON 对象写回文件？如果是第二种情况，那么这是否回答了您的问题：Is it possible to write data to file using only JavaScript?
obj.push(addObj)
@BillyBrown 我想在我的 json 中添加一个新对象
@AbhinnKrishn 将对象添加到您的 json 中，但不保存 json 文件？
@BillyBrown 不，我想将新对象保存在 json 中，我想在其他地方使用新对象。

标签： javascript arrays json object backend

【解决方案1】：

const obj = fetch("json/products.json")

function show()
{

 let addObj =
  `{"campany": "${campany.value}",
   "item": "${item.value}",
   "price": ${price.value},
   "discount": "${discount.value}%"},`

   obj.push(addObj);
}
console.log(obj);

【讨论】：

口头解释通常很有帮助
虽然此代码可以解决问题，including an explanation 说明如何以及为什么解决问题将真正有助于提高您的帖子质量，并可能导致更多的赞成票。请记住，您正在为将来的读者回答问题，而不仅仅是现在提问的人。请edit您的答案以添加解释并说明适用的限制和假设。 From Review

【解决方案2】：

如果我理解正确，您需要编辑 JSON 文件。因此，如您所知，JS 仅在客户端工作。因此，如果您需要编辑文件，您可能应该使用 PHP 或其他在服务器端工作的东西，您的文件所在的位置

【讨论】：

我想向我的 json 添加一个对象。

【解决方案3】：

fetch 是一个异步方法，使用 promise 对象。


let obj;
fetch("json/products.json")
   .then(response => response.json())
   .then(body => obj = body);

【讨论】：