jQuery: обновлять упорядоченный список html с каждым объектом из массива JSON каждый раз, когда я нажимаю кнопку отправки

Я очень новичок в jQuery, Javascript и манипулировании DOM в целом. Я пытаюсь создать простой интерфейс для аннотирования серии пар твитов. У меня есть пары твитов, хранящиеся как объекты в массиве JSON (размер составляет 4100 пар). Я пытаюсь загрузить в список первую пару, а затем обновлять список следующей парой каждый раз, когда нажимается кнопка типа «отправить».

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>

Мой файл 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 "
   }
  ]
}

Мой сценарий:

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

Это, конечно, добавляет все элементы в список, но я ищу способ добавить первую пару, а затем обновить список следующей парой при каждой «отправке».

Буду признателен за любую помощь.


javascript json jquery submit-button html-lists
person user5608277    schedule 05.12.2016    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Попробуй это

 <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);
});
person Nagendra    schedule 05.12.2016
comment
Спасибо, но с вашим решением я все еще получаю все пары на одной странице (это тот же результат, который я уже получаю с моим кодом). Мне нужна только первая пара, а затем обновлять список следующей парой после каждого нажатия кнопки «Отправить». - person user5608277; 05.12.2016

arrow_upward
0
arrow_downward

Я нашел способ получить желаемый результат, хотя и не уверен, что это решение оптимально. С помощью этого кода я получаю первую пару, отображаемую в списке моей 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*/
person user5608277    schedule 06.12.2016