Add new object to JSON array using JavaScript

Question

I have product.json, admin.html and a admin.js files. My goal is to add new products in JSON through an admin page, JSON is used in my website to show a list of products.

NOTE: I only want to add objects in json from client side, I've made a e-commerce website which lists all the product and a admin panel login to add more products, so nothing is serverside and will be done locally.

The JSON contains an array of objects, like:

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

I have to add more objects in JSON through an admin page which contains a html form, like:

  <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>

The js file is like:

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);

I'm new to js and dealing with JSON for the first time, all the other related answers are not helping me and I can't find the right things in the docs. I hope I'm clear with my goal, please help me.

What exactly is your problem? Appending the new object to the 'JSON' array or writing the JSON object back to a file? If it's the second case, then does this answer your question: [Is it possible to write data to file using only JavaScript?](https://stackoverflow.com/questions/21012580/is-it-possible-to-write-data-to-file-using-only-javascript) — Billy Brown, Apr 03 '20 at 11:08
@AbhinnKrishn add the object to your json, but not save the json file? — Billy Brown, Apr 03 '20 at 11:20
@BillyBrown no, i want to save the new object in json, I want to use the new objects at other place. — Abhinn Krishn, Apr 03 '20 at 11:22
@AbhinnKrishn you need to make sure to use [`fetch`](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch) correctly (as suggested by @Gillespie59), and then not treat your JSON as a string: it will be parsed to JavaScript, and from there you can use it as a JavaScript array. If you want to then save the new JSON back to the file, then as @Evgeniy said, you will need a server and a server-side language for this (this can be done with JavaScript in [Node.js](https://nodejs.org/en/)). You may also encounter some security/CORS errors when reading local files from JavaScript. — Billy Brown, Apr 03 '20 at 11:32

score 0 · Answer 1 · answered Apr 03 '20 at 11:11

0

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);

answered Apr 03 '20 at 11:11

uiTeam324

1,215
15
34

1

a verbal explanation is often helpful – con Apr 03 '20 at 17:21
While this code may solve the question, [including an explanation](//meta.stackexchange.com/q/114762) of how and why this solves the problem would really help to improve the quality of your post, and probably result in more up-votes. Remember that you are answering the question for readers in the future, not just the person asking now. Please [edit] your answer to add explanations and give an indication of what limitations and assumptions apply. [From Review](/review/low-quality-posts/25765382) – double-beep Apr 03 '20 at 18:41

score 0 · Answer 2 · answered Apr 03 '20 at 11:13

0

If I understand you correctly, you need to edit JSON-file. So, as you know, JS work only on client-side. So, if you need to edit file, you should probably use PHP or something else that working on servere-side, where your file is located

answered Apr 03 '20 at 11:13

Evgeniy

303
2
9

I want to add an object to my json. – Abhinn Krishn Apr 03 '20 at 11:20

score 0 · Answer 3 · answered Apr 03 '20 at 11:16

0

fetch is an asynchrounous method, using promise object.


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

answered Apr 03 '20 at 11:16

Emmanuel Demey

2,158
4
18
21

Add new object to JSON array using JavaScript

3 Answers3