select json_所有国家/地区的清单：HTML select和JSON

json" width="403px" height="256px" style="outline: none;" />

select json

Ever needed a list of all the countries in the world to put as options in an HTML select? Well, here you go. And JSON too. You're welcome!

是否曾经需要将世界上所有国家的清单作为option到HTML select ？好吧，你去。还有JSON 。别客气！

但是怎么... (But how...)

How was the list derived so you can update it once in a while? Glad you asked.

列表是如何得出的，以便您可以不时更新一次？很高兴你问。

https://www.iso.org/obp/ui/#search/code/ is the page linked from W3 spec so it must be the real deal.

https://www.iso.org/obp/ui/#search/code/是从W3规范链接的页面，因此它必须是真实的交易。

Switch to 300 results per page so you can see all the countries.

每页切换到300个结果，以便您可以查看所有国家/地区。

Open console. Write magical ES.OMGWhatNext code:

打开控制台。编写神奇的ES.OMGWhatNext代码：

Array.from($0.querySelectorAll('tr')).
  map(
    ({cells}) => 
      `<option value="${cells[2].innerText}">${cells[0].innerText}</option>`
  ).join('\n')

Wrap in select, done! Here's how it looks again.

包装select ，完成！这又是它的样子。

Similarly magical code give you JSON:

同样，神奇的代码为您提供JSON：

JSON.stringify(
  Array.from($0.querySelectorAll('tr')).map(
    ({cells}) => {return {[cells[2].innerText]: cells[0].innerText}}
  )
)

$ 0？ ($0?)

One thing to note is the $0 which means the table of results on the ISO page. $0 is what you get when you inspect something in the console and you highlight the inspected DOM node. Instead of $0 you can currently use document.querySelectorAll('table')[2] or document.getElementsByClassName('v-table-table')[0] but who knows how soon the HTML of the page will change.

要注意的一件事是$ 0，它表示ISO页上的结果表。当您在控制台中检查某些内容并突出显示所检查的DOM节点时，将获得$0 。您现在可以使用document.querySelectorAll('table')[2]或document.getElementsByClassName('v-table-table')[0]代替$ 0，但谁知道页面HTML会多久更改。

Tell your friends about this post on Facebook and Twitter

在Facebook和Twitter上告诉您的朋友有关此帖子的信息