Question

只是尝试获得一些使用Javascript公共API的实践。我要做的就是，当您提交查询时，让我返回的项目列表按h4值（食品名称）按字母顺序排序。在致电.sort()之前，我尝试在响应项上致电.map()。尝试在使用事实后直接对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)

Answer 1

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

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

arr是要排序的对象数组，attr是要比较的属性的名称。

您可以看到here Array的方法可以传递带有比较的回调。

String有一种比较字符串的方法，如here巫婆可以在Array::sort内部传递以进行比较。

您可以这样做：

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

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

1 个答案: