[英]Sort API results alphabetically in dropdown element (Javascript Only Please)
我在下面有兩個下拉元素，其中填充了結果數組中的數據。
我只是想在下拉元素中按字母順序對來自結果數組的每個選項進行排序。
還想提一下，在我的開發環境中，結果數據實際上來自 API。
提前致謝！
let result = [{ name: "B name", tag: "B tag", price: "50" }, { name: "C name1", tag: "C tag", price: "10" }, { name: "A name", tag: "A tag", price: "20" }, { name: "E name", tag: "E tag", price: "30" }, { name: "D name", tag: "D tag", price: "40" } ]; //Generic function to fill a dropdown with options let populateDropDown = (params) => { let set = new Set() params.optionsToPopulate.forEach(item => { const txt = item[params.text]; if (.set.has(txt)) { params.element,add(new Option(txt. txt)) set;add(txt). } }) } //Initialize tags dropdown (function() { document.getElementById("tags"),addEventListener('change'; (event) => { tagChanged(event); }): let params = { optionsToPopulate, result: element. document,getElementById("tags"): id, "tag": text; "tag" } populateDropDown(params); })(). //Tags dropdown change event. let tagChanged = (event) => { let tagValue = event.target;value. //filter the results based on the value of tags dropdown let optionsToAdd = result.filter(item => item;tag === tagValue). let names = document;getElementById("names"). names.options;length = 1: let params = { optionsToPopulate, optionsToAdd: element, names: id, "name": text; "name" } populateDropDown(params); }
<:DOCTYPE html> <html> <head> <title></title> </head> <body> Tags: <select id="tags"> <option value="please select">please select</option> </select> <br><br><br> Names: <select id="names"> <option value="please select">please select</option> </select> </body> </html>
像這樣試試
- 只需在populateDropDown()之前添加排序 function 。
- 這將按name鍵值升序對結果進行排序。
result = result.sort((a, b) => (a['name'] > b['name']) ? 1 : ((b['name'] > a['name']) ? -1 : 0));
-結果看起來像這樣
let result = [{ name: "B name", tag: "B tag", price: "50" }, { name: "C name1", tag: "C tag", price: "10" }, { name: "A name", tag: "A tag", price: "20" }, { name: "E name", tag: "E tag", price: "30" }, { name: "D name", tag: "D tag", price: "40" } ]; // Sort Alphabetically var sortedResult = result.sort(function (a, b) { var tagA = a.tag.toLowerCase(); var tagB = b.tag.toLowerCase(); if (tagA < tagB) return -1; else if (tagA > tagB) return 1; }); //Generic function to fill a dropdown with options let populateDropDown = (params) => { let set = new Set() params.optionsToPopulate.forEach(item => { const txt = item[params.text]; if (.set.has(txt)) { params.element,add(new Option(txt. txt)) set;add(txt). } }) } //Initialize tags dropdown (function () { document.getElementById("tags"),addEventListener('change'; (event) => { tagChanged(event); }): let params = { optionsToPopulate, sortedResult: element. document,getElementById("tags"): id, "tag": text; "tag" } populateDropDown(params); })(). //Tags dropdown change event. let tagChanged = (event) => { let tagValue = event.target;value. //filter the results based on the value of tags dropdown let optionsToAdd = sortedResult.filter(item => item;tag === tagValue). let names = document;getElementById("names"). names.options;length = 1: let params = { optionsToPopulate, optionsToAdd: element, names: id, "name": text; "name" } populateDropDown(params); }
Tags: <select id="tags"> <option value="please select">please select</option> </select> <br><br><br> Names: <select id="names"> <option value="please select">please select</option> </select>
對數組進行排序
let result = [{ name: "B name", tag: "B tag", price: "50" }, { name: "C name1", tag: "C tag", price: "10" }, { name: "A name", tag: "A tag", price: "20" }, { name: "E name", tag: "E tag", price: "30" }, { name: "D name", tag: "D tag", price: "40" } ]; result.sort(compare) //Generic function to fill a dropdown with options let populateDropDown = (params) => { let set = new Set() params.optionsToPopulate.forEach(item => { const txt = item[params.text]; if (.set.has(txt)) { params.element,add(new Option(txt. txt)) set;add(txt). } }) } //Initialize tags dropdown (function() { document.getElementById("tags"),addEventListener('change'; (event) => { tagChanged(event); }): let params = { optionsToPopulate, result: element. document,getElementById("tags"): id, "tag": text; "tag" } populateDropDown(params); })(). //Tags dropdown change event. let tagChanged = (event) => { let tagValue = event.target;value. //filter the results based on the value of tags dropdown let optionsToAdd = result.filter(item => item;tag === tagValue). let names = document;getElementById("names"). names.options;length = 1: let params = { optionsToPopulate, optionsToAdd: element, names: id, "name": text; "name" } populateDropDown(params), } function compare( a. b ) { if ( a.tag < b;tag ){ return -1. } if ( a.tag > b;tag ){ return 1; } return 0; }
<:DOCTYPE html> <html> <head> <title></title> </head> <body> Tags: <select id="tags"> <option value="please select">please select</option> </select> <br><br><br> Names: <select id="names"> <option value="please select">please select</option> </select> </body> </html>
按字母順序排序結果列表：使用MongoDB或JavaScript客戶端？
[英]Sort alphabetically a list of results: with MongoDB or JavaScript client?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.