使用 javascript 从 wikipedia html 表行中提取数组答案

【问题标题】：Pull an array from wikipedia html table rows using javascript使用 javascript 从 wikipedia html 表行中提取数组
【发布时间】：2018-05-11 18:41:48
【问题描述】：

我看到@wesbos 从 wiki 页面 JavaScript Array Cardio Practice 获取了一个数组

我想自己尝试一下，然后找一些有趣的数组来练习。但是很多维基页面都有表格中的信息，我一直在尝试从List of NME number-one singles of the 1960s 获取数组

在这里，我选择了正确的表并选择了 tr

    const tables = document.querySelectorAll('.wikitable');
    const table = tables[1];
    const tr = table.querySelectorAll('tbody tr');

我需要每行中 td 的内部文本，通过选择单个 tr 并使用 map() 我可以获得一个数组

    const theTD = Array.from(tr[67].querySelectorAll('td'));
    const theText = theTD.map(item => item.innerText);
    console.log(theText);

如何遍历整个表并获得一个多维数组，我一直在尝试使用 forEach，但我只是返回 undefined

谢谢
安德鲁

【问题讨论】：

array.forEach 不返回任何内容。此外，你在正确的轨道上。 .map(item => item.innerText) 用于 1 行的数据。您必须对 1 个表中的 trs 执行相同操作
我想自己尝试一下，然后找一些有趣的数组来练习。 - 那么你尝试了什么？

标签： javascript html arrays multidimensional-array foreach

【解决方案1】：

你已经弄清楚了一部分，所以之后

const tables = document.querySelectorAll('.wikitable');
const table = tables[1];
const tr = table.querySelectorAll('tbody tr');

你可以这样做

var result = Array.from(tr).map((x) => { 
  var theTD = x.querySelectorAll('td');  
  var theText = Array.from(theTD).map(item => item.innerText); 
  return theText; 
});

在这里，我在您的地图上添加了一张地图。与列一样，您也可以在 map 的帮助下对行进行迭代。

【讨论】：

感谢 Vipin，这是一个很好的答案
你知道我如何命名索引键，所以现在它是 0: "example-artist" 1: "example-song" 2: "example-date" 3: "example-weeks" 我想像这个艺术家一样命名这些键：“example-artist”，song“example-song”等......
还有什么方法可以导出该数组以在离线项目中使用？感谢您的帮助
是的，但我不在电脑前。一旦可用，将恢复。 :)

【解决方案2】：

对于此 wiki 页面，以下脚本将起作用；

let table = document.querySelectorAll('.wikitable')[1];
let alltds = table.querySelectorAll('.vcard .fn a');
for(i=0;i<alltds.length;i++) { 
   console.log(alltds[i].innerHTML) ; 
}

【讨论】：

【解决方案3】：

这是一种方法。

const tables = [...document.querySelectorAll('.wikitable')]

console.log(
  tables.map(table => ({ 
    id: table.id,
    "class": table.className,
    data: (function() {
      
      // get the data from each cell and header
      const rows = [...table.querySelectorAll('tr')]
        .map(row => 
          [...row.querySelectorAll('th, td')]
            .map(x => x.textContent)
        )
      // extract the headers
      const headers = rows.shift()
      
      // return objects with the headers as keys
      return {
        json: rows.map(row => row.reduce((acc, x, i) => ({ 
          ...acc,
          [headers[i]]: x
        }), {})),
        multidimensional: [
          headers,
          ...rows
        ]
      }

    })()
  }))
)

<script src="https://codepen.io/synthet1c/pen/KyQQmL.js"></script>
<table id="test" class="wikitable">
  <thead>
    <tr>
      <th>one</th>
      <th>two</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
    </tr>
    <tr>
      <td>3</td>
      <td>4</td>
    </tr>
  </tbody>
</table>

【讨论】：

【解决方案4】：

你可以试试这样的：-

const tables = document.querySelectorAll('.wikitable');
const table = tables[1];
const tr = table.querySelectorAll('tbody tr');

var output = [];
    for(var i = 0; i < tr.length; i++){
     const theTD = Array.from(tr[i].querySelectorAll('td'));
     const theText = theTD.map(item => item.innerText);
     if(theText.length > 0 ){
        output.push(theText);
     }
}

【讨论】：