Javascript 在Django中显示API中的JSON数据
我正在寻找一种简单的方法来显示来自Django项目中API的JSON值。我已经准备好将JSON数据读入一个对象并存储为变量,等等。但是我想知道如何动态显示JSON对象中的值 比如说JSON看起来像这样Javascript 在Django中显示API中的JSON数据,javascript,python,css,json,django,Javascript,Python,Css,Json,Django,我正在寻找一种简单的方法来显示来自Django项目中API的JSON值。我已经准备好将JSON数据读入一个对象并存储为变量,等等。但是我想知道如何动态显示JSON对象中的值 比如说JSON看起来像这样 { "status":"OK", "copyright":"Copyright (c) 2017 Pro Publica Inc. All Rights Reserved.", "results":[ { "num_results": 10,
{
"status":"OK",
"copyright":"Copyright (c) 2017 Pro Publica Inc. All Rights Reserved.",
"results":[
{
"num_results": 10,
"offset": 0,
"bills": [
{
"bill_id": "hr2739-113",
"bill_type": "hr",
"number": "H.R.2739",
"bill_uri": "https://api.propublica.org/congress/v1/113/bills/hr2739.json",
"title": "Efficient Use of Government Spectrum Act of 2013",
"sponsor_title": "Rep.",
"sponsor_id": "M001163",
"sponsor_name": "Doris Matsui",
"sponsor_state": "CA",
"sponsor_party": "D",
"sponsor_uri": "https://api.propublica.org/congress/v1/members/M001163.json",
"gpo_pdf_uri": "http://www.gpo.gov/fdsys/pkg/BILLS-113hr2739ih/pdf/BILLS-113hr2739ih.pdf",
"congressdotgov_url": "https://www.congress.gov/bill/113th-congress/house-bill/2739",
"govtrack_url": "https://www.govtrack.us/congress/bills/113/hr2739",
"introduced_date": "2013-07-18",
"committees": "House Armed Services Committee",
"committee_codes": ["HSAS","HSIF"],
"subcommittee_codes": ["HSAS26","HSIF16"],
"primary_subject": "Science, Technology, Communications",
"summary_short": "Efficient Use of Government Spectrum Act of 2013 - Directs the Federal Communications Commission (FCC), within three years after enactment of the Middle Class Tax Relief and Job Creation Act of 2012, to: (1) reallocate electromagnetic spectrum between the frequencies from 1755 to 1780 megahertz (currently, such frequencies are occupied by the Department of Defense [DOD] and other federal agencies); and (2) as part of the competitive bidding auctions required by such Act, grant new initial lic...",
"latest_major_action_date": "2013-08-29",
"latest_major_action": "Referred to the Subcommittee on Intelligence, Emerging Threats & Capabilities."
},
{
"bill_id": "hr3355-113",
"bill_type": "hr",
"number": "H.R.3355",
"bill_uri": "https://api.propublica.org/congress/v1/113/bills/hr3355.json",
"title": "Reducing Employer Burdens, Unleashing Innovation, and Labor Development Act of 2013",
"sponsor_title": "Rep.",
"sponsor_id": "G000558",
"sponsor_name": "Brett Guthrie",
"sponsor_state": "KY",
"sponsor_party": "R",
"sponsor_uri": "https://api.propublica.org/congress/v1/members/G000558.json",
"gpo_pdf_uri": "http://www.gpo.gov/fdsys/pkg/BILLS-113hr3355ih/pdf/BILLS-113hr3355ih.pdf",
"congressdotgov_url": "https://www.congress.gov/bill/113th-congress/house-bill/3355",
"govtrack_url": "https://www.govtrack.us/congress/bills/113/hr3355",
"introduced_date": "2013-10-28",
"committees": "House Armed Services Committee",
"primary_subject": "Economics and Public Finance",
"summary_short": "Reducing Employer Burdens, Unleashing Innovation, and Labor Development Act of 2013 - Expresses the sense of Congress that increasing the competitiveness of U.S. manufacturers will strengthen the national economy. Title I: Investing in America's Workforce - Investing in America's Workforce Act - Amends the Workforce Investment Act of 1998 to require state or local workforce investment systems to use youth activities funds allocated to a local area for programs that provide training, which may...",
"latest_major_action_date": "2014-01-24",
"latest_major_action": "Referred to the Subcommittee on Intelligence, Emerging Threats & Capabilities."
},
我想让它以HTML2的形式返回不同的条目。但例如,如果这个API调用要返回5个条目,我希望它以HTML格式返回5个不同的条目。处理此问题的最佳方法是什么?您可以循环JSON对象,例如,创建表行以显示结果。比如JSON对象名为“result”。您可以使用jquery循环查看“账单”,如下所示。我刚刚添加了前4个元素。根据Json对象的不同,可以添加任意数量的对象。最后,可以将“trHTML”作为表格添加到HTML页面中。循环将迭代任意数量的账单,比如4、5100张
$.each(data['bills'] , function (index, item) {
trHTML += '<tbody><tr><td>'+item[0]+'</td><td>'+item[1]+'</td><td>'+item[2]+
'</td><td>'+item[3]+'</td></tr></tbody>';
});
$。每个(数据['bills],功能(索引,项目){
trHTML+=''+项[0]+''+项[1]+''+项[2]+
''+项目[3]+'';
});