在下拉元素中按字母顺序排序 API 结果（Javascript Only Please）

Question

我下面有两个下拉元素，其中填充了结果数组中的数据。

我只是想在下拉元素中按字母顺序对来自结果数组的每个选项进行排序。

还想提一下，在我的开发环境中，结果数据实际上来自 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>

Answer 1

这样试试

-在populateDropDown()之前添加排序功能即可。

-这将按 name 键值按升序对结果进行排序。

result = result.sort((a, b) => (a['name'] > b['name']) ? 1 : ((b['name'] > a['name']) ? -1 : 0));

-结果将如下所示

Answer 2

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>

Answer 3

对数组进行排序

SO - sort-array-of-objects-by-string-property-value

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>

在下拉元素中按字母顺序排序 API 结果（Javascript Only Please）

Sort API results alphabetically in dropdown element (Javascript Only Please)

javascript

arrays

sorting

dropdown