javascript - YQLからのxml出力を単純に表示する方法、またはhtmlへのJSON出力を取得する方法

Question

そのため、ページからデータをスクレイピングして（ソースとほぼ同じ形式で）表示する方法に取り組んできました。YQLを見つけましたが、特別なことを何もせずに出力全体を表示する方法がわからないことを除けば、すばらしいと思います（基本的なフォーマットを除く）。

YQL入力コードは次のとおりです。

select * from html where url="http://directory.vancouver.wsu.edu/anthropology" and xpath="//div[@id='facdir']"

これを使用すると、JSONが返されます。

http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20html%20where%20url%3D%22http%3A%2F%2Fdirectory.vancouver.wsu.edu%2Fanthropology%22%20and%20xpath%3D%22%2F%2Fdiv%5B%40id%3D'facdir'%5D%22&format=json&callback=anthropology

私はyahooチュートリアルに従い、とりわけニュースウィジェットを作成しましたが、基本的なビューをカバーするチュートリアルは1つもありませんでした（リンクも必要ありません。段落の設定だけです）。

このような：

Name
Title
Phone:(###)###-####
Location: Building and Room #
email@vancouver.wsu.edu

これが私がhttp://christianheilmann.comからの出力のために持っていたものですが、それは何もしません（どうやら彼女のチュートリアルはどれも機能せず、すべてを試しました）：

<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>  
</head>
<body>
<p>
<b>Copied:</b>
</p>
<div>
<script>
function anthropology (0) {
// get the DIV with the ID $
var info = document.getElementById('facdir');
// add a class for styling
info.className = 'js';
// if it exists
if(info){
// get the info data returned from YQL
var data = o.query.results.span;
var link = info.getElementsByTagName('a')[0];
link.innerHTML = '(see all info)';
// to the main container DIV
var out = document.createElement('span');
out.className = 'info';
info.insertBefore(out,link.parentNode);
}
}
</script>
<script src='http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20html%20where%20url%3D%22http%3A%2F%2Fdirectory.vancouver.wsu.edu%2Fanthropology%22%20and%20xpath%3D%22%2F%2Fdiv%2Fdiv%2Fdiv%2Fdiv%2Fdiv%2Fdiv%2Fdiv%2Fdiv%2Fdiv%2Fdiv%2Fdiv%22&format=json&callback=anthropology'></script>
</div>

score 4 · Accepted Answer

最近、いくつかのjsFiddleを使用してチュートリアルを完了し、、、、およびjQueryを別YQLのSO質問に使用する方法を説明しました。これにより、方向性が明らかになります。あなたはそのSO回答をここで見ることができます。XPATH.ajax()

あなたの質問に対する受け入れ可能な答えに準拠するために、私はあなたが要求しているウェブページからデータをデータスクレイピングすることがいかに簡単であるかを示すために実用的なデモをまとめました。

jsFiddleデモにはconsole.log()、ワークフロープロセスを理解するためのコメントとメッセージがたくさん含まれています。ブラウザコンソールをアクティブにして、たとえばFirebugを使用していることを確認してください。HTMLとは、教員ボックスCSSを作成するために使用され、画像、名前、電子メール、およびWebページのテーマのリンクも含めて元のWebサイトのものを模倣しています。

デモ：

jsFiddleデータスクレイピングXML：動的Webページの構築

改訂！！！ 上記の改訂されたjsFiddleに加えて、関連を参照してください

jsFiddleチュートリアル：動的Divの作成（改善されました！）

HTML：

<div id="results"></div>

jQuery：

var directoryName = 'child-development-program';

$.ajax({
    type: 'GET',
    url: "http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20html%20where%20url%3D%22http%3A%2F%2Fdirectory.vancouver.wsu.edu%2F" + directoryName + "%22%20and%20xpath%3D%22%2F%2Fdiv%5B%40id%3D'content-inner'%5D%2Fdiv%2Fdiv%2Fdiv%2Fdiv%2Fdiv%5B2%5D%22",
    dataType: 'xml',
    success: function(data) {

        if (data) {

            // Show in console the jQuery Object.
            console.info('Here is the returned query');
            console.log( $(data).find('query') );

            // Show in console the results in inner-html text.
            var textResults = $(data).find('results').text();
            console.log( textResults );

            // Parse the list of faculty members. Variable indexFM is not used for indexed faculty member.
            $(data).find('results').find('.views-row').each(function(indexFM){

                // This variable will store the current faculty member.
                var facultyMember = this;
                console.info('Faculty jQuery DIV Object shown on next lines.');
                console.log( facultyMember );

                // Parse the contents of each faculty member. Variable indexFC is not used for indexed faculty content.
                $(facultyMember).each(function(indexFC){

                    // Get Thumbnail Image of Faculty Member
                    var facultyMemberImage = $(this).find('.views-field-field-profile-image-fid #directoryimage a img').attr('src');
                    console.log( facultyMemberImage );

                    // Get Title (Name) of Faculty Member
                    var facultyMemberTitle = $(this).find('.views-field-field-professional-title-value #largetitle').text();
                    console.log( facultyMemberTitle );
                    // Get relative URL fragment.

                    //
                    // Stackoverflow Edit: Much more extraction in this section, see jsFiddle link above.
                    // 

                    // Get Email of Faculty Member
                    var facultyMemberEmail = $(this).find('.views-field-field-email-value span').text();

                    // Simple dashed line to separate faculty members as seen in browser console.
                    console.log('--------');

                    var divObject = '<div class="dynamicResults"><div class="dynamicThumb"><a href="' + facultyMemberUrl + '"><img src="' + facultyMemberImage + '" alt=""></a></div><div class="dynamicInfo"><div class="dynamicText"><a href="' + facultyMemberUrl + '" class="dynamicName">' + facultyMemberTitle + '</a></div><div class="dynamicText">' + facultyMemberPosition + '</div><div class="dynamicText">Phone: ' + facultyMemberPhone + '</div><div class="dynamicText">Location: ' + facultyMemberBuilding + ' <span>' + facultyMemberRoom + '</span></div><div class="dynamicText"><a href="' + facultyMemberEmailUrl + '" class="dynamicEmail">' + facultyMemberEmail + '</a><span class="dynamicEmailpic"></span></div></div></div><div class="clear"></div>';

                    // Build webpage with dynamic data.
                    $('#results').append( divObject );

                });

            });

        }
    }
});

スクリーンショット： 写真のサムネイルは、改訂されたjsFiddleの100pxx100pxの改訂された写真です!!

しかし、あなたの質問を実際に見て、私は何か新しくて単純なものを試してみたかったのです...しかし、結果は非常に受け入れられます。今回のデータスクレイピング手法では、ウェブページのネイティブCSSファイルをjsFiddleのアセットとして使用すると同時に、返されたデータを直接に使用しDOMます。

この方法は、元のWebページのニアクローンを利用できるようにするためにを使用htmlしていることを除いて、上記と同じ原則を使用します。唯一の欠点はCSSファイル全体の要件ですが、元のファイルを解析して、不要な余分なスタイルやセレクターを削除できます（IEの4096 CSSセレクターの障壁を破らないようにするために重要です）。.ajax() dataType

デモ：

jsFiddleデータスクレイピングHTML：そのWebページのクローンを作成する

HTML

<link type="text/css" rel="stylesheet" media="all" href="http://directory.vancouver.wsu.edu/sites/directory.vancouver.wsu.edu/files/css/css_f9f00e4e3fa0bf34a1cb2b226a5d8344.css" />

<div id="facultyAnthropology"></div>

jQuery：

var directoryName = 'anthropology';

    $.ajax({
        type: 'GET',
        url: "http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20html%20where%20url%3D%22http%3A%2F%2Fdirectory.vancouver.wsu.edu%2F"+directoryName+"%22%20and%20xpath%3D%22%2F%2Fdiv%5B%40id%3D'content-area'%5D%22",
        dataType: 'html',
        success: function(data) {
            $('#facultyAnthropology').append($(data).find('results'));
        }
    });

スクリーンショット： 上記のように、写真のサムネイルは100pxx100pxです

javascript - YQLからのxml出力を単純に表示する方法、またはhtmlへのJSON出力を取得する方法

1 に答える 1

Related

Reference