title: Saving and retrieving data in JSON
body: <p>I have an HTML file with an input in which the user can enter his name and another one in which the user can enter his age followed by a button and a List:</p>
  
  <pre><code>&lt;p&gt;name: &lt;input type="text" id="name"&gt;&lt;/p&gt;
  &lt;p&gt;drink: &lt;input type="text" id="age"&gt;&lt;/p&gt;
  &lt;button id="post"&gt;Submit&lt;/button&gt;
  &lt;ul id="output"&gt;&lt;/ul&gt;
  </code></pre>
  
  <p>Now I want the values ​​to be saved in a JSON file like this:</p>
  
  <pre><code>[
    {
      "name": "Person 1",
      "age": 54
    },
    {
      "name": "Person 2",
      "age": 27
    }
  ]
  </code></pre>
  
  <p>I have a JavaScript file in which I used ajax with jQuery:</p>
  
  <pre><code>$(function(){
  
    var $output = $('#output');
    var $name = $('#name');
    var $age = $('#age');
    $.ajax({
      type: 'GET',
      url: 'data.json',
      success: function(data){
        data = JSON.parse(data);
        $.each(data, function(i,item){
          $output.append('&lt;li&gt;name: '+item.name+', age: '+item.age+'&lt;/li&gt;');
        });
      },
      error: function(){
        alert('error loading items');
      }
    });
  
    $('#post').on('click',function(){
  
      var object = {
        name: $name.val(),
        drink: $drink.val()
      }
  
      $.ajax({
        type: 'POST',
        url: 'data.json',
        data: object,
        success: function(newItem){
          $output.append('&lt;li&gt;name: '+newItem.name+', age: '+newItem.age+'&lt;/li&gt;');
        },
        error: function(){
          alert('error saving items');
        }
      });
  
    });
  
  });
  </code></pre>
  
  <p>But if I run the code on a server, I get this error:</p>
  
  <pre><code>SyntaxError: JSON Parse error: Unexpected identifier "object"
  </code></pre>
  
  <p>I checked the JSON code but could not find an error. If I run the code on my localhost, I don't get an error message, but the values ​​are undefined and won't be saved in the JSON file. </p>