gpt4 book ai didi

javascript - 使用 JQuery 从 json 文件中通过键或 id 获取精确值

转载 作者:行者123 更新时间:2023-11-30 14:16:27 25 4
gpt4 key购买 nike

我有一个包含 50,000 用户详细信息 的 json 文件。我需要使用用户 id 显示用户详细信息,例如 name 、 mobile 和 address 。我用下面的代码完成了这个成功但是,获取数据并显示在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> 

谢谢。

最佳答案

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

的结果

关于javascript - 使用 JQuery 从 json 文件中通过键或 id 获取精确值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53499479/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com