Как создать файл с массивом объектов json на основе списка узлов dom - PullRequest
Новая
       6

Как создать файл с массивом объектов json на основе списка узлов dom

0 голосов
/ 18 апреля 2020

У меня есть <select> со списком стран <option> с. Я хочу превратить свой список стран <option> в файл с массивом объектов, чтобы я мог импортировать массив и l oop через него.

Что у меня есть: 

<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, что-то похожее, но я не должен искать правильные ключевые слова. Буду признателен даже за указание на ресурс или предоставление ключевых слов.

Ответы [ 2 ]

1 голос
/ 19 апреля 2020

Примерно так: 

<!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>

Теперь, базовое c использование 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)
0 голосов
/ 20 апреля 2020

Я исследовал пакет Node fs , когда Andres предоставил отличную отправную точку для этого в браузере. Эти два похожих ответа StackOverflow ( 1 , 2 ) побудили меня:

  • создать JSON Blob с результатом манипуляции Andres DOM
  • создать URL-адрес из BLOB-объекта с помощью URL.createObjectURL ()
  • и использовать для загрузки атрибут HTML5 download файл

Мне все еще интересно выяснить, как использовать пакет Node fs, но большое спасибо Андресу за то, что он направил меня в правильном направлении. 

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>
...