Javascript 如何在Jquery中从json文件中搜索和检索数据？_Javascript_Jquery_Json

Javascript 如何在Jquery中从json文件中搜索和检索数据？

javascript jquery json

Javascript 如何在Jquery中从json文件中搜索和检索数据？,javascript,jquery,json,Javascript,Jquery,Json,我有一个包含以下数据的json文件 {"student1":[{"id":1,"name":"Test Data1","email":"test1@g.com"}]} {"student2":[{"id":2,"name":"Test Data2","email":"test2@g.com"}]} {"student3":[{"id":3,"name":"Test Data3","email":"test3@g.com"}]} {"student4":[{"id":4,"name":"Te

我有一个包含以下数据的json文件

{"student1":[{"id":1,"name":"Test Data1","email":"test1@g.com"}]}

{"student2":[{"id":2,"name":"Test Data2","email":"test2@g.com"}]}

{"student3":[{"id":3,"name":"Test Data3","email":"test3@g.com"}]}

{"student4":[{"id":4,"name":"Test Data4","email":"test4@g.com"}]}

我使用$.getJSON方法进行检索，但数据不会输出。我想用student3这样的键搜索数据，然后student3的数据必须输出。这是我的JQuery代码

$.getJSON( "test.json", function( data ) {
          var items = [];
          $.each( data, function( key, val ) {
            items.push( "<li id='" + key + "'>" + val + "</li>" );
          });

          $( "<ul/>", {
            "class": "my-new-list",
            html: items.join( "" )
          }).appendTo( "body" );
    });

$.getJSON（“test.json”），函数（数据）{
var项目=[]；
$。每个（数据、函数（键、值）{
items.push（“”+val+“”）；
});
$（“”{
“类”：“我的新列表”，
html:items.join（“”）
}).附于（“主体”）；
});

这是我的全部源代码

 <!DOCTYPE html>
 <html>
   <head>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
   <title>Test Json</title>
  </head>
  <body>
     <input type="text" name="name" id="name">
     <input type="text" name="email" id="email">
     <input type="button" name="submit" id="submit" value="Submit" onclick="submitForm()">
     <input type="button" name="edit" id="edit" value="Edit" onclick="Edit()">
     <br><br>
     <div></div>
 </body>

 <script type="text/javascript">
    function submitForm(){
    var name = $("#name").val();
    var email = $("#email").val();
    var obj = {
       table: []
    };
    obj.table.push({id: 1, name:name, email:email});
    var json = JSON.stringify(obj);
    $.ajax
    ({
        type: "GET",
        dataType : 'json',
        url: 'save_json.php',
        data: { data: json },
        success: function () {alert("Thanks!"); },
        failure: function() {alert("Error!");}
    });
    $("#name").val('');
    $("#email").val('');
}


  function Edit(){
    $.getJSON( "general.json", function( data ) {

          var items = [];
          $.each( data, function( key, val ) {
            items.push( "<li id='" + key + "'>" + val + "</li>" );
          });

          $( "<ul/>", {
            "class": "my-new-list",
            html: items.join( "" )
          }).appendTo( "body" );
    });
   }
 </script>
 </html>


测试Json



函数submitForm（）{
var name=$（“#name”）.val（）；
var email=$（“#email”）.val（）；
var obj={
表：[]
};
obj.table.push（{id:1，name:name，email:email}）；
var json=json.stringify（obj）；
$.ajax
({
键入：“获取”，
数据类型：“json”，
url:“save_json.php”，
数据：{data:json}，
成功：函数（）{alert（“谢谢！”；}，
失败：函数（）{alert（“Error！”；}
});
$（“#名称”）.val（“”）；
$（“#电子邮件”）.val（“”）；
}
函数编辑（）{
$.getJSON（“general.json”，函数（数据）{
var项目=[]；
$。每个（数据、函数（键、值）{
items.push（“”+val+“”）；
});
$（“”{
“类”：“我的新列表”，
html:items.join（“”）
}).附于（“主体”）；
});
}

请添加下面提到的代码

$(document).ready(function(){
     $.getJSON( "test.json", function(data) {
          var items = [];       

     $.each( data, function( key, val ) {
        $.each( val, function( key2, val2 ) {
          items.push( "<li id='" + key2 + "'>" +val2[0].name + "</li>" );
        });  
      });

          $( "<ul/>", {
            "class": "my-new-list",
            html: items.join( "" )
          }).appendTo( "body" );
    });
});

如果不起作用，请告诉我。

您可以尝试此代码/语法可能不正确

searchParam将是“Student3”

 $.getJSON( "test.json", function( data , searchParam ) {
              var items = [];
var filterObj =data[searchParam];
if(filterObj != undefined)
{
               var parsedData = Json.Parse(filterObj);
              $.each( parsedData , function( key, val ) {                
                items.push( "<li id='" + key + "'>" + val + "</li>" );
              });

              $( "<ul/>", {
                "class": "my-new-list",
                html: items.join( "" )
              }).appendTo( "body" );
        });
}

$.getJSON（“test.json”），函数（数据，searchParam）{
var项目=[]；
var filterObj=数据[searchParam]；
if（filterObj！=未定义）
{
var parsedData=Json.Parse（filterObj）；
$.each（parsedData，function（key，val）{
items.push（“”+val+“”）；
});
$（“”{
“类”：“我的新列表”，
html:items.join（“”）
}).附于（“主体”）；
});
}

该文件中包含的不是JSON，而是4个不同的对象。由于它的格式，您无法检索它。您需要将其转换为单个对象并使用

$.getScript（）

，或者将其更改为JSON并使用您当前的逻辑。您能用示例演示一下吗？我是诺布。拜托，这是工作，兄弟。谢谢但我的json数据添加格式与bro不同。我会告诉你代码。我更新了我上面的问题，兄弟。请指导我和帮助我。Json格式是我认为的主要问题，看我有更新我的代码。使用更新的$each循环并添加Edit（）函数。

 $.getJSON( "test.json", function( data , searchParam ) {
              var items = [];
var filterObj =data[searchParam];
if(filterObj != undefined)
{
               var parsedData = Json.Parse(filterObj);
              $.each( parsedData , function( key, val ) {                
                items.push( "<li id='" + key + "'>" + val + "</li>" );
              });

              $( "<ul/>", {
                "class": "my-new-list",
                html: items.join( "" )
              }).appendTo( "body" );
        });
}