gpt4 book ai didi

javascript - Guardian API,JSON解析jquery/javascript

转载 作者:行者123 更新时间:2023-12-02 19:14:40 24 4
gpt4 key购买 nike

所以我有来自 Guardian API 开放平台的 JSON 格式的数据,我想在 jquery 中解析它,目前我一直在尝试将结果显示到我的 HTML div 上。

数据格式如下:Guardian JSON results

我尝试使用的代码如下

    function processFootballData(footballData){
footyStuff = footballData;
var thisContainer = document.getElementById( "results" );
var listTmp = document.createElement( "ul" );
var tmpList = "";
for( var i=0; (i<footyStuff.results[0].length) && (i<100); i++ ) {
if( tmpList.length <= 0 ) {
tmpList = footyStuff.results[0][ i ];
}
else {
tmpList = tmpList + "," + footyStuff.results[0][ i ];
}
}

var footballURL = "http://content.guardianapis.com/search?q=football&format=json&api-key=ky5zy8mds5r25syu36t9kmzj";
$.getJSON( footballURL,
function( thisData ) {
var data = thisData;

for( var key in data ) {
var thisSublist = document.createElement( "ul" );
thisSublist.setAttribute('style', "border-bottom: 1px solid #000; width: 80%;");
var thisItem = document.createElement( "li" );
var footyResults = data[key].results[0];

if( data.hasOwnProperty( key ) ) {
var duyList = document.createElement("li");
duyList.setAttribute('style', "padding-bottom: 10px;margin-top:-15px;margin-left:53px;font-size:12px;");
duyFooty = document.createTextNode(footyResults);
duyList.appendChild(duyFooty);
thisItem.appendChild(duyList);
}

thisItem.appendChild( thisSublist );
}
listTmp.appendChild( thisItem );
}
thisContainer.appendChild( listTmp );
});

}

最佳答案

您需要使用 jsonp 请求,因为 Guardian API 会阻止跨域请求。使用 JQuery .ajax数据类型:jsonp:

$.ajax({
url: footballURL,
dataType: 'jsonp',
success: function( thisData ) {
var data = thisData;
// etc ...
}
});

你的 DOM 生成 Javascript 有点困惑……但是编写这种代码很容易迷失方向。我强烈建议使用某种微模板引擎来处理数据到 HTML 的转换。

<小时/>

Here's an example如何使用 Mustache.js 执行此操作.

// create HTML template with data tags
var template = "<ul>{{#results}}<li><ul><li><a href='{{webUrl}}'>{{webTitle}}</a></li></ul></li>{{/results}}";

// render output
var output = Mustache.render(template, thisData.response);

// add to the DOM
$("#results").html(output);
<小时/>

Here's the same example使用Underscore.js 。相同的想法,但不同的实现,让您可以将模板编写为标记:

<script type='text/template' id='article-template'>
<% _.each(results, function(article) { %>
<ul>
<li style="border-bottom: 1px solid #000; width: 80%;">
<a href='<%= article.webUrl %>'><%= article.webTitle %></a>
</li>
</ul>
<% }); %>
</script>

​以及要渲染的脚本:

var template = _.template($("#article-template").html());
var output = template(thisData.response);
$("#results").html(output);

关于javascript - Guardian API,JSON解析jquery/javascript,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13276430/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com