2012-08-22 42 views
25

Tôi có tệp json mydata.json và trong tệp này là một số dữ liệu được mã hóa bằng json.cách sử dụng tệp json trong mã html

Tôi muốn lấy dữ liệu này trong tệp index.html và xử lý dữ liệu này trong JavaScript. Nhưng không biết làm thế nào để tập tin connect.json trong tập tin .html?

Hãy cho tôi biết. Đây là json tôi file:

{ 
    "items": [ 
     { 
      "movieID": "65086", 
      "title": "The Woman in Black", 
      "poster": "/kArMj2qsOnpxBCpSa3RQ0XemUiX.jpg" 
     }, 
     { 
      "movieID": "76726", 
      "title": "Chronicle", 
      "poster": "/853mMoSc5d6CH8uAV9Yq0iHfjor.jpg" 
     } 
    ] 
} 

Nghĩ rằng tôi nhận được tệp json từ máy chủ, làm thế nào để sử dụng tập tin đó trong html của tôi, để tôi có thể hiển thị dữ liệu trong bảng trong trang html. Tôi đang sử dụng JavaScript để phân tích cú pháp tệp json. Tôi mới vào lĩnh vực này. Giúp đỡ xin vui lòng.

+2

Hi, bạn có thể cân nhắc việc thêm chi tiết hơn cho câu hỏi của bạn. Bạn có đang sử dụng bất kỳ khung JavaScript nào không? (tức là: jQuery) Bạn đã thử gì rồi? Kết quả cuối cùng mong muốn là gì? Một câu hỏi hay với mục tiêu rõ ràng sẽ giúp nhận được câu trả lời hay và ví dụ từ cộng đồng! Sử dụng liên kết 'chỉnh sửa' bên dưới câu hỏi của bạn để sửa đổi nó. – BenSwayne

+0

hãy xem liên kết cũng cung cấp các ví dụ cũng http://api.jquery.com/jQuery.getJSON/ –

+0

tôi không thể lấy ví dụ .. hãy xây dựng nó ... – saikiran

Trả lời

32
<html> 
<head> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> </script> 

<script> 

    $(function() { 


    var people = []; 

    $.getJSON('people.json', function(data) { 
     $.each(data.person, function(i, f) { 
      var tblRow = "<tr>" + "<td>" + f.firstName + "</td>" + 
      "<td>" + f.lastName + "</td>" + "<td>" + f.job + "</td>" + "<td>" + f.roll + "</td>" + "</tr>" 
      $(tblRow).appendTo("#userdata tbody"); 
    }); 

    }); 

}); 
</script> 
</head> 

<body> 

<div class="wrapper"> 
<div class="profile"> 
    <table id= "userdata" border="2"> 
    <thead> 
      <th>First Name</th> 
      <th>Last Name</th> 
      <th>Email Address</th> 
      <th>City</th> 
     </thead> 
     <tbody> 

     </tbody> 
    </table> 

</div> 
</div> 

</body> 
</html> 

tệp json tôi

{ 
    "person": [ 
     { 
      "firstName": "Clark", 
      "lastName": "Kent", 
      "job": "Reporter", 
      "roll": 20 
     }, 
     { 
      "firstName": "Bruce", 
      "lastName": "Wayne", 
      "job": "Playboy", 
      "roll": 30 
     }, 
     { 
      "firstName": "Peter", 
      "lastName": "Parker", 
      "job": "Photographer", 
      "roll": 40 
     } 
    ] 
} 

tôi đã succeded trong integratig tệp json html bảng sau khi làm việc một ngày trên đó !!!

+1

nếu đó là tệp json cục bộ thì sao? –

+0

people.json chỉ là json địa phương. cung cấp url tuyệt đối của json cục bộ của bạn tới $ .getJSON – saikiran

15

sử dụng jQuery $.getJSON

$.getJSON('mydata.json', function(data) { 
    //do stuff with your data here 
}); 
+1

cách liên kết jquery trong tập tin html của tôi .. xin hãy giúp tôi! tôi muốn mã đầy đủ. tôi muốn hiển thị dữ liệu của tôi trong một bảng trong trang html của tôi. đưa ra một mã mẫu. vì vậy tôi có thể hiểu dễ dàng. Cám ơn bạn với dự đoán. – saikiran

+0

cảm ơn bạn tôi đã nhận được câu trả lời ... – saikiran

4

Bạn có thể sử dụng JavaScript như ... Chỉ cần cho con đường đúng đắn của tệp json của bạn ...

<!doctype html> 
<html> 
    <head> 
     <script type="text/javascript" src="abc.json"></script> 
      <script type="text/javascript" > 
       function load() { 
        var mydata = JSON.parse(data); 
        alert(mydata.length); 

        var div = document.getElementById('data'); 

        for(var i = 0;i < mydata.length; i++) 
        { 
         div.innerHTML = div.innerHTML + "<p class='inner' id="+i+">"+ mydata[i].name +"</p>" + "<br>"; 
        } 
       } 
     </script> 
    </head> 
    <body onload="load()"> 
    <div id= "data"> 

    </div> 
    </body> 
</html> 

Đơn giản chỉ cần nhận dữ liệu và phụ thêm nó vào một div ... Ban đầu in chiều dài trong cảnh báo.

Đây là tập tin Json tôi: abc.json

data = '[{"name" : "Riyaz"},{"name" : "Javed"},{"name" : "Arun"},{"name" : "Sunil"},{"name" : "Rahul"},{"name" : "Anita"}]'; 
+3

rằng abc.json không phải là tệp json hợp lệ, javascript thực tế của nó, vì vậy, ở đây bạn chỉ cần gọi một tệp javascript là "abc.json" và tải nó ... –

+0

Nếu bạn muốn tải một mảng vào một biến JavaScript từ "JSON" này, bạn chỉ có thể loại bỏ các dấu nháy đơn bên ngoài. Trong trường hợp này 'dữ liệu' sẽ là một mảng chứa các đối tượng có thuộc tính' name'. Không cần cho 'JSON.parse()' trong trường hợp này. –

Các vấn đề liên quan