![](/img/trans.png)
[英]How to add dynamic dropdown list from a .json file using javascript?
[英]Fetch data from JSON file using javascript and insert it into a dropdown list
我有一個JSON文件,其中包含很多數據,例如:
[ {
"manufacturer": "Samsung",
"gadget": "Smart Phone",
"model": "Note 9"
},
{
"manufacturer": "Apple",
"gadget": "Smart Phone",
"model": "iPhone 5"
},
...]
我需要使用javascript提取此數據,然后將其發送到HTML文件中的select標記。
這就是我的HTML外觀,我也會包含js,但我不知道如何啟動或初始化JSON並將其發送到HTML。
<main>
<section id="welcome-section-shop">
<div id="welcome-header">
<h2>Web shop</h2>
</div>
</section>
<section class="shop-section">
<div id="shop-header">
<div id="shop-div">
<h1>Step 1: Select manufacturer</h1>
<hr id="shop-hr">
<select class="select-option" id="select" name="select">
<option value="">Select manufacturer</option>
</select>
<h1>Step 2: Select gadget type</h1>
<hr id="shop-hr">
<select class="select-option" id="select" name="select">
<option value="">Select gadget</option>
</select>
<h1>Step 3: Select model</h1>
<hr id="shop-hr">
<select class="select-option" id="select" name="select">
<option value="">Select model</option>
</select>
</div>
</div>
</section>
</main>
使用提取API加載您的json文件。
const handleAsJson = response => response.json();
const handleError = console.error // or some such;
fetch('/url/to/file.json')
.then(handleAsJson)
.catch(handleError);
我建議使用名為lit-html的輕量級模板庫來構造DOM。
<section id="welcome-section-shop">
<div id="welcome-header">
<h2>Web shop</h2>
</div>
</section>
<section class="shop-section">
<div id="shop-header">
<div id="shop-div">
<h1>Step 1: Select manufacturer</h1><hr id="shop-hr">
<select class="select-option" id="manufacturer-select" name="select">
<option value="">Select manufacturer</option>
</select>
<h1>Step 2: Select gadget type</h1><hr id="shop-hr">
<select class="select-option" id="gadget-select" name="select">
<option value="">Select gadget</option>
</select>
<h1>Step 3: Select model</h1><hr id="shop-hr">
<select class="select-option" id="model-select" name="select">
<option value="">Select model</option>
</select>
</div>
</div>
</section>
<script type="module">
import { render, html } from 'https://unpkg.com/lit-html/lit-html.js?module';
const manufacturerSelect = document.getElementById('manufacturer-select')
const modelSelect = document.getElementById('model-select')
const gadgetSelect = document.getElementById('gadget-select')
// converts array of items into more manageable object
const traverse = items => items.reduce((acc, { gadget, manufacturer, model }) => ({
gadgets: [...acc.gadgets, gadget],
manufacturers: [...acc.manufacturer, gadget],
models: [...acc.models, gadget],
}), {})
// defines the template for an option element with interpolated string attribute and content
const optionTpl = string => html`<option value="${string}">${string}</option>`;
// renders all option values to each select element
const renderTemplates = ({ gadget, manufacturer, model }) => {
render(html`<option value="">Select manufacturer</option>${manufacturer.map(optionTpl)}`, manufacturerSelect)
render(html`<option value="">Select model</option>${model.map(optionTpl)}`, modelSelect)
render(html`<option value="">Select gadget</option>${gadget.map(optionTpl)}`, gadgetSelect)
}
const handleAsJson = response => response.json();
const handleError = console.error // or some such;
fetch('/url/to/file.json')
.then(handleAsJson)
.then(traverse)
.then(renderTemplates)
.catch(handleError);
</script>
您可能還考慮為下拉菜單定義一個自定義元素,該元素將使用占位符屬性來定義該字符串,並將字符串選項數組作為屬性。 請注意,盡管目前,您還必須使用javascript訪問select的值,因為Form Participation API尚未准備好。
<section id="welcome-section-shop">
<div id="welcome-header">
<h2>Web shop</h2>
</div>
</section>
<section class="shop-section">
<div id="shop-header">
<div id="shop-div"></div>
</div>
</section>
<script type="module">
import { render } from 'https://unpkg.com/lit-html/lit-html.js?module';
import { LitElement, html, css } from 'https://unpkg.com/lit-element/lit-element.js?module';
const traverse = items => items.reduce(({gadgets = [], manufacturers = [], models = []}, { gadget, manufacturer, model }) => ({
gadgets: [...gadgets, gadget],
manufacturers: [...manufacturer, manufacturer],
models: [...models, model],
}), {})
const optionTpl = string => html`<option value="${string}">${string}</option>`;
customElements.define('shop-dropdown', class extends LitElement {
static get properties() {
return {
placeholder: { type: String },
items: { type: Array },
};
}
static get styles() {
return css`
:host {
display: block;
}
select {
/*...*/
}
`
}
get value() {
return (
this.shadowRoot &&
this.shadowRoot.querySelector('select') &&
this.shadowRoot.querySelector('select').value
);
}
render() {
return html`
<select>
<option>${this.placeholder}</option>
${this.items.map(optionTpl)}
</select>
`
}
});
const handleAsJson = response => response.json();
const handleError = console.error // or some such;
const renderTemplates = ({ gadgets, models, manufacturers }) => render(html`
<h1>Step 1: Select manufacturer</h1>
<hr/>
<shop-select placeholder="Select manufacturer" .items=${manufacturers}></shop-select>
<h1>Step 2: Select gadget type</h1>
<hr/>
<shop-select placeholder="Select gadget" .items=${gadgets}></shop-select>
<h1>Step 3: Select model</h1>
<hr/>
<shop-select placeholder="Select model" .items=${models}></shop-select>
`, document.getElementById('shop-div'))
fetch('/url/to/file.json')
.then(handleAsJson)
.then(traverse)
.then(renderTemplates)
.catch(handleError);
</script>
為您的代碼
<section id="welcome-section-shop">
<div id="welcome-header">
<h2>Web shop</h2>
</div>
</section>
<section class="shop-section">
<div id="shop-header">
<div id="shop-div">
<h1>Step 1: Select manufacturer</h1><hr id="shop-hr">
<select class="select-option" id="select1" name="select">
<option value="">Select manufacturer</option>
</select>
<h1>Step 2: Select gadget type</h1><hr id="shop-hr">
<select class="select-option" id="select2" name="select">
<option value="">Select gadget</option>
</select>
<h1>Step 3: Select model</h1><hr id="shop-hr">
<select class="select-option" id="select3" name="select">
<option value="">Select model</option>
</select>
</div>
</div>
</section>
<script>
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var data = xhttp.responseJSON;
for(var i in data){
var option1 = document.createElement('option');
var option2 = document.createElement('option');
var option3 = document.createElement('option');
option1.text = data[i]["manufacturer"];
option2.text = data[i]["gadget"];
option3.text = data[i]["model"];
document.getElementById('select1').appendChild(option1);
document.getElementById('select2').appendChild(option2);
document.getElementById('select3').appendChild(option3);
}
}
};
xhttp.open("GET", "filename", true);
xhttp.send();
</script>
您可以使用XMLHttpRequest對象發送AJAX請求,並且從服務器獲取數據后,可以使用遍歷JSON數據的方式將選項附加到select元素。
的HTML
<select id="abc">
</select>
JS
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var data = xhttp.responseJSON;
for(var i in data){
var op = document.createElement('option');
op.text=data[i].text;
op.value=data[i].value;
document.getElementById('abc').appendChild(op);
}
}
};
xhttp.open("GET", "filename", true);
xhttp.send();
您的數據將像[{"text":"abc","value":"abc"},{.......]
HTML:
<h1>Step 1: Select manufacturer</h1><hr id="shop-hr">
<select class="select-option" id="select-manufacturer" name="manufacturer">
<option id="manufacturer-placeholder" value="">Select manufacturer</option>
</select>
<h1>Step 2: Select gadget type</h1><hr id="shop-hr">
<select class="select-option" id="select-gadget" name="gadget" disabled>
<option id="gadget-placeholder" value="">Select gadget</option>
</select>
<h1>Step 3: Select model</h1><hr id="shop-hr">
<select class="select-option" id="select-model" name="model" disabled>
<option id="model-placeholder" value="">Select model</option>
</select>
通過以下方式格式化數據:
{
"Samsung": {
"Smart Phone": [ "Note 9", ],
// ...
},
"Apple": {
"Smart Phone: [ "iPhone 5", /* ... */ ],
// ...
},
// ...
}
腳本
const xhr = new XMLHttpRequest()
const url = 'path/to/file.json'
xhr.onreadystatechange = function() {
if ((this.readyState == 4) && (this.status == 200)) {
const array = JSON.parse(this.responseText)
const formatted = formatData(array)
start(formatted)
}
}
function formatData(array) {
const res = {}
for (let item of array) {
const gadgets = res[item.manufacturer] || (res[item.manufacturer] = {})
const models = gadgets[item.gadget] || (gadgets[item.gadget] = [])
models.push(item.model)
}
return res
}
function start(data) {
const selectManufacturer = document.getElementById('select-manufacturer')
const selectGadget = document.getElementById('select-gadget')
const selectModel = document.getElementById('select-model')
for (let manufacturer in data) {
selectManufacturer.appendChild(createOption(manufacturer))
}
let gadgets
selectManufacturer.addEventListener('change', () => {
gadgets = data[selectManufacturer.value]
selectGadget.innerHTML = ''
selectGadget.appendChild(placeholderOption('gadget'))
for (let gadget in gadgets) {
selectGadget.appendChild(createOption(gadget))
}
selectGadget.disabled = false
selectModel.innerHTML = ''
selectModel.appendChild(placeholderOption('model'))
selectModel.disabled = true
const placeholder = document.getElementById('manufacturer-placeholder')
if (placeholder) selectManufacturer.removeChild(placeholder)
})
selectGadget.addEventListener('change', () => {
const models = gadgets[selectGadget.value]
selectModel.innerHTML = ''
selectModel.appendChild(placeholderOption('model'))
for (let model of models) {
selectModel.appendChild(createOption(model))
}
selectModel.disabled = false
const placeholder = document.getElementById('gadget-placeholder')
if (placeholder) selectGadget.removeChild(placeholder)
})
selectModel.addEventListener('change', () => {
const placeholder = document.getElementById('gadget-placeholder')
if (placeholder) selectModel.removeChild(placeholder)
})
}
function createOption(value, text) {
if (text == undefined) text = value
let opt = document.createElement('option')
opt.value = value
opt.innerHTML = text
return opt
}
function placeholderOption(type) {
let opt = createOption('', `Select ${type}`)
opt.id = `${type}-placeholder`
return opt
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.