javascript - 从表单更新 JSON 数组

Question

我正在为考试而学习，并使用过去的作业来学习。我们被分配创建一个 JSON 数组并用州填充它，并为每个州提供 2 个位于其中的国家公园。
以下是 JSON 数组的示例:

{
    "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": []}
    ]
}

因此，我设置了一个字段集来获取州的输入、他们想要添加的公园名称以及公园的网址。

<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>

我的输入工作正常，当我使用控制台日志时，输入的值很好。所以我尝试使用 $.extend 将输入添加到当前的 JSON 数组。这是我必须使用新公园更新页面的代码:

//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);
        }
    });

}

所以所有的工作都很好，除了当我尝试添加第二个公园并且这不是永久性的改变时。有人可以帮我弄清楚如何添加第二个公园并使其保存在本地吗？它不必保存服务器端，我们稍后会了解到这一点。
这又是我过去交的作业，几乎已经完成了。我想在即将进行的测试中进一步了解这一点，该测试将有类似的内容。提前致谢!

Answer 1

每次您添加公园时，它都会从文件中重新请求 JSON，从而删除您对 park 变量所做的任何更改。将您的 var park 变量和 getJSON 函数移到 addPark 之外，然后您可以使用您的 park 变量(考虑 parks) 作为标准对象来操作它。