如何将列表转换为 JavaScript 中的 JSON？

Question

我有一个这样的列表：

<ol class="CricketPlayers">
    <li id="1">Player: John, TotalRuns: 4350, AllRounder: false</li>
    <li id="2">Player: Michael, TotalRuns: 8373, AllRounder: true</li>
</ol>

我需要将其转换为 JSON ，如下所示：

[
    {
        "Player": "John",
        "TotalRuns": 4350,
        "AllRounder": false
    },
    {
        "Player": "Michael",
        "TotalRuns": 8373,
        "AllRounder": true
    }
]

JSON 的格式并不重要。

不能使用 jQuery 等。 我正在考虑将列表转换为数组，然后调用JSON.stringify 。 但我不确定这是否可行，因为列表中可能有很多项目。

Answer 1

尝试这个：

let result = [];
let parent = document.querySelector(".CricketPlayers").children;
Array.prototype.forEach.call(parent, child => {
  let x = child.innerHTML.split(",");
  let y = JSON.stringify(x).replace("[","{").replace("]","}");
  result.push(y)
});
console.log(result)

Answer 2

这里是 go：

[...document.querySelectorAll('.CricketPlayers li')]
.map(node => node.innerText.match(/Player\: (\w+). TotalRuns\: (.*). AllRounder\: (.*)/))
.map(matchedParts => ({ Player: matchedParts ? matchedParts[1] : '', TotalRuns: matchedParts ? matchedParts[2] : 0, AllRounder: matchedParts ? matchedParts[3] : 0 }))

结果和你的一样。

Answer 3

获取ol的孩子，迭代它们并构造数组。

 let ol = document.getElementsByClassName('CricketPlayers'); let output =[...ol[0].children].map(item => { let props = item.innerHTML.split(','); return props.reduce((a, c) => { aProp = c.split(':'); a[aProp[0].trim()] = aProp[1].trim(); return a }, {}) }) console.log(output)

 <ol class="CricketPlayers"> <li id="1">Player: John, TotalRuns: 4350, AllRounder: false</li> <li id="2">Player: Michael, TotalRuns: 8373, AllRounder: true</li> </ol>