Question

我想在第一个维基百科table here（开始）的第一列中获取年份列表，并将其放在选择

中

我正在以这种方式阅读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

以下是您的一个解决方案：

＆＃13;

$(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) {
        }
    });    

});

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您网址的结果是一个名称为“*”而不是“td”的对象，因此您的行：

data.parse.text["td"]

变为

data.parse.text["*"]

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

然后，您可以使用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的{{1}}轻松完成此操作。如果是另一个字段，则可以使用tr伪选择器。

这里有一个纯javascript（测试）的例子;

td:nth-child(5)

在jQuery中类似，你可以做（未经测试）;

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; })函数使每个text / year成为可以传递给选择下拉列表的选项元素

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

4 个答案: