0

したがって、Guardian APIのオープンプラットフォームからのJSON形式のデータがあり、これをjqueryで解析したいのですが、現在、HTMLdivに結果を表示しようとして立ち往生しています。

データの形式は次のとおりです。GuardianJSONの結果

私が使用しようとしているコードは次のとおりです

    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 );
});

}
4

1 に答える 1

2

jsonpGuardian APIはクロスドメインリクエストをブロックしているため、リクエストを使用する必要があります。JQuery.ajaxをdataType: jsonp：で使用します

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

DOM生成のJavascriptは少し混乱していますが、そのようなコードを書くのに迷うのは簡単です。データからHTMLへの変換を処理するために、ある種のマイクロテンプレートエンジンを使用することを強くお勧めします。

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);

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);
于 2012-11-07T19:17:15.690 に答える