Блог

Я пытаюсь получить список лет в первом столбце первой таблицы Википедии здесь (Начало) и поместить его в поле выбора

Я читаю json таким образом, но я не могу получить то, что мне нужно, чтобы поместить его в select:

 $(document).ready(function(){

    $.ajax({
        type: "GET",
        url: "https://en.wikipedia.org/w/api.php?action=parseamp;format=jsonamp;prop=textamp;section=1amp;page=List_of_wars_1000–1499amp;callback=?",
        contentType: "application/json; charset=utf-8",
        async: false,
        dataType: "json",
        success: function (data, textStatus, jqXHR) {

            var markup = data.parse.text["td"];
            var i = $('<div></div>').html(markup);

            // remove links as they will not work
            i.find('a').each(function() { $(this).replaceWith($(this).html()); });

            // remove any references
            i.find('sup').remove();

            // remove cite error
            i.find('.mw-ext-cite-error').remove();

            $('#article').html($(i).find('p'));         
        },
        error: function (errorMessage) {
        }
    });    

});
 

Вот одно из решений для вашего:

 $(document).ready(function(){
    $.ajax({
        type: "GET",
        url: "https://en.wikipedia.org/w/api.php?action=parseamp;format=jsonamp;prop=textamp;section=1amp;page=List_of_wars_1000–1499amp;callback=?",
        contentType: "application/json; charset=utf-8",
        async: false,
        dataType: "json",
        success: function (data, textStatus, jqXHR) {
          var html = data.parse.text['*'];

          if(!html) {
            return;
          }

          var $hiddenContent = $('<div/>').html(data.parse.text['*']).hide();
          var $firstColumnCells = $hiddenContent.find('table.wikitable').find('td:first-child');
          $hiddenContent.remove(); // remove our helper div

          var values = [];
          $firstColumnCells.each(function(idx, cell) {
            
            var val = $(cell).text().match(/d /)[0];
            
            values.push($(cell).text());
            // you can also do something here with the value
            $('#article').append('<div>'  val   '</div>');
          });

          // show as array in your console if you like or doSomething with the array
          //console.log(values);       
        },
        error: function (errorMessage) {
        }
    });    

}); 

 #article div {
  padding: 5px;
  margin: 5px 0;
  background: grey;
  width: auto;
  color: white;
  width: 100px;
  text-align: center;
} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="article">
  <h2>Years</h2>
</div> 

Результатом вашего URL является объект с именем «*», а не «td», поэтому ваша строка:

 data.parse.text["td"]
 

становится

 data.parse.text["*"]
 

это дает вам всю разметку статьи, которую вы уже перевели в html. Вы можете использовать другие URL-адреса, но это результат предоставленного.

Затем вы можете использовать jquery, чтобы найти то, что вы хотите, из этой статьи, например:

 html.find("table td:first-child") 
 

чтобы получить все первые столбцы из таблицы (возможно, вам понадобится table:first для других статей и т. Д.).

Рабочий фрагмент:

 $(document).ready(function(){

    $.ajax({
        type: "GET",
        url: "https://en.wikipedia.org/w/api.php?action=parseamp;format=jsonamp;prop=textamp;section=1amp;page=List_of_wars_1000–1499amp;callback=?",
        contentType: "application/json; charset=utf-8",
        async: false,
        dataType: "json",
        success: function (data, textStatus, jqXHR) {

            var markup = data.parse.text["*"];
            var html = $('<div/>').html(markup);
          
            var cells = html.find("table td:first-child");
            cells.each(function() {
                console.log($(this).text());
              });
          
            var years = cells.map(function() { return $(this).text(); }).get();
            console.log(years.join(","))
          
        },
        error: function (errorMessage) {
        }
    });    

}); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

Похоже, вы используете неправильное свойство td в объекте ответа

Попробуйте

  var markup = data.parse.text['*'];
 var i = $('<div></div>').html(markup);
 var years = i.find('table:first tr:gt(1)').map(function() {
   return $(this).children().eq(0).text()
 }).get()
 

DEMO

вы можете сделать это очень легко, выбрав td:first-child из всех tr . И если это другое поле, вы можете использовать td:nth-child(5) псевдоселектор.

вот пример с чистым javascript (протестирован);

 var nodes = document.querySelectorAll(".wikitable tr td:first-child")
var values = Array.prototype.map.call(nodes, function(n){
    return n.innerContent;
})
 

аналогично в jQuery, вы можете сделать (непроверенный);

 var values = $(".wikitable tr td:first-child").each(function(n){
    return n.innerContent;
})
 

позже вы можете использовать wrap функцию jQuery, чтобы сделать каждый текст / год элементом опции, который вы можете передать в раскрывающийся список выбора