Updating a JSON array from a form

Question

I am studying for a test and using a past assignment to study with. We were assigned to make a JSON array and fill it with states, and give each states 2 National parks that are inside of them.
Here is an example of the 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 I set up a fieldset to take an input of the state, the park name that they want to add, and the url for the 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>

My input is working fine and when I use console log, the values coming in are good. So i tried to use $.extend to add the input to the current JSON array. This is the code that I have to update the page with a new park:

//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 all of the works fine, EXCEPT when I try to add a second park and it isn't a permanent change. Can someone help me figure out how to make this add a second park and make it save locally. It doesn't have to save server side, as we are learning that later on.
Once again, this is past homework that I turned in almost complete. I want to further understand this for an upcoming test that will have something similar. Thanks in advance!

I also tried looking up similar questions, but couldn't find anything that would really fit my problem. If there are links to questions like this, I am definitely down to go look at them if they are linked here. — user1988336
– user1988336, Commented Mar 28, 2017 at 1:11
i changed .extend to .push(). this made my code not replace existing parks, but I am still unable to add 2 parks without deleting the first. — user1988336
– user1988336, Commented Mar 28, 2017 at 1:43

Drewby · Accepted Answer · 2017-03-28 01:18:09Z

1

Every time you add a park it's re-requesting the JSON from the file, removing any changes you've made to the park variable. Move your var park variable and getJSON function outside of addPark and you can then use your park variable (consider parks) as a standard object to manipulate it.

answered Mar 28, 2017 at 1:18

Drewby

3731 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user1988336 Over a year ago

I made a mistake and uploaded the wrong javascript code

user1988336 Over a year ago

I just updated the working javascript file. This is the code that will add one new park, but not 2+

Drewby Over a year ago

The solution is still the same: you need to assign the JSON response of the parks to a variable outside of the addPark function, as that will reset and remove the previous park added every time you try to add another park to it. Because you're not updating the stateParks.json file itself it cannot be implemented the way you have currently coded it.

Collectives™ on Stack Overflow

Updating a JSON array from a form

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related