javascript - 跳到 JSON 数组中的下一个对象并填充输入框

Question

我构建了一个表单，用数组中的数据填充字段。

我有 2 个按钮，一个将使用 Ajax“发布”- 提交，另一个我试图跳到数组中的下一个对象 - 跳过。

我不知道如何让跳过按钮起作用。我有 found允许您跳到下一条记录的代码，当它只显示一条记录时，但是我有很多记录要添加到 div，所以需要其他东西。

如何跳到数组中的下一个对象？

这是我的代码的 JSfiddle:http://jsfiddle.net/8vf4rs1w/

这里是代码的简化代码。我有大约 20 个输入框我也在添加数据。

<form>

<h1>Record: #<div id="record_id"></div></h1><h5>Date Added: <div id="date_added"></div></h5><br/>

      <div class="form-group">
        <label for="est_name">Name:</label>
        <input type="text" class="form-control" id="est_name" placeholder="Est Name" disabled>
      </div>

    <div class="btn-group">
    <button type="submit" class="btn btn-primary">Verify</button>
    <button type="button" id="skip" class="btn btn-secondary">Skip</button>
    </div>
</form>

获取JSON

$(document).ready(function(){

        $.getJSON('getJSON.php', { get_param: 'name' }, function (data) {
              console.log(data)

              var index = 0;

              var record_id = data[index].id;
              var est_name = data[index].name;
              var date_added = data[0].reg_date;

              $('#record_id').text(record_id);
              $('#date_added').text(date_added);
              $('#est_name').val($('#est_name').val() + est_name);

        });
    });

JSON

[ 0: {id: "1", name: "name1", locale: "locale1" }
    1: {id: "2", name: "name2", locale: "locale2" }
    2: {id: "3", name: "name3", locale: "locale3" } ]

Answer 1

要滚动记录数组，您必须将数组和索引存储在更高的范围内，并在单击跳过按钮时递增索引，如下所示:

$(document).ready(function(){
    // The variables that need to be remembered throughout the app
    var index = 0;
    var records = [];

    // Function to set form values
    function displayRecord(){
        var record = records[index];
        $('#record_id').text(record.id);
        $('#date_added').text(record.reg_date);
        $('#est_name').val(record.name);
    }

    // Increment index when the skip button is clicked and display data
    document.getElementById('skip').addEventListener('click', function(){
        index++;
        displayRecord();
    });

    $.getJSON(/**/
        records = data;
        displayRecord();   
    /**/);   
});