我正在尝试附加搜索外部 .json 的结果
我在这里附加了一个内部 javascript 数组的搜索结果。 (在 lodash 的帮助下)
$(document).ready(function () {
$('#dynam-now').click(function () {
let searchString = $('#dynamId').val();
let result = _.filter(fruitChoices, function(object) {
return object.fruit.toLowerCase().indexOf(searchString.toLowerCase()) != -1;
});
$('#ArrayD').html("");
for (var i = 0; i < result.length; i++) {
$('#ArrayD').append(result[i].fruitname + " " + result[i].size + " " + result[i].color + "<br>")
};
});
});
var fruitChoices = [{
"fruit": "apple",
"fruitname" : "Apple",
"size": "Large",
"color": "Red"
},
{
"fruit": "banana",
"fruitname" : "Banana",
"size": "Large",
"color": "Yellow"
},
{
"fruit": "orange",
"fruitname" : "Orange",
"size": "Large",
"color": "Orange"
},
{
"fruit": "strawberry",
"fruitname" : "Strawberry",
"size": "Small",
"color": "Red"
}];#ArrayD {
margin-top:25%;
font-size: 18px;
font-family: sans-serif;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
!DOCTYPE html>
<html>
<head>
<title>
Apple
</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://aaronlilly.github.io/CDN/css/bootstrap.min.css">
<!-- Bootstrap JS -->
<script src="https://aaronlilly.github.io/CDN/js/bootstrap.min.js"></script>
<!-- Lodash -->
<script src="https://aaronlilly.github.io/CDN/js/lodash.min.js"></script>
</head>
<body>
<br>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<input type="text" id="dynamId" size="37" placeholder="Search Field" style="margin-left: 50px;margin-top: 10px;padding-bottom: 5px;padding-top: 4px;">
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<button class="btn btn-info my-2 my-sm-0" caption="search" id="dynam-now"> Search</button>
</div>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div id="ArrayD"> </div>我 future 的外部 .json 托管在这里 - https://aaronlilly.github.io/ApiExample/Apple4/apple4.json
但是写成-
{
"results":
[
{
"fruit": "apple",
"fruitname" : "Apple",
"size": "Large",
"color": "Red"
},
{
"fruit": "banana",
"fruitname" : "Banana",
"size": "Large",
"color": "Yellow"
},
{
"fruit": "orange",
"fruitname" : "Orange",
"size": "Large",
"color": "Orange"
},
{
"fruit": "strawberry",
"fruitname" : "Strawberry",
"size": "Small",
"color": "Red"
}
]
}
我想附加过滤后的搜索结果。 我试过了
$(document).ready(function ()
{
$.ajax
({
method: "GET",
url: " https://aaronlilly.github.io/ApiExample/Apple4/apple4.json"
}).done(function(data)
{$(document).ready(function () {
$('#dynam-now').click(function () {
let searchString = $('#dynamId').val();
let result = _.filter(data, function(object) {
return object.result.toLowerCase().indexOf(searchString.toLowerCase()) != -1;
});
console.log(results.fruit)
$('#ArrayD').html("");
for (var i = 0; i < result.length; i++) {
$('#ArrayD').append(result[i].fruitname + " " + results.result[i].size + " " + result[i].color + "<br>")
};
});
});
console.log(data)
});
});
并得到诸如 - Cannot read property 'toLowerCase' of undefined 之类的错误
我试图纠正这个问题，但运气不佳。任何帮助将不胜感激。
最佳答案
我认为您的 filter 函数有问题。应该改为:
let result = _.filter(data.results, function(object) {
// object = { fruit: 'orange', fruitname: 'ora'...}
return object.fruitname.toLowerCase().indexOf(searchString.toLowerCase()) !== -1;
});
result 将是一组匹配的水果。
关于javascript - 附加外部 .json 的搜索结果，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56069384/