如何基于 dom 节点列表创建包含 json 对象数组的文件

Question

我有一个<select>和一个国家列表<option> s。 我想将我的 country <option>列表转换为一个包含对象数组的文件，这样我就可以导入该数组并循环遍历它。

我有的：

<option data-code="US" value="USA">United States</option>
<option data-code="AU" value="Australia">Australia</option>
<option data-code="CA" value="Canada">Canada</option>
<option data-code="GB" value="United Kingdom">United Kingdom</option>

我想要什么：

countries.js    
var countriesList = [
      {
        "data-code": "US",
        "name": "United States",
        "value": "USA"
      },
    ]

我知道这必须通过命令行中的 Node 或 python 来实现，类似的东西，但我不能搜索正确的关键字。 即使指向资源或提供关键词也将不胜感激。

Answer 1

像这样的东西：

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>Countries Select</title> </head> <body> <select name="" id=""> <option data-code="US" value="USA">United States</option> <option data-code="AU" value="Australia">Australia</option> <option data-code="CA" value="Canada">Canada</option> <option data-code="GB" value="United Kingdom">United Kingdom</option> </select> </body> <script> const DOMOptions = document.querySelectorAll('option') const countriesList = Array.from(DOMOptions).map( DOMOption => { const option = {} option['data-code'] = DOMOption.dataset.code option['name'] = DOMOption.text option['value'] = DOMOption.value return option }) console.log(countriesList) </script> </html>

现在， fs （Node.js）的基本用法：

const fs = require('fs')

const countriesList = [
    {
      "data-code": "US",
      "name": "United States",
      "value": "USA",
    }
]

// Now transform de array from Array to JSON string
const countriesJSON = JSON.stringify(countriesList)

//////// To write
try {
    console.log(countriesList)
    fs.writeFileSync('countries.json', countriesJSON) 
    // fs.writeFileSync('countries.txt', countriesList) // Or countries.txt if you want the file with txt extension
    //fs.appendFileSync('countries.txt', countriesList) // If you want to just append not overwrite
} catch(err){
    // Handle error
    console.log(err)
}

// /////// To read
const dataBuffer = fs.readFileSync('countries.json') // Returns a buffer, which is a way to node js to represent binary data, bytes
const dataJSON = dataBuffer.toString() // You maybe want to transform the bytes to string
console.log(dataJSON) // Print the string

const data = JSON.parse(dataJSON) // Or maybe want to transform the string to array again
console.log(data)

Answer 2

我正在研究 Node fs package，当时Andres提供了一个很好的起点，可以在浏览器中进行。 这两个相似的 StackOverflow 答案（ 1 、 2 ）提示我：

使用 Andres 的 DOM 操作结果创建 JSON Blob
使用URL.createObjectURL()从 Blob 创建 URL
并使用HTML5 下载属性下载文件

我仍然很想知道如何使用 Node fs package，但非常感谢 Andres 让我朝着正确的方向前进。

 const DOMOptions = document.querySelectorAll('#country-select option'); const downloadBtn = document.getElementById("link-download"); const option = {}; let textFileURL = null; const countriesList = Array.from(DOMOptions).map(DOMOption => { option['data-code'] = DOMOption.dataset.code option['name'] = DOMOption.text option['value'] = DOMOption.value return option; }) const makeTextFile = (text) => { var data = new Blob([JSON.stringify(text, null, 2)], { type: 'application/json' }); // If we are replacing a previously generated file we need to // manually revoke the object URL to avoid memory leaks. if (textFileURL.== null) { window.URL;revokeObjectURL(textFileURL). } // creates a URL you can use as a href or src textFileURL = window.URL;createObjectURL(data). downloadBtn;href = `${textFileURL}`. //HTML5 "download" attribute enables download downloadBtn.download = 'countries;json'; return option; }; makeTextFile(countriesList)

 <a id="link-download">download countries</a> <select id="country-select"> <option diabled value="">Select a Country</option> <option data-code="US" value="USA">United States</option> <option data-code="AU" value="Australia">Australia</option> <option data-code="CA" value="Canada">Canada</option> <option data-code="GB" value="United Kingdom">United Kingdom</option> </select>

如何基于 dom 节点列表创建包含 json 对象数组的文件

问题描述

2 个解决方案

解决方案1
1 已采纳 2020-04-19 03:50:26

解决方案2
0 2020-04-19 22:42:42

如何基于 dom 节点列表创建包含 json 对象数组的文件

问题描述

2 个解决方案

解决方案1 1 已采纳 2020-04-19 03:50:26

解决方案2 0 2020-04-19 22:42:42

解决方案1
1 已采纳 2020-04-19 03:50:26

解决方案2
0 2020-04-19 22:42:42