質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.82%

RSSで取得したオブジェクトの数を取得したい

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 624

ZZ-TOP

score 36

パソコンスクールでJavaScriptを勉強しています。

配信されているRSSのXMLファイルをダウンロードして
ページ上に出力するという課題の勉強をしています。

※サンプルのコードは以下の通りです。

ajaxについて、月を英字で表示する、日を2桁表示する
(2桁表示 = 1→01)、etc.いろいろ学びました。

その中で今度は
ダウンロードしたXMLファイルの中にオブジェクトが何個あるのか求める
という課題になりました。

※オブジェクト:ページ上に出力する記事の数
=xmlファイルからダウンロードした「title」タグの個数

私の考えでは以下のコードの「1番」でtitleタグの数を取得して
コンソールに出力できると思っていました。

ですが画像の通り「1番」のコンソールへの出力結果は「0」になります。
「3番」の結果が「[]」になることも含めて
配列型で変数の宣言をすることが間違っているのだと思います。

すいませんが正しい変数の宣言を含め、
以下のサンプルコードで記事の数(ダウンロードしたtitleタグ)を 取得する方法を教えて下さい。

※取得した結果の出力先はコンソールでOKです。

追記
コンソールへの出力は「5番」までありますが、
「2番」、「4番」、「5番」は動作確認のため出力してみただけです。
今回の処理とは無関係です。

お手数ですが、詳しい方、説明の上手な方
よろしくお願いします。

<br>
<p>titlId</p>

<ul id="titlId" style="padding: 0px 10px;"></ul>

<br>
<br>

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
//配列型で宣言
var GlbtitNo = [];

//文字列型で宣言
var GlbtitSt = String;

//1番 配列型
console.log(GlbtitNo.length);

//2番 文字列型
console.log(GlbtitSt.length);
console.log(); //スペース用

//3番  配列型
console.log(GlbtitNo);

//4番 文字列型
console.log(GlbtitSt);

//スペース用
console.log('');

$(document).ready(function() {
    var rssURL = "https://book.studio947.net/feed/"
    $.ajax({
        url: 'cdxml.php',
        type: 'GET',
        dataType: 'xml',
        data: {
            url: rssURL
        }
    })

    .done(function(data) {
            $(data).find('item').each(function() {
                var titRSS = $(this).find('title').text();
                var likRSS = $(this).find('link').text();

                //グローバル変数用
                GlbtitNo = titRSS;
                GlbtitSt = titRSS;

                //5番 文字数
                console.log(titRSS.length);

                var dteRSS = $(this).find('pubDate').text();
                var DateOj = new Date(dteRSS)

                var dateDg = DateOj.getDate()

                addZero = function(num, digit) {
                    var numString = String(num);
                    while (numString.length < digit) {
                        numString = '0' + numString;
                    }
                    return numString;
                }

                var montEg = ['Jan', 'Feb', 'Mar', 'Apl', 'May', 'Jun', 'Jul', 'Aug',
                    'Sep.', 'Oct', 'Nov', 'Dec'
                ]

                var DateAp = ' ' + DateOj.getFullYear() + '/' + montEg[DateOj.getMonth()] +
                    '/' + addZero(dateDg, 2);

                $('#titlId')
                    .append($('<li></li>')

                        .append($('<a target="_blank"></a>').attr('href', likRSS).text(
                            titRSS))
                        .append(DateAp)
                    )

            }); //each
        }) //done

    .fail(function() {
            window.alert('読み込みエラー');
        }) //fail
}); //ready
</script>
<?php
if(isset($_GET["url"]) && preg_match("/^https?:/",$_GET["url"])){
    $ch = curl_init($_GET["url"]);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, TRUE);
    curl_setopt($ch, CURLOPT_TIMEOUT, 60);
    $data = curl_exec($ch);
    curl_close($ch);
    echo $data;
}else{
    echo "ERROR!";
}

ブラウザーの画面
※文字数は記事の個数分=10個出力されています。画面は2個の所で切り取っています。
出力結果

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

+2

※オブジェクト:ページ上に出力する記事の数
=xmlファイルからダウンロードした「title」タグの個数

RSS自体のtitleがあるのでイコールではありません。
itemの数を数えましょう。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/04/28 15:06

    回答して頂きありがとうございます

    > も教えて下さい。
    「違います。」と書いていますよ。

    すいません。
    要するに、「No」ということで変数に代入しなくても良いということですね。
    これだけわかったので、とりあえず納得です。

    >配列のほうも変数を宣言して空配列を初期値に指定しているだけです。

    そういうことなのですね。わかりました、初期値に指定するとスコープ内での処理が
    配列型で入るのだと思っていました。

    >それに続くconsole.log();の使い方も変です。空の配列を用意して要素数が0な事を確認して、何の値が出ると思ったのでしょう。

    違います。

    「console.log(); //スペース用」と記載したので
    わかって頂けると思っていましたが書き方が悪かったですね。

    ブラウザーのコンソールに出力された時に
    結果ばかりが縦にたくさん並ぶと見にくいので、
    見やすいように1行開けるために空出力しています。

    今、頑張ってます。
    いろいろありがとうございます。

    キャンセル

  • 2019/04/28 15:52

    > 見やすいように1行開けるために空出力しています。
    そこではなく、結果に対しての「配列型で変数の宣言をすることが間違っているのだと思います。 」という結論自体がおかしいです。
    再掲:「空の配列を用意して要素数が0な事を確認して、何の値が出ると思ったのでしょう。」
    ここで言う「空の配列」は「GlbtitNo」です。それのlengthは何も入っていないのだから0です。何も入れていないのだから当然そうなりますが、何が出ると思ったのでしょう、と書いています。

    キャンセル

  • 2019/04/28 16:32

    回答して頂きありがとうございます。

    >再掲:「空の配列を用意して要素数が0な事を確認して、何の値が出ると思ったのでしょう。」
    ここで言う「空の配列」は「GlbtitNo」です。それのlengthは何も入っていないのだから0です。何も入れていないのだから当然そうなりますが、何が出ると思ったのでしょう、と書いています。

    今回のコードの中の「3番」のことですね。

    エラーメッセージが表示されたら
    メッセージを確認するつもりでしたが、
    「0」でもエラーにならないし、
    まぎらわしいので消しておいた方が良かったですね。

    いずれにしても、何度もコメントして頂いたことの意味は理解しました。

    変数に代入せずともjQueryで要素の数を数えれば良いだけ、、、。
    ということだと思います。

    今の私の実力で、今すぐなんとかなる範囲ではないので、
    今回はここで区切っておきます。
    ※質問は開けておきます。自分なりに後でまとめたいので。

    何度もコメントして頂きありがとうございます。
    私の知識不足で解決しませんでしたが、いろいろ参考になりました。
    機会がありましたら、またお願いします。

    キャンセル

check解決した方法

0

自己解決してます。アップするのを忘れておりすいません。

こちら教えて頂いたアドバイスでは「item」の数を数えなさいということでしたが、
抽象的なアドバイスで、私の知識では解答の意味がわかりませんでした。

パソコンスクールの課題だったので、先生からの回答は以下の通りです。

「title」タグを取得して、ページ上に出力している
=「繰り返し処理をしている」、「nodelistを取得している」ということなので、

「nodelistの番号を取得してコンソールに出力する」というのが、
先生からの回答でした。

関数内でのnodelistの番号を取得する方法は関数の第1引数を取得すれば良いのですが、
ポイントが2つあり以下の通りです

1)nodelistの番号は「0」から始まるので、最後に「+1」する
2)取得した番号は関数のスコープの中でしか使えないのでグローバル変数に変換する

ということでした。コードは以下の通りです。

※JavaScript/jQueryだけです。 phpの変更は不要です。
※HTMLのコードは前述のコードと同じです=jQueryへのリンクが必要です

<script>


$(document).ready(function(){
var rssURL="https://book.studio947.net/feed/"
$.ajax({url: 'cdxml.php',type: 'GET',dataType: 'xml',data: {url: rssURL} })

.done(function(data){
$(data).find('item').each(function(i){
var titRSS=$(this).find('title').text();
var likRSS=$(this).find('link').text();

var ItemRSS=$(this).find('item').text();

var dteRSS=$(this).find('pubDate').text();
var DateOj=new Date(dteRSS) 

var dateDg=DateOj.getDate()

addZero=function(num,digit){
var numString=String(num);
while(numString.length<digit){
numString='0'+numString;
}
return numString;
}

var montEg=['Jan','Feb','Mar','Apl','May','Jun','Jul','Aug','Sep.','Oct','Nov','Dec']

var DateAp=' '+DateOj.getFullYear()+'/'+montEg[DateOj.getMonth()]+'/'+addZero(dateDg,2);

$('#titlId')
.append($('<li></li>') 

.append($('<a target="_blank"></a>').attr('href',likRSS).text(titRSS))
.append(DateAp)
)

// スコープ外に出すためにいったんグローバル変数に置き換える
k=i

});//each

console.log(k+1+'個');
}) //done

.fail(function(){window.alert('読み込みエラー');
}) //fail
}); //ready


</script>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.82%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る