如何从维基百科table中获取第一列值的列表？

Question

我正在尝试获取第一个维基百科 table here（开始）第一列中的年份列表并将其放入 select

我正在以这种方式阅读 json，但我无法抓取我需要的内容以将其放入 select:

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

你的 url 的结果是一个名称为“*”而不是 "td" 的对象，所以你的行：

data.parse.text["td"]

变成

data.parse.text["*"]

这为您提供了文章的所有标记，您已经将其解析为 html。您可能还可以使用其他 url，但这是提供的结果。

然后您可以使用 jquery 从该文章中找到您想要的内容，例如：

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

从 table 中获取所有第一列（对于其他文章等，您可能需要 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 2

您似乎在响应对象属性 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 3

您可以通过 selecting 所有 tr 的 td:first-child 轻松做到这一点。如果它是另一个字段，您可以使用 td:nth-child(5) 伪 select 或。

这里是纯 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;
})

您稍后可以使用 jQuery 的 wrap 函数使每个 text/year 成为一个选项元素，您可以将其传递给 select 下拉列表

Answer 4

这是一种解决方案，适用于您的：

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

如何从维基百科table中获取第一列值的列表？

How to get the list of the first column value from wikipedia table?

javascript

jquery

wikipedia

wikipedia-api