我有一个包含 50,000个用户详细信息的json文件。我需要使用用户 id 显示用户详细信息,例如姓名,手机和地址。使用以下代码成功完成了此操作:成功 ,但但是,获取数据并在html页面上显示需要太多时间(超过15秒)
所以,请帮助我减少从json文件获取数据的时间。
html代码是
<input type="text" id="search">
<input type="submit" id="submit">
我有以下详细信息的json文件(convertcsv.json)
[
{
"id": 22313,
"Name": "BABU",
"Address": "Hyderabad"
},
{
"id": 21314,
"Name": "Raju",
"Address": "BENGALURU"
}
]
实际的JQuery脚本是
<script>
$('#submit').on('click', function(){
var searchField = $('#search').val();
var regex = new RegExp(searchField, "i");
var output = '<div class="row">';
var count =0;
$.getJSON('convertcsv.json', function(data) {
$.each(data, function(key, val){
if (val.id==searchField ) {
output += '<div class="dataContain">';
output += '<p><span style="font-weight:bold;"> id: </span>'+val.id+ '</p>';
output += '<p><span style="font-weight:bold;"> Name: </span>'+val.Name + '</p>';
output+='<p><span style="font-weight:bold;">Address: </span><span class="status">' + val.Address+'<span class="circle"></span></span></p>';
output += '</div>';
count++;
}
});
/// alert(count);
if(count==0){
output += 'No Records Found'
}
//alert(output)
output += '</div>';
//$('#results').toggle();
$('#results').html(output);
});
});
然后结果显示在标签中
<div id="results"> Result Displayed here, i need to improve time, please help me, thanks in advance</div>
谢谢。
答案 0 :(得分:2)
var json = [
{
"id": 22313,
"Name": "BABU",
"Address": "Hyderabad"
},
{
"id": 21314,
"Name": "Raju",
"Address": "BENGALURU"
}
]
console.log(json.filter(x=> x.id == '22313'))
加载您的JSON文件,然后像上面的示例一样进行过滤,然后从生成的JSON数组创建HTML。
编辑1
$.getJSON('convertcsv.json', function(data) {
// filter results given searchField then loop through from resulted JSON array
// filter returns an array
let result = data.filter(x=> x.id == searchField);
$.each(result, function(key, val){
output += '<div class="dataContain">';
output += '<p><span style="font-weight:bold;"> id: </span>'+val.id+ '</p>';
output += '<p><span style="font-weight:bold;"> Name: </span>'+val.Name + '</p>';
output+='<p><span style="font-weight:bold;">Address: </span><span class="status">' + val.Address+'<span class="circle"></span></span></p>';
output += '</div>';
count++;
});
});
编辑2
在文档准备就绪时加载JSON并将其存储到变量中。
var jsonUsers;
$(document).ready(function () {
$.getJSON('convertcsv.json', function(data) {
jsonUsers = data;
});
});
现在,当点击按钮时,从jsonUsers
过滤结果
答案 1 :(得分:0)
非常感谢 @Ali Shahbaz,最终答案是
。var jsonUsers;
$(document).ready(function () {
$.getJSON('convertcsv.json', function(data) {
jsonUsers = data;
});
});
// filter results given searchField then loop through from resulted JSON array
// filter returns an array
let result = jsonUsers.filter(x=> x.id == searchField);
$.each(result, function(key, val){
output += '<div class="dataContain">';
output += '<p><span style="font-weight:bold;"> id: </span>'+val.id+ '</p>';
output += '<p><span style="font-weight:bold;"> Name: </span>'+val.Name + '</p>';
output+='<p><span style="font-weight:bold;">Address: </span><span class="status">' + val.Address+'<span class="circle"></span></span></p>';
output += '</div>';
count++;
});
现在,它运行良好,而不会浪费加载时间。