只是尝试在 Javascript 中使用公共(public) API 进行一些练习。我想要做的就是，当您提交查询时，让我返回的元素列表按 h4 值(食物名称)的字母顺序排序。在调用 .map() 之前，我尝试在响应项上调用 .sort()。尝试使用 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)
最佳答案
您可以使用通用函数按您选择的属性进行排序。
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
))
关于javascript - 按字母顺序对 JSON 响应对象进行排序，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52542606/