title: Creating a CRUD for a JSON object?
body: <p>I'm new to javascript development and I have come across a problem that I assume has already been solved but I don't know how to find the answer.</p>
  
  <p>Say I have a JSON object as follows:</p>
  
  <pre><code>// bagelList.json
  {
      "description": "The bagel list. Who brings the bagels on what day.",
      "list": [
          {
              "date": "Nov 25",
              "name": "Cory"
          },
          {
              "date": "Nov 26",
              "name": "Jordan"
          }
      ]
  }
  </code></pre>
  
  <p>I want to display the information in this object on a web page, but I want to display it prettily - as opposed to directly printing the JSON. I also want to allow users to update the list, add new entries, modify the description, etc.</p>
  
  <p>I can display the data like so:</p>
  
  <pre><code>$( document ).ready(function() {
  
      $.getJSON('bagelList.json', function(bagelData) {
  
          var items = [];
          $.each( bagelData.list, function( index, bagelAssignment ) {
              items.push( "&lt;tr&gt;&lt;td contenteditable="true"&gt;"
                          + bagelAssignment.date + "&lt;/td&gt;&lt;td&gt;"
                          + bagelAssignment.name + "&lt;/td&gt;&lt;/tr&gt;" );
          });
  
          $("tbody#schedule").append( items.join( "" ) );
  
      });
  
  });
  </code></pre>
  
  <p>However, all the data is now obfuscated a bit, by nature of being embedded in html. I could write a parser to go through all the table entries and recreate the original JSON object after the items have been updated by the user, but that seems like a kludge.</p>
  
  <p>What is the right way to model the data such that it can be displayed in an appealing manner, but retain the ability to read and write from the object?</p>
  
  <p>I assume this problem has already been solved many times before, so I don't want to go too far down the road of writing a CRUD only to find out that I just had to do XYZ and it just works.</p>