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

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上告诉您的朋友有关此帖子的信息

翻译自: https://www.phpied.com/list-of-all-the-countries-html-select-and-json-too/

select json