HTML・JavaScriptでのRSSリーダー作成

実現したいこと

ウェブブラウザで疑似的なRSSリーダーを作成したい

テキストボックスにURLを入力し、ボタンを押下すると指定した情報が表示されるようにしたい

前提

独学でHTMLとJavaScriptを勉強中です。
この度、ウェブブラウザ上で疑似的なRSSリーダーを作成したいと思ったのですが、製作中にエラーが発生したため、どのように解決すべきか、お力頂ければと思います。

発生している問題・エラーメッセージ

app4.js:8 Uncaught TypeError: Cannot read properties of null (reading 'getElementsByTagName')
    at xhttp.onreadystatechange (app4.js:8:24)

該当のソースコード

html
1<!DOCTYPE html>
2<html>
3<head>
4	<title>RSSリーダー</title>
5	<meta charset="utf-8">
6	<meta name="viewport" content="width=device-width, initial-scale=1">
7	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
8	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
9	<script src="app4.js"></script>
10</head>
11<body>
12	<div class="container">
13		<h1>RSSリーダー</h1>
14		<form class="form-inline">
15			<div class="form-group">
16				<label for="url">URL:</label>
17				<input type="text" class="form-control" id="url" placeholder="Enter URL" size="50">
18			</div>
19			<button type="button" class="btn btn-primary" onclick="fetchRSS()">情報取得</button>
20		</form>
21		<br>
22		<div id="result"></div>
23	</div>
24</body>
25</html>

JavaScript
1function fetchRSS() {
2	var url = document.getElementById("url").value;
3	if (url) {
4		var xhttp = new XMLHttpRequest();
5		xhttp.onreadystatechange = function() {
6			if (this.readyState == 4 && this.status == 200) {
7				var xmlDoc = this.responseXML;
8				var items = xmlDoc.getElementsByTagName("item");
9				var resultHtml = "";
10				for (var i = 0; i < items.length; i++) {
11					var title = items[i].getElementsByTagName("title")[0].childNodes[0].nodeValue;
12					var link = items[i].getElementsByTagName("link")[0].childNodes[0].nodeValue;
13					resultHtml += "<p><a href='" + link + "' target='_blank'>" + title + "</a></p>";
14				}
15				document.getElementById("result").innerHTML = resultHtml;
16			}
17		};
18		xhttp.open("GET", "https://api.rss2json.com/v1/api.json?rss_url=" + encodeURIComponent(url), true);
19		xhttp.send();
20	}
21}
22

int32_t

2023/04/10 06:44

変数 url には RSS の URL が入る前提でしょうか?

mahry

2023/04/10 06:54

コメントありがとうございます。はい、変数urlにはRSSのURLが入る前提です。

mahry

2023/04/10 07:13

すみません、API利用に関してまだ学習途中のため、完全に理解できておらず、var xmlDoc =の段階で処理を修正したほうが良いということでしょうか？

int32_t

2023/04/10 07:25 編集

回答に対する質問は回答へのコメントとして書いてください。 > var xmlDoc =の段階で処理を修正したほうが良いということでしょうか？ rss2json.com を使いたいなら、そうです。XML ではないので responseXML は使えません。

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

回答1件

js
1xhttp.open("GET", "https://api.rss2json.com/v1/api.json?rss_url=" + encodeURIComponent(url), true);

rss2json.com の API で取得したコンテンツは指定した RSS を JSON に変換したものなので、

this.responseXML を使うのをやめて JSON.parse(this.responseText) などで JSON を扱う
rss2json.com を使うのをやめて url を直接 GET して this.responseXML の利用を続ける

のどちらかが必要でしょう。

投稿2023/04/10 06:58

編集2023/04/10 07:07

int32_t

総合スコア20884

mahry

2023/04/10 07:30

ご回答いただきありがとうございます。また、コメントへの丁寧な回答もしていただきありがとうございます。 jsファイルを下記のように修正してみました。＞var xmlDoc = JSON.parse(this.responseText); この時点で「Uncaught TypeError: xmlDoc.getElementsByTagName is not a function at xhttp.onreadystatechange 」というエラーが出てしまいました。もう少し調査してみようと思います。今回はありがとうございました。

int32_t

2023/04/10 07:39 編集

XML ではないので、getElementsByTagName() など DOM の API は使えません。それ以降のコードは全面的に書き直す必要があります。 console.dir(JSON.parse(this.responseText)); などとして、ブラウザの開発者ツールのコンソールを見て中身を確認しましょう。

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