如何从维基百科表中获得第一列值的列表

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

本文关键字：列表 一列 百科      更新时间：2023-09-26

我试图在这里(开始)的第一个维基百科表的第一列的年份列表，并将其放置在一个选择

我正在以这种方式读取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) {
        }
    });    
});

这里有一个解决方案:

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

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=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>

您似乎在响应对象中选择了错误的属性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()
演示

您可以很容易地通过选择所有tr中的td:first-child来做到这一点。如果它是另一个字段，您可以使用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;
})

你以后可以使用jQuery的wrap函数使每个文本/年份成为一个选项元素，你可以传递给一个选择下拉菜单

相关文章：