変数に格納されたDOMオブジェクトから要素を取り出したい

RSSのデータを取得してそれを整形して表示するプログラムを作りたいと考えています。
下記コードでdomには<HTML>〜<RSS>〜</RSS>〜</HTML>という感じのものが入っています。
このRSSタグの子要素の中のテキストをそれぞれ取り出して表示しようと試みていますが、全く出力されません。
($(id).html(dom);とやった場合には普通にHTMLのように表示されます。)

JavaScript
1function RSS(url, id) {
2	$.ajax({
3		type: 'GET'
4		, url: url
5	}).done(function (data) {
6		$(id).html('Success for loading RSS! <br>');
7		var dom = data['results'];
8		var out_html = $($.parseHTML(dom));
9		$(id).html(dom);
10		out_html.filter('item').each(function () {
11			var el = $(this);
12			$(id).append('<h3>'+el.text()+'</h3><br>'+el.filter('description').html());
13			console.log(el.text());
14			console.log(el.filter('description').html());
15		});
16	}).fail(function (data) {
17		$(id).html('Failed to load RSS. <br>' + JSON.stringify(data));
18	});
19}

行動規範の内容に同意します

回答2件

ベストアンサー

データも無く、「うまくいかない」だけだと状況がわからないんですが、
コードを見て思ったのは

javascript
1$(dom).find('item').each(function () {
2   var el = $(this);
3   $(id).html('<h3>'+el.text()+'</h3>');
4   $(id).html(el.find('description').html());
5});

このループで、つねに $(id)の内容はすべて書き換わりますのでそのせいじゃないかと思います。
たとえばループが一回でも$(id).html('<h3>'+el.text()+'</h3>');は次の行ですべて書き換えられてしまいます。

最後の要素しか出ていない様ならたぶんそれです。

javascript
1$(dom).find('item').each(function () {
2   var el = $(this);
3   $(id).html('<h3>'+el.text()+'</h3>');
4   console.log(el.text());
5   $(id).html(el.find('description').html());
6   console.log(el.find('description').html());
7});

などしてみて、コンソールに期待しているものが出力されるかまずは確認してみるといいでしょう。

あと、問題とは関係ないと思いますが、以下の2行って冗長（これで戻るなら元々 dataは jsonではないのか）な気がするんですけど、こういう書き方をするものなんでしょうか。

javascript
1var json = JSON.stringify(data);
2var arr = JSON.parse(json);

追記

コメントも受けて。正直なところRSSのフォーマットなりサンプルが無いと想像ばかりになるので難しいですが

その他気になるのは

$(id).html(dom);

で、HTMLの様に表示されるということでしたら、
var out_html = $($.parseHTML(dom));
ではなくて

$(dom).filter('item').each(function () {

でも、良いような。（すでに試していてout_htmlが問題なさそうなら気にしないでください）

あとfilterではなくfindを使う場面な気がします。

投稿2016/08/26 13:09

編集2016/08/26 13:45

flied_onion

総合スコア2604

HALBY

2016/08/26 13:29

ご指摘の通りjson関係の2行は削除してもそのまま動作しました。提示していただいたコードのようにコンソールにも出力してみましたが、何も出力されていませんでしたので、単にループで消えてしまうという以前にどこかに問題があるようです。

行動規範の内容に同意します

各変数をコンソールに出力して調べていたところ、data['results']がテキストではなく配列だったことがわかり、
var dom = data['results'][0];
のようにすることで解決できました。ブラウザが親切にも配列の中のテキストを解釈してくれていたようです。
お騒がせしてすみませんでした。

投稿2016/08/26 13:52

編集2016/08/26 13:54

HALBY

総合スコア16