Aktualisieren eines JSON-Arrays von einem Formular

Question

Ich studiere für einen Test und mit einer früheren Zuordnung zu studieren. Wir wurden beauftragt, ein JSON-Array zu erstellen und es mit Zuständen zu füllen, und jedem Staat zwei Nationalparks zu geben, die sich in ihnen befinden. Hier
ist ein Beispiel für den JSON-Array:

{ 
    "stateParks": [ 
    {"state": "Alabama", "parks": []}, 
    {"state": "Alaska", "parks": [{"parkName":"Denali", "url":"https://www.nps.gov/dena/index.htm"},{"parkName":"Glacier Bay", "url":"https://www.nps.gov/glba/index.htm"}]}, 
    {"state": "Arizona", "parks": [{"parkName":"Grand Canyon", "url":"https://www.nps.gov/grca/index.htm"},{"parkName":"Saguaro", "url":"https://www.nps.gov/sagu/index.htm"}]}, 
    {"state": "Arkansas", "parks": [{"parkName":"Hot Springs", "url":"https://www.nps.gov/hosp/index.htm"}]}, 
    {"state": "California", "parks": [{"parkName":"Death Valley", "url":"https://www.nps.gov/deva/index.htm"},{"parkName":"Redwood", "url":"https://www.nps.gov/redw/index.htm"}]}, 
    {"state": "Colorado", "parks": [{"parkName":"Great Sand Dunes", "url":"https://www.nps.gov/grsa/index.htm"},{"parkName":"Rocky Mountains", "url":"https://www.nps.gov/romo/index.htm"}]}, 
    {"state": "Connecticut", "parks": []}, 
    {"state": "Delaware", "parks": []}, 
    {"state": "Florida", "parks": [{"parkName":"Biscayne", "url":"https://www.nps.gov/bisc/index.htm"},{"parkName":"Dry Tortugas", "url":"https://www.nps.gov/drto/index.htm"}]}, 
    {"state": "Georgia", "parks": []}, 
    {"state": "Hawaii", "parks": [{"parkName":"Haleakala", "url":"https://www.nps.gov/hale/index.htm"},{"parkName":"Hawaii Volcanoes", "url":"https://www.nps.gov/havo/index.htm"}]}, 
    {"state": "Idaho", "parks": [{"parkName":"Yellowstone", "url":"https://www.nps.gov/yell/index.htm"}]}, 
    {"state": "Illinois", "parks": []} 
    ] 
} 

So gründe ich einen Fieldset einen Eingang des Staates zu nehmen, um den Park Namen, den sie aufnehmen wollen, und die URL für den Park.

<div id="popUp-add" class="popUp"> 
     <div class="popUp-content"> 
      <span class="close">&times;</span> 
      <fieldset class="form" id="Form" action="" method="post"> 
       <p>Add Park</p><br> 
       <p>State:</p> 
       <select class="form" id="state-in"> 
     <!--I attempted to do this with .innerHTML and it wouldn't work--> 
        <option value="0">Alabama</option> 
        <option value="1">Alaska</option> 
        <option value="2">Arizona</option> 
        <option value="3">Arkansas</option> 
        <option value="4">California</option> 
        <option value="5">Colorado</option> 
        <option value="6">Connecticut</option> 
        <option value="7">Delaware</option> 
        <option value="8">Florida</option> 
        <option value="9">Georgia</option> 
        <option value="10">Hawaii</option> 
        <option value="11">Idaho</option> 
        <option value="12">Illinois</option> 
        <option value="13">Indiana</option> 
        <option value="14">Iowa</option> 
        <option value="15">Kansas</option> 
        <option value="16">Kentucky</option> 
        <option value="17">Louisiana</option> 
        <option value="18">Maine</option> 
        <option value="19">Maryland</option> 
        <option value="20">Massachusetts</option> 
        <option value="21">Michigan</option> 
        <option value="22">Minnesota</option> 
        <option value="23">Mississippi</option> 
        <option value="24">Missouri</option> 
        <option value="25">Montana</option> 
        <option value="26">Nebraska</option> 
        <option value="27">Nevada</option> 
        <option value="28">New Hampshire</option> 
        <option value="29">New Jersey</option> 
        <option value="30">New Mexico</option> 
        <option value="31">New York</option> 
        <option value="32">North Carolina</option> 
        <option value="33">North Dakota</option> 
        <option value="34">Ohio</option> 
        <option value="35">Oklahoma</option> 
        <option value="36">Oregon</option> 
        <option value="37">Pennsylvania</option> 
        <option value="38">Rhode Island</option> 
        <option value="39">South Carolina</option> 
        <option value="40">South Dakota</option> 
        <option value="41">Tennessee</option> 
        <option value="42">Texas</option> 
        <option value="43">Utah</option> 
        <option value="44">Vermont</option> 
        <option value="45">Virginia</option> 
        <option value="46">Washington</option> 
        <option value="47">West Virgina</option> 
        <option value="48">Wisonsin</option> 
        <option value="49">Wyoming</option> 
        </select><br> 
       <p>National Park:</p> 
       <input class="form" type="text" id="park-in"><br> 
       <p>National Park url:</p> 
       <input class="form" type="text" id="url-in"><br> 
       <button id="addSubmit" onclick="addPark()">Submit</button> 
      </fieldset> 
     </div> 

    </div> 

Mein Eingang funktioniert gut und wenn ich Konsolenprotokoll verwenden, sind die Werte in den kommenden gut. Also habe ich versucht, $ .extend zu verwenden, um die Eingabe dem aktuellen JSON-Array hinzuzufügen. Dies ist der Code, den ich die Seite mit einem neuen Park zu aktualisieren:

//I made a mistake and uploaded an older version of the code! 
//This is now corrected to being able to work and upload, but only for 1 park 

    function addPark() { 

    var park; 
    $.getJSON('../data/stateParks.json', function (data, status) { 
     if (status == "success") { 
      park = data; 
      var i = 1; 
      var st = document.getElementById("state-in").value; 
      console.log(st); 
      var pN = document.getElementById("park-in").value; 
      console.log(pN); 
      var uR = document.getElementById("url-in").value; 
      console.log(uR); 

      var temp = park.stateParks[st].parks; 
      temp = { "parks": [{ "parkName": pN, "url": "http://" + uR }] }; 
      $.extend(true, park.stateParks[st], temp); 
      buildListAgain(); 
      console.log(park.stateParks[st].parks); 
      alert(pN + " added to " + park.stateParks[st].state); 

      function buildListAgain() { 
       var s = ''; 
       document.getElementById("stateParkList").innerHTML = s; 
       s = '<ul class ="stateParks">'; 
       for (var i = 0; i < 50; i++) { 
        s += '<li class="superlist">' + park.stateParks[i].state + '<ul>'; 
        for (var p = 0; p < park.stateParks[i].parks.length; p++) { 
         s += '<li class="sublist"><a href="' + park.stateParks[i].parks[p].url + '">' + park.stateParks[i].parks[p].parkName + '</a></li>'; 
        } 
        s += '</ul></li>'; 
       } 
       s += '</ul>'; 
       document.getElementById("stateParkList").innerHTML += s; 

      } 

     } else { 
      console.error(status); 
     } 
    }); 

} 

So alle Werke gut, außer wenn ich versuche, einen zweiten Park hinzuzufügen und es ist keine dauerhafte Veränderung. Kann mir jemand helfen, herauszufinden, wie man einen zweiten Park hinzufügen und lokal sparen kann? Es muss nicht Server Seite speichern, wie wir das später lernen.
Noch einmal, das sind vergangene Hausaufgaben, die ich fast abgeschlossen habe. Ich möchte dies für einen kommenden Test, der etwas Ähnliches haben wird, weiter verstehen. Danke im Voraus!

Answer 1

Jedes Mal, wenn Sie einen Park hinzufügen, wird der JSON erneut aus der Datei angefordert. Änderungen, die Sie an der Variablen park vorgenommen haben, werden dadurch entfernt. Verschieben Sie Ihre var park Variable und getJSON Funktion außerhalb von addPark und Sie können dann Ihre park Variable (in Betracht ziehen) als ein Standardobjekt, um es zu manipulieren.