jQuery：每次按下提交按钮时，用JSON数组中的每个对象更新一个html有序列表

I am very new to jQuery, Javascript and DOM manipulation in general. I am trying to build a simple interface to annotate a series of tweet pairs. I have my tweet pairs stored as objects in a JSON array (the size is 4100 pairs). I am trying to load in the list the first pair and then update the list with the next pair each time a "submit" type button is clicked.

我对jQuery，Javascript和DOM操作很新。我正在尝试构建一个简单的界面来注释一系列的推文对。我将我的推文对作为对象存储在JSON数组中（大小为4100对）。我试图在列表中加载第一对，然后每次单击“提交”类型按钮时使用下一对更新列表。

The HTML code looks like:

HTML代码如下所示：

<div class="inner cover">

  <ol type="A">
    <li><span id="full_tweet"></span></li><br>
    <li><span id="tweet_no_emoji"></span></li><br>
  </ol>  

  <form>
    <input type="radio" name="Class Tag" value="R">Redundant<br>
    <input type="radio" name="Class Tag" value="Non R">Non Redundant<br>
    <input type="radio" name="Class Tag" value="Non R + POS">Non Redundant + POS<br>
    <input type="submit" value="Submit">
  </form>

</div>

My JSON file looks like:

我的JSON文件如下所示：

{ "Pairs": [
  {
     "full_tweet": "RT @USER: GRAYSON DOLAN is the one who is in awe with her as the best in home \ud83c\udfe1 she was meant to be a family but I love \u2764\ufe0f th\u2026 ", 
     "tweet_no_emoji": "RT @USER: GRAYSON DOLAN is the one who is in awe with her as the best in home  she was meant to be a family but I love \u2764\ufe0f th\u2026 "
   }, 
  {
     "full_tweet": "RT @USER: @USER Hey Stella, would you please SIGN AND RT this \ud83d\udc36", 
     "tweet_no_emoji": "RT @USER: @USER Hey Stella, would you please SIGN AND RT this "
    }, 
  {
     "full_tweet": "I don't care what you think as long as its about me \ud83c\udfb6", 
     "tweet_no_emoji": "I don't care what you think as long as its about me "
   }
  ]
}

My script:

我的剧本：

$.getJSON('tweet_pairs3.json', function (data) {

  $.each(data.Pairs, function (i, Pairs) {
    var pair1 = ('<li><a href="#">' + Pairs.full_tweet + '</a></li>');
    $('#full_tweet').append(pair1);

    var pair2 = ('<li><a href="#">' + Pairs.tweet_no_emoji + '</a></li>');
    $('#tweet_no_emoji').append(pair2);
  }); //$.each(...)

}); //$.getJSON

This of course is appending all the items to the list, but what I'm looking for is a way to append the first pair, then update the list with the next pair at each "submission".

这当然是将所有项目附加到列表中，但我正在寻找的是一种方法来附加第一对，然后在每次“提交”时使用下一对更新列表。

I would appreciate any help.

我将不胜感激任何帮助。

2 个解决方案

#1

Try this

尝试这个

 <div class="inner cover">
  <ol type="A" id="full_tweet">

  </ol>  
  <ol type="A" id="tweet_no_emoji">

  </ol>  

  <form>
  <input type="radio" name="Class Tag" value="R">Redundant<br>
  <input type="radio" name="Class Tag" value="Non R">Non Redundant<br>
  <input type="radio" name="Class Tag" value="Non R + POS">Non Redundant + POS<br>
  <input type="submit" value="Submit">
  </form>

</div>


$.getJSON('tweet_pairs3.json', function (data) {
var pair1='';
var pair2='';
$.each(data.Pairs, function (i, Pairs) {
  pair1 += '<li><a href="#">' + Pairs.full_tweet + '</a></li>';
  pair2 += '<li><a href="#">' + Pairs.tweet_no_emoji + '</a></li>';   
});
$('#full_tweet').html(pair1);
$('#tweet_no_emoji').html(pair2);
}); 

#2

I have found a way to get the desired output even though I am not sure this solution is optimal. With this code I am getting the first pair displayed in the list of my html page; then on each click over the "Submit" button the list is updated with the next element of my file. Once reached the last element by clicking on the Submit button I am redirected to another page.

我找到了一种方法来获得所需的输出，即使我不确定这个解决方案是否是最佳的。使用此代码，我得到的第一对显示在我的html页面列表中;然后在每次单击“提交”按钮时，列表将使用我的文件的下一个元素进行更新。通过单击“提交”按钮到达最后一个元素后，我被重定向到另一个页面。

$.getJSON('tweet_pairs3.json', function (data) {
  var pair1=[]; //I store the properties of the JSON in arrays so that I can get elements by indices
  var pair2=[];
      idx = 1;
  $.each(data.Pairs, function (i, Pairs) { //filling the empty arrays
    pair1.push(Pairs.full_tweet);
    pair2.push(Pairs.tweet_no_emoji);   
  }); //$.each(...)
  $('#full_tweet').html(pair1[0]); //appending only the first pair to the list
  $('#tweet_no_emoji').html(pair2[0]);

  $('#sub').on('click', function(e){

    e.preventDefault();
    $('#full_tweet').html(pair1[idx]); //changing list content starting from elements at index 1 in my arrays
    $('#tweet_no_emoji').html(pair2[idx]);

    idx += 1
    if (idx >= pair1.length) {
      window.location.href = "Zlast_page.html"; //once the index is equal to the array length if I click on the button I am redirected to a page stating that the task is complete
    } //if()

  }); //$('#sub').on

}); //$.getJSON*/