时间戳

首页 > 解决方案 > 按字母顺序对 JSON 响应对象进行排序

javascript - 按字母顺序对 JSON 响应对象进行排序

问题描述

只是尝试在 Javascript 中使用公共 API 进行一些练习。我想要做的是，当您提交查询时，让我返回的项目列表按h4值（食物名称）的字母顺序排序。我尝试.sort()在调用之前调用响应项.map()。尝试使用 jquery 在事后直接对 div 元素进行排序，但在这两种情况下，我都只是得到一个空白页。我对 javascript 非常陌生，并且全部用 Notepad++ 编写，所以可能有更好的方法来做这一切，但我不知道。

html代码：

<!DOCTYPE html>
<html>
<form action="search">
 <label>Search</label>
  <input type="text">
  <input type="submit">
  <input type="reset">
</form>

<div class="result">
 <h3>Result</h3>
</div>
</html>

CSS代码：

.result{
 display:flex;
 flex-wrap:wrap;
}
.item{
  min-width:200px;
  margin:20px auto;
}

JavaScript 代码：

 var apiKey = "4b314d3e9171fbe99c6cdf16127ba93e";
 var apiId = "4c143c55";
 var queryItem;
 var url = 'https://trackapi.nutritionix.com/v2/search/instant?query=';

 var form = document.querySelector('form');
 var input = document.querySelector('input[type="text"]');
 var result = document.querySelector('.result');

 function search(e){
  e.preventDefault();
  queryItem = input.value;
  makeRequest(queryItem);
  input.value= "";
 }

 function reset(){
  var node = document.querySelector('.result');
  while (node.firstChild) {
  node.removeChild(node.firstChild);
 }
 }

 function createFood(name, qty, unit, photo){
 var item = document.createElement('div');
 var foodName = document.createElement('h4');
 var serving = document.createElement('p');
 var img = document.createElement('img');

 item.classList.add('item');
 foodName.innerHTML = name;
 serving.innerHTML = qty+' '+unit;
 img.src = photo;

 result.appendChild(item);
 item.appendChild(img);
 item.appendChild(foodName);
 item.appendChild(serving)

 }

 function makeRequest(queryItem) {
 reset();
 xhr = new XMLHttpRequest();

 xhr.onload = function() {
 var response = JSON.parse(this.responseText);

 response.common.map(function(food){
  createFood(food.food_name,
             food.serving_qty,
             food.serving_unit,
             food.photo.thumb
            )
  })
};

xhr.open(
 "GET",
 url+queryItem,
 true
);
xhr.setRequestHeader('x-app-id',apiId);
xhr.setRequestHeader('x-app-key',apiKey);
xhr.send();
}

form.addEventListener('submit', search)
form.addEventListener('reset', reset)

标签： javascripthtmlcss

解决方案

您可以使用通用函数按您选择的属性进行排序。

function sortByAttrAlphabeticallyASC(arr, attr) {
    return arr.sort((a, b) =>
      a[attr].toLocaleLowerCase().localeCompare(b[attr].toLocaleLowerCase())
    );
}

arr您要排序的对象数组在哪里，并且attr是要比较的属性的名称。

如您所见，这里 Array有一个方法，您可以通过比较传递回调。

并且String有一种比较字符串的方法，如此处所示，女巫可以在内部传递Array::sort以进行比较。

在你的情况下，你会这样做：

sortByAttrAlphabeticallyASC(response.common, 'name').forEach(food => createFood(food.food_name,
    food.serving_qty,
    food.serving_unit,
    food.photo.thumb
))

推荐阅读