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

Question

Я очень новичок в 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 

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

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

Answer 1

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

Answer 2

Попробуйте

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