Jqueryでjsonデータをhtmlに表示したい

Question

NewsAPIを使いJsonデータを取得するとところまでは以前の質問で出来たのですがJqueryでjsonデータをhtmlに表示するところでもハマってしまいました。errorは出てませんが表示がされません。

何回も質問すみません。毎回同じですが、なにかわかる方は回答お願いします。

Started GET "/news/data" for ::1 at 2020-08-16 14:50:53 +0900
Processing by NewsController#data as */*
  Rendering news/data.js.erb
  Rendered news/data.js.erb (Duration: 0.2ms | Allocations: 4)
Completed 200 OK in 860ms (Views: 10.4ms | ActiveRecord: 0.0ms | Allocations: 1951)

require 'uri'
require 'net/http'
require 'json'

def data
      @END_POINT = 'https://newsapi.org/v2'.freeze
      @REQUEST_URL = "#{@END_POINT}/top-headlines?sources=bbc-news&apiKey=自分のAPI".freeze
      json =
        URI.parse(@REQUEST_URL)
           .then { |uri| Net::HTTP.get(uri) }
           .then { |response| JSON.parse!(response) }
      @data = json['articles'].html_safe
end

var data = <%= @data %>;
var result = '<ul class="info">'
data.forEach(function(e){
	result += '<li>' + e.title + '</li><hr>';
});
result += '</ul>'
$('#result').html(result);

<div id="result">no information...</div>
<script>
var f = function(){
	$.ajax({
		type: 'GET',
		url: '/news/data'
	});
};
setTimeout(f, 600000);
f();
</script>

追記：デロッパーツールでこのような表示がありました

VM340:2 Uncaught SyntaxError: Unexpected token 'var'
    at DOMEval (DOMEval.js:38)
    at Function.globalEval (core.js:197)
...

var data = 
var result += '<ul class="info">'  ←ここを指してた
data.forEach(function(e){

Comments

[kei344]

「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを、出ているエラーなどと併せて、具体的に記述されたほうが回答を得られやすいと思います。

[yamada_yuuki]

コメントありがとうございます。後でログなどを載せます。

Answer 1

setTimeout(f, 600000);

10分後にajaxを実行していますか？単に10分たってないだけでは？
ただ$.ajaxが呼び出しだけして、結果をなにもしていないので
エラーも表示もされないとは思いますが・・・

Comments

[yamada_yuuki]

回答ありがとうございます。たしかにそこは間違ってはいましたがsetTimeoutをいじってもなくしても結果は変わらずエラーは出ませんでした。

[yambejp]

その後に$.ajaxが呼び出しっぱなしで何もしていないこと指摘してありますよね？
da
$.ajax({
・・・
}).done(function(data){
console.log(data); //成功時の出力
}).fail(function(xhr,err)){
console.log(err); //失敗時の出力
});

のように書いてください

[yamada_yuuki]

返信遅れました。

VM1308:1 Uncaught SyntaxError: Unexpected token '=>'
at DOMEval (DOMEval.js:38)
at Function.globalEval (core.js:197)

...

f @ (index):74
(anonymous) @ (index):83
(index):78 var data = [{"source"=>{"id"=>"bbc-news", "name"=>"BBC News"}, "author"=>"BBC News", "title"=>"Troops end deadly siege at Somali hotel", "description"=>"At least 10 people are dead after al-Shabab militants stormed the Elite Hotel in the capital.", "url"=>"http://www.bbc.co.uk/news/world-africa-53798834",

...

data.forEach(function(e){
result += '' + e.title + '';
});
$('#result').html(result);

となっていました。Uncaught SyntaxErrorはdata.js.erbのいち行目の

var data = (データ)　 ←ここを指してたました。
data.forEach(function(e){

[yambejp]

見た感じ戻り値はjsonになっていませんがそれが原因では？
またjsonがもどる前提なら$.ajaxのdataType:"JSON"の指定が必要です

[yamada_yuuki]

コントローラーの
@data = json['articles']
の部分に
@data = json['articles'].to_json
とすることで出来ました

アドバイスありがとうございました。