How to append JSON object data to existing JSON file by html input form?

Question

I have a JSON file in my pc "WordMeanings.json" and the file has the data

{
  "WordMeanings": [
      {
          "bangla": "ei je",
          "example": "Hi there!",
          "english": "Hi"

      }
]
}

but I would like to append new JSON object data to existing JSON file something like the below objects by html input form

,{
          "bangla": "ki obostha?",
          "example": "What's up?"
          "english": "How are you?"

      }

The html form will be 4 inputs Bangla, Example, English and Submit button. When I will click on the Submit button the inputs will add on the existing JSON file under the existing objects in "WordMeanings.json" and it should be adding how many times i want to add.

I have created the input form and try to do it by html and javascript but i couldn't!

Answer 1

Assuming that WordMeanings.json is web accessible URL:

1. Read JSON from URL. Eg $.getJSON('WordMeanings.json', successCallback)
2. In successCallback append element to JSON Object:

function successCallback(data) {
    data.WordMeanings.push({
          "bangla": "ki obostha?",
          "example": "What's up?"
          "english": "How are you?"
     });
}

3. Do whatever you want with new data. Eg let user download it