JSONデータをHTMLに解析する

intoxxx

Google Feeds APIを使用して、Facebookからの最新の投稿を表示しています。

彫像はfbrss.comのXMLファイルからのものであり、以下に示すこのコードは正常に機能します。

    <script type="text/javascript">
    google.load("feeds", "1")

    $.ajax({
        url      : document.location.protocol + '//ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=3&callback=?&q=' + encodeURIComponent('feedhere.xml'),
        dataType : 'json',
        success  : function (data) {
            if (data.responseData.feed && data.responseData.feed.entries) {
                $.each(data.responseData.feed.entries, function (i, e) {
                    console.log("------------------------");
                    console.log("postContent     : " + e.title);
                    console.log("link    : " + e.link);
                    console.log("date:      " + e.publishedDate);

                });
                ;
            }
        }
    });
</script>

予想通り、コンソールからの応答

    postContent     : Example post, just testing our facebook news right now!
link    : https://www.facebook.com/LINKTOPOST
date:      Fri, 04 Apr 2014 23:54:02
------------------------
postContent     : We're getting ready to launch our new website! Stay tuned for more updates and more info. We're very excited.
link    : https://www.facebook.com/LINKTOPOST
date:      Fri, 04 Apr 2014 23:06:59 -0700

今、私はjsonDataをそのようにdivに追加しようとしましたが、正しく行っていなかったと思います。

 if (data.responseData.feed && data.responseData.feed.entries) {
                $.each(data.responseData.feed.entries, function (i, e) {
                    window.NewsPost = e.title;
                    console.log("------------------------");
                    console.log("postContent     : " + e.title);
                    console.log("link    : " + e.link);
                    console.log("date:      " + e.publishedDate);

                });
                                }

            $("#facebookrss").append("<div>Test" + NewsPost +"</div>");

        }
    });

それ以外で使用できるように、グローバル変数を割り当てました。しかし、#facebookrssdiv内に何も表示されません。

日付と投稿コンテンツを別々のdivに入れようとしています。投稿コンテンツはリンクにラップされているので、Facebookページにアクセスできます。

また、日付を「MM--DD」として解析しようとしています。Google Feeds APIはあまり具体化されていないようですが、私はjavascriptにも非常に慣れていません。

何でも助けてくれる人に感謝します。

編集:それをうまく解決しました、ありがとうCACKHAROT。以下は、フォーマットに適合する私の最終コードであり、より良いフォーマットの日付が含まれています。

$.ajax({
        url      : document.location.protocol + '//ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=3&callback=?&q=' + encodeURIComponent('feedhere.xml'),
        dataType : 'json',
        success  : function (data) {
            if (data.responseData.feed && data.responseData.feed.entries) {
                $.each(data.responseData.feed.entries, function (i, e) {
                    window.NewsPost = e.title;
                    console.log("------------------------");
                    console.log("postContent     : " + e.title);
                    console.log("link    : " + e.link);
                    console.log("date:      " + e.publishedDate);
                    // construct div tag to have the new post details

                    var date = new Date(e.publishedDate);
                    monthNames =
                        [ 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                            'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec' ];
                    datemonth = monthNames[ date.getMonth() ];
                    dateday = date.getDay();

                    var construct_news = '<div class="facebook-feed">';
                    construct_news += '<div class="left">';
                    construct_news += '<div class="footer-circle-large">';
                    construct_news +='<div class="month">' + datemonth + '</div>';
                    construct_news += '<div class="day">' + dateday + '</div>';
                    construct_news += '</div>';
                    construct_news += '</div>';
                    construct_news += '<div class="right">';

                    construct_news += '<div>';
                    construct_news += '<span class="facebook-update"><a target="_blank" href="'+ e.link+'">' + e.title + '</a></span>';

                    construct_news += '</div>';
                    construct_news += '</div>';
                    construct_news += '</div>';

                    $("#facebookrss").append(construct_news); // append it to rss div

                });
            }
        }
    });
cackharot

これを試して

if (data.responseData.feed && data.responseData.feed.entries) {
    $.each(data.responseData.feed.entries, function (i, e) {
        window.NewsPost = e.title;
        console.log("------------------------");
        console.log("postContent     : " + e.title);
        console.log("link    : " + e.link);
        console.log("date:      " + e.publishedDate);
        // construct div tag to have the new post details

        var new_post_tag = '<div>';
        new_post_tag += '<h4>' + e.title + '</h4>';
        new_post_tag += '<p>' + e.link + '</p>';
        new_post_tag += '<p>' + e.publishedDate + '</p>';
        new_post_tag += '</div>';

        $("#facebookrss").append(new_post_tag); // append it to rss div
    });
}

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

JSONデータを迅速に解析する

分類Dev

PHPで巨大なjsonデータをhtmlに解析すると遅い

分類Dev

異なるJsonデータを配列に解析する

分類Dev

JSONを解析してSQLiteデータベースに保存する

分類Dev

JSONデータをExcelシートに解析する

分類Dev

JSONをデータフレームPythonに解析する

分類Dev

JSONデータの取得中にエラーを解析する

分類Dev

json を pandas データフレームに解析する

分類Dev

Androidでjsonデータを解析中にnull値を取得する

分類Dev

reactjsを使用してJsonデータを動的に解析する方法

分類Dev

JqueryでJsonデータを解析する

分類Dev

FacebookのJSONデータを解析する

分類Dev

iOSでjsonデータを解析する

分類Dev

JSONからデータを解析する

分類Dev

JsonデータOSMを解析する

分類Dev

大量のHTMLデータを解析してDBに保存する

分類Dev

JSONをデータ構造に解析する方法

分類Dev

JSONデータをSwiftに解析する際の問題

分類Dev

JSONデータをURLからMySQLに解析する

分類Dev

Json解析後にデータを取得する

分類Dev

シェルでJsonデータを列ごとに解析する

分類Dev

iOSでデータをJson形式に解析する方法は?

分類Dev

解析されたJsonデータにURLを追加する

分類Dev

jsonデータを解析してhtmlで出力するにはどうすればよいですか?

分類Dev

jsonをjqueryで解析し、データをhtmlテーブルに表示します

分類Dev

JsonデータをC#で通常のデータに解析する方法

分類Dev

iOSのコアデータにjson解析データを追加する方法は?

分類Dev

typeScript を使用して、angular2 で HTML 入力値を json データに解析する方法

分類Dev

xmlに変換するためにc#でJsonデータを解析する

Related 関連記事

  1. 1

    JSONデータを迅速に解析する

  2. 2

    PHPで巨大なjsonデータをhtmlに解析すると遅い

  3. 3

    異なるJsonデータを配列に解析する

  4. 4

    JSONを解析してSQLiteデータベースに保存する

  5. 5

    JSONデータをExcelシートに解析する

  6. 6

    JSONをデータフレームPythonに解析する

  7. 7

    JSONデータの取得中にエラーを解析する

  8. 8

    json を pandas データフレームに解析する

  9. 9

    Androidでjsonデータを解析中にnull値を取得する

  10. 10

    reactjsを使用してJsonデータを動的に解析する方法

  11. 11

    JqueryでJsonデータを解析する

  12. 12

    FacebookのJSONデータを解析する

  13. 13

    iOSでjsonデータを解析する

  14. 14

    JSONからデータを解析する

  15. 15

    JsonデータOSMを解析する

  16. 16

    大量のHTMLデータを解析してDBに保存する

  17. 17

    JSONをデータ構造に解析する方法

  18. 18

    JSONデータをSwiftに解析する際の問題

  19. 19

    JSONデータをURLからMySQLに解析する

  20. 20

    Json解析後にデータを取得する

  21. 21

    シェルでJsonデータを列ごとに解析する

  22. 22

    iOSでデータをJson形式に解析する方法は?

  23. 23

    解析されたJsonデータにURLを追加する

  24. 24

    jsonデータを解析してhtmlで出力するにはどうすればよいですか?

  25. 25

    jsonをjqueryで解析し、データをhtmlテーブルに表示します

  26. 26

    JsonデータをC#で通常のデータに解析する方法

  27. 27

    iOSのコアデータにjson解析データを追加する方法は?

  28. 28

    typeScript を使用して、angular2 で HTML 入力値を json データに解析する方法

  29. 29

    xmlに変換するためにc#でJsonデータを解析する

ホットタグ

アーカイブ