Hướng dẫn read json file in html - đọc tệp json trong html

68

Mới! Lưu câu hỏi hoặc câu trả lời và sắp xếp nội dung yêu thích của bạn. Tìm hiểu thêm.
Learn more.

Tôi có tệp JSON



 



    $[function[] {


   var people = [];

   $.getJSON['people.json', function[data] {
       $.each[data.person, function[i, f] {
          var tblRow = "" + "" + f.firstName + "" +
           "" + f.lastName + "" + "" + f.job + "" + "" + f.roll + "" + ""
           $[tblRow].appendTo["#userdata tbody"];
     }];

   }];

}];





First Name Last Name Email Address City
0 và trong tệp này là một số dữ liệu được mã hóa JSON.

Tôi muốn lấy dữ liệu này trong Tệp



 



    $[function[] {


   var people = [];

   $.getJSON['people.json', function[data] {
       $.each[data.person, function[i, f] {
          var tblRow = "" + "" + f.firstName + "" +
           "" + f.lastName + "" + "" + f.job + "" + "" + f.roll + "" + ""
           $[tblRow].appendTo["#userdata tbody"];
     }];

   }];

}];





First Name Last Name Email Address City
1 và xử lý dữ liệu này trong JavaScript. Nhưng không biết cách kết nối tệp.json trong tệp .html?

Nói tôi nghe đi mà. Đây là tệp JSON của tôi:json file:

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

Nghĩ rằng tôi đang nhận tệp JSON từ máy chủ, cách sử dụng tệp đó trong HTML của mình, để tôi có thể hiển thị dữ liệu trong các bảng trong trang HTML. Tôi đang sử dụng JavaScript để phân tích tệp JSON. Tôi mới tham gia vào lĩnh vực này. Xin vui lòng giúp đỡ.

Hỏi ngày 22 tháng 8 năm 2012 lúc 9:57Aug 22, 2012 at 9:57

3



 



    $[function[] {


   var people = [];

   $.getJSON['people.json', function[data] {
       $.each[data.person, function[i, f] {
          var tblRow = "" + "" + f.firstName + "" +
           "" + f.lastName + "" + "" + f.job + "" + "" + f.roll + "" + ""
           $[tblRow].appendTo["#userdata tbody"];
     }];

   }];

}];





First Name Last Name Email Address City

Tệp



 



    $[function[] {


   var people = [];

   $.getJSON['people.json', function[data] {
       $.each[data.person, function[i, f] {
          var tblRow = "" + "" + f.firstName + "" +
           "" + f.lastName + "" + "" + f.job + "" + "" + f.roll + "" + ""
           $[tblRow].appendTo["#userdata tbody"];
     }];

   }];

}];





First Name Last Name Email Address City
2 của 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 đã thành công trong việc tích hợp một tệp



 



    $[function[] {


   var people = [];

   $.getJSON['people.json', function[data] {
       $.each[data.person, function[i, f] {
          var tblRow = "" + "" + f.firstName + "" +
           "" + f.lastName + "" + "" + f.job + "" + "" + f.roll + "" + ""
           $[tblRow].appendTo["#userdata tbody"];
     }];

   }];

}];





First Name Last Name Email Address City
2 vào bảng


 



    $[function[] {


   var people = [];

   $.getJSON['people.json', function[data] {
       $.each[data.person, function[i, f] {
          var tblRow = "" + "" + f.firstName + "" +
           "" + f.lastName + "" + "" + f.job + "" + "" + f.roll + "" + ""
           $[tblRow].appendTo["#userdata tbody"];
     }];

   }];

}];





First Name Last Name Email Address City
4 sau khi làm việc một ngày trên đó !!!

Trevorp

1.1711 Huy hiệu vàng17 Huy hiệu bạc19 Huy hiệu đồng1 gold badge17 silver badges19 bronze badges

Đã trả lời ngày 23 tháng 8 năm 2012 lúc 12:03Aug 23, 2012 at 12:03

Saikiransaikiransaikiran

2.1864 Huy hiệu vàng26 Huy hiệu bạc41 Huy hiệu đồng4 gold badges26 silver badges41 bronze badges

6

Sử dụng jQuery's $ .getJson

$.getJSON['mydata.json', function[data] {
    //do stuff with your data here
}];

Đã trả lời ngày 23 tháng 8 năm 2012 lúc 5:19Aug 23, 2012 at 5:19

Nicolas Brownnicolas BrownNicolas Brown

1.4761 Huy hiệu vàng10 Huy hiệu bạc17 Huy hiệu đồng1 gold badge10 silver badges17 bronze badges

3

Bạn có thể dễ dàng làm điều này mà không cần sử dụng jQuery hoặc ajax như dưới đây. Ở đây, tôi đã sử dụng API tìm nạp [tích hợp].

index.html




    
    
    
    Title


fetch['data.json'] .then[function [response] { return response.json[]; }] .then[function [data] { appendData[data]; }] .catch[function [err] { console.log['error: ' + err]; }]; function appendData[data] { let mainContainer = document.getElementById["myData"]; for [let i = 0; i < data.length; i++] { let div = document.createElement["div"]; div.innerHTML = 'Name: ' + data[i].firstName + ' ' + data[i].lastName; mainContainer.appendChild[div]; } }

data.json

[
  {
    "id": "1",
    "firstName": "John",
    "lastName": "Doe"
  },
  {
    "id": "2",
    "firstName": "Mary",
    "lastName": "Peterson"
  },
  {
    "id": "3",
    "firstName": "George",
    "lastName": "Hansen"
  }
]

Đã trả lời ngày 20 tháng 1 lúc 4:23Jan 20 at 4:23

Bạn có thể sử dụng JavaScript như ... chỉ cần đưa ra đường dẫn thích hợp của tệp JSON của bạn ... Just give the proper path of your json file...



    
        
        
            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 + "

"+ mydata[i].name +"

" + "
"; } }

Đơn giản chỉ cần lấy dữ liệu và thêm nó vào một div ... ban đầu in độ dài trong cảnh báo.

Đây là tệp json của tôi: abc.json

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

Quantum7

3,0072 huy hiệu vàng33 Huy hiệu bạc45 Huy hiệu đồng2 gold badges33 silver badges45 bronze badges

Đã trả lời ngày 31 tháng 7 năm 2017 lúc 19:53Jul 31, 2017 at 19:53

JavedjavedJaved

1.51315 huy hiệu bạc15 huy hiệu đồng15 silver badges15 bronze badges

3

Đây là cách làm điều đó trong JavaScript đơn giản.

index.html



    
        Sample Test Page
    
    
        

Movie List

movieID title poster
fetch["mydata.json"] .then[response => response.json[]] .then[data => { for [var i = 0; i element. [It is looking for the all columns, which is UNION of the column names]..
Traverse Dữ liệu JSON và Phù hợp với tên cột.....
Để trống cột nếu không có giá trị của khóa đó ..

Bài Viết Liên Quan

Chủ Đề