Как получить список первого значения столбца из таблицы википедии?

Question

Я пытаюсь получить список лет в первом столбце первой википедии table here (Start) и поместите его в отборной

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

$(document).ready(function(){ 

    $.ajax({ 
     type: "GET", 
     url: "https://en.wikipedia.org/w/api.php?action=parse&format=json&prop=text&section=1&page=List_of_wars_1000%E2%80%931499&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) { 
     } 
    });  

}); 

Answer 1

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

$(document).ready(function(){ 
 
    $.ajax({ 
 
     type: "GET", 
 
     url: "https://en.wikipedia.org/w/api.php?action=parse&format=json&prop=text&section=1&page=List_of_wars_1000%E2%80%931499&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>

Answer 2

результат вашего URL объект с именем "*" не "тд", поэтому вашей линии:

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=parse&format=json&prop=text&section=1&page=List_of_wars_1000%E2%80%931499&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>

Answer 3

Вы, кажется, идет за неправильную собственность 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

Answer 4

вы можете сделать это очень легко, выбрав 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, чтобы каждый текст/год опционный элемент, который можно передать в отборное выпадающее меню