AJAX post call stores data twice in my JSON file-CodePudding

I stumbled across a problem in my project. I want to build a kind of archive for news articles using node.js. I store the input of a form (all the relevant data) into a JSON file. This is my form (simplified):

<form id="json-form">
<label class="json-form-labels" for="title">title</label>
<input id="json-form-title" type="text" name="title" required>

<label  for="date">date</label>
<input id="json-form-date" type="text" name="date" required>        

<label  for="author"><author</label>
<input id="json-form-author" type="text" name="author" required>

<label  for="topic">topic</label>
<select id="json-form-topic"name="topic">
    <option value="not_specified"></option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
</select>

<label  for="Link">link</label>
<input id="json-form-link" type="text" name="link" required>

<label  for="description">description</label>
<textarea name="" id="json-form-description-textarea" required>    </textarea>  

<label  for="content">content</label>
<textarea name="" id="json-form-content-textarea" required></textarea>

<button id="json-form-submit">Submit</button>
</form>

On submit I am using AJAX to send the data:

$(function() {
$(document).on('click', '#json-form-submit', function(e) {
    e.preventDefault();
    $('#json-form-submit').prop('disabled', true);
    var title = document.getElementById('json-form-title').value; 
    var author = document.getElementById('json-form-author').value; 
    var date = document.getElementById('json-form-date').value; 
    var topic = document.getElementById('json-form-topic').value; 
    var articlelink = document.getElementById('json-form-link').value; 
    var description = document.getElementById('json-form-description-textarea').value; 
    var content = document.getElementById('json-form-content-textarea').value; 
    var data = { title: title, author: author, date: date, related: related, articlelink: articlelink, description: description, content: content };
        
    $.ajax({    
        type: "POST",
        url: '/create-article',
        contentType: 'application/json',
        data: JSON.stringify(data),
        success: function() {
            
        },
        error: function() {
            
        }
    });
});         
});

Server-side I am writing the data in my JSON like this:

app.post('/create-article', (req, res) => {
var title = req.body.title;
var date = req.body.date;
var author = req.body.author;
var topic = req.body.topic;
var articlelink = req.body.articlelink;
var description = req.body.description;
var content = req.body.content;

const data = { title: title, author: author, date: date, topic: topic, articlelink: articlelink, description: description, content: content };

const jsonString = fs.readFileSync('./public/files/js/articles.json');
const jsonObject = JSON.parse(jsonString);
jsonObject.push(data);
fs.writeFileSync('./public/files/js/articles.json', JSON.stringify(jsonObject));
})

The problem I'm facing now is that my the new article is written twice into my JSON file instead of once and I have honestly no clue why. Any help would be appreciated!

CodePudding user response：

Your form submit might be securely simplified just to the following assuring only one submit. I'm not sure this will solve your issue, but at least you will be sure the form is submitted once and will learn how ot easily handle a form on AJAX submit.

EDIT: Makes the JSON passed through the body.

$(function() {
  $('#json-form').submit(function(e) {
    e.preventDefault();
    $('#json-form-submit').prop('disabled', true);
    var formData = new FormData(this);
    var object = {};
    formData.forEach((value, key) => object[key] = value);
    $.ajax({
      type: 'POST',
      url: '/create-article',
      contentType: false,
      data: JSON.stringify(object),
      processData: false,
      success: function(response) {
        console.log('Success statusText =', response.statusText);
        $('#json-form-submit').prop('disabled', false);
      },
      error: function(response) {
        console.log('Error statusText =', response.statusText);
        $('#json-form-submit').prop('disabled', false);
      }
    });
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="json-form">
  <label class="json-form-labels" for="title">title</label>
  <input id="json-form-title" type="text" name="title" required>

  <label class="json-form-labels" for="date">date</label>
  <input id="json-form-date" type="text" name="date" required>

  <label class="json-form-labels" for="author"><author</label>
  <input id="json-form-author" type="text" name="author" required>

  <label class="json-form-labels" for="topic">topic</label>
  <select id="json-form-topic" name="topic">
    <option value="not_specified"></option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
  </select>

  <label class="json-form-labels" for="Link">link</label>
  <input id="json-form-link" type="text" name="link" required>

  <label class="json-form-labels" for="description">description</label>
  <textarea name="" id="json-form-description-textarea" required>    </textarea>

  <label class="json-form-labels" for="content">content</label>
  <textarea name="" id="json-form-content-textarea" required></textarea>

  <button id="json-form-submit">Submit</button>
</form>

CodePudding user response：

I'm not sure but aren't you reading the file and then pushing the data twice? NOTE: I'm just trying to help not much clue about this :)


const jsonString = fs.readFileSync('./public/files/js/articles.json');
const jsonObject = JSON.parse(jsonString);
jsonObject.push(data);
fs.writeFileSync('./public/files/js/articles.json', JSON.stringify(jsonObject));