2017-06-16 52 views
0

我有一个json文件,下面的数据。如何在jquery中从json文件中搜索和检索数据?

{"student1":[{"id":1,"name":"Test Data1","email":"[email protected]"}]} 

{"student2":[{"id":2,"name":"Test Data2","email":"[email protected]"}]} 

{"student3":[{"id":3,"name":"Test Data3","email":"[email protected]"}]} 

{"student4":[{"id":4,"name":"Test Data4","email":"[email protected]"}]} 

而我使用$ .getJSON方法检索,但数据不会输出。而且我想用像student3那样的Key来搜索数据,那么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"); 
    }); 

这是我的完整源代码。

<!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> 
+0

你必须在该文件的不是JSON,它是4个不同的对象。由于它的格式,你无法检索它。您需要将其转换为单个对象并使用'。.getScript()',或将其更改为JSON并使用您当前的逻辑。 –

+0

你能带我看样品吗?我是小白。请... –

回答

0

请在下面添加代码。

$(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"); 
    }); 
}); 

也删除student1,STUDENT2并使用唯一的学生,并使用键找到值 。

您的json数据将如下所示。

[{"student":[{"id":1,"name":"Shyam","email":"[email protected]"}]}, 
{"student":[{"id":1,"name":"Niraj","email":"[email protected]"}]}, 
{"student":[{"id":1,"name":"Mehul","email":"[email protected]"}]}, 
{"student":[{"id":1,"name":"Ritesh","email":"[email protected]"}]}] 

让我知道它是否无效。

+0

这是工作兄弟。谢谢 。但我的JSON数据添加格式不像那个兄弟。我会告诉你代码。 –

+0

Ohk兄向我展示代码,以便我可以正确理解。 –

+0

我上面更新了我的问题兄弟。请指导我并帮助我。 –

0

你可以试试这个代码/语法可能不正确....

searchParam是“学生三” ..

$.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"); 
     }); 
}