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

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

新規登録して質問してみよう
ただいま回答率
87.20%
JSONP

JSONP(JSON with padding)は、JSONを使用した関数呼び出しのための仕組み。クロスドメインでのデータの受け渡しが可能です。JavaScriptからクロスドメインで容易にデータを扱うことができます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

解決済

APIで取得したJSONPのネストされた値を取得したい

退会済みユーザー

退会済みユーザー

総合スコア0

JSONP

JSONP(JSON with padding)は、JSONを使用した関数呼び出しのための仕組み。クロスドメインでのデータの受け渡しが可能です。JavaScriptからクロスドメインで容易にデータを扱うことができます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

2回答

0評価

0クリップ

1527閲覧

投稿2019/10/17 09:17

編集2019/10/18 02:08

前提・実現したいこと

独学の初学者です。
yahooショッピングのカテゴリランキングAPIからJSONPの値を取得し、
HTMLへの表示、及びcsvへの出力をしたいと考えています。

data.ResultSet[0].Result[i]直下より更にネストされたデータが取得できず、
長時間格闘している状態です。

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

作成したものを実行したところ、コンソールには以下のエラーが出ています。
Cannot read property 'rank' of undefined

エラーが出ているのに何故かHTMLにはデータが表示されてます。

csvはエラーが出てダウンローダーが動かず、
data.ResultSet[0].Result[i]._attributes.rankを
data.ResultSet[0].Result[i]._attributesにすれば動きますが
該当箇所には[object Object]が入っています。

該当のソースコード

js

$(function(){ // buttonがclickされたとき、変数に検索する値を代入 $('#view_exe_button').on('click', function(){ var genreId = $('#rank_area').val(); $('div#rank_result').empty(); $('div#rank_result').prepend('<div id="rank1"></div>'); // リクエストURLを設定する(ランキング) $.getJSON('https://shopping.yahooapis.jp/ShoppingWebService/V1/json/categoryRanking?callback=?', { appid: Client ID, category_id: genreId, period: "daily", offset: "1" }, function(data){ $('div#rank_result').prepend('<h2>Yahooランキング結果  カテゴリID:'+genreId+'</h2>'); $.each(data.ResultSet[0].Result, function(i, item){ var temp = $(`<dl class="rank"><dd class="dd0">${item._attributes.rank}</dd> <dd class="dd1"><a href="${item.Url}"><img src="${item.Image.Medium}"></a></dd> <dd class="dd2">${item.Name}</dd> <dd class="dd3" id="sterrank${item._attributes.rank}"></dd> <dd class="dd4">${item.Review.Rate} (${item.Review.Count}件)</dd> <dd class="dd5">${item.Store.Name}</dd></dl>`); $('div#rank1').append(temp); // 評価を星にする $('#sterrank'+item._attributes.rank).rateYo({ starWidth: "20px", rating: item.Review.Rate, halfStar: true, readOnly: true }); }) // each }); // function(data) }); // clickイベント }); // function // // ////////////////////////////////////////////////////////////////////////////////// // csv出力(クリック) $(function(){ $('#csv_exe_button').on('click', function(){ var userhh = $('select#yoyakuH').val(); var usermi = $('select#yoyakuM').val(); // 現在の年月日時分秒を取得 var now = new Date(); var yy = now.getFullYear(); var mm = ("0"+(now.getMonth()+1)).slice(-2); var dd = ("0"+now.getDate()).slice(-2); var hh = ("0"+now.getHours()).slice(-2); var mi = ("0"+now.getMinutes()).slice(-2); var ss = ("0"+now.getSeconds()).slice(-2); var nowtime = String(yy)+String(mm)+String(dd)+String(hh)+String(mi)+String(ss); var nowtimename = '取得:'+String(yy)+'年'+String(mm)+'月'+String(dd)+'日'+String(hh)+'時'+String(mi)+'分'+String(ss)+'秒'; var genreId = $('#rank_area').val(); // リクエストURLを設定する(ランキング) $.getJSON('https://shopping.yahooapis.jp/ShoppingWebService/V1/json/categoryRanking?callback=?', { appid: Client ID, category_id: genreId, period: "daily", offset: "1" }, function(data){ // 配列 の用意 var array_data = [['ランキング順位','カテゴリID:',genreId,nowtimename],['順位','URL','商品名','評価平均','評価件数','店名']] $.each(data.ResultSet[0].Result, function(i, item){ array_data.push([item._attributes.rank,item.Url,item.Name, item.Review.Rate,item.Review.Count,item.Store.Name]); }) // each // BOM の用意(文字化け対策) var bom = new Uint8Array([0xEF, 0xBB, 0xBF]); // CSV データの用意 var csv_data = array_data.map(function(l){return l.join(',')}).join('\r\n'); var blob = new Blob([bom, csv_data], { type: 'text/csv' }); var url = (window.URL || window.webkitURL).createObjectURL(blob); var a = document.getElementById('downloader'); a.download = nowtime + '.csv'; a.href = url; // ダウンロードリンクをクリックする $('#downloader')[0].click(); }); // function(data) }); // click }); // function // data = JSON.stringify(data); // data = JSON.parse(data);

api

/* */data({ "ResultSet":{ "totalResultsAvailable":"100", "firstResultPosition":"1", "totalResultsReturned":20, "0":{ "Result":{ "RankingInfo":{ "LastModified":"2019-10-18", "StartDate":"2019-10-17", "EndDate":"2019-10-17", "CategoryId":"4744", "Gender":"all", "Generation":"all", "Period":"daily" }, "0":{ "Name":"\u8a33\u3042\u308a \u5272\u308c\u30c1\u30e7\u30b3 \u6700\u5927300g \u9078\u3079\u308b14\u7a2e\u985e \u30c1\u30e7\u30b3\u30ec\u30fc\u30c8 \u30c1\u30e5\u30d9\u30fb\u30c9\u30fb\u30b7\u30e7\u30b3\u30e9\u306e\u304a\u8a66\u3057\u5272\u308c\u30c1\u30e7\u30b3 \u9001\u6599\u7121\u6599 \u30b0\u30eb\u30e1 \u30dd\u30a4\u30f3\u30c8\u6d88\u5316", "Code":"kamachu-shop_latter", "Url":"https://store.shopping.yahoo.co.jp/kamachu-shop/latter.html", "Image":{ "Id":"kamachu-shop_latter", "Small":"https://item-shopping.c.yimg.jp/i/c/kamachu-shop_latter", "Medium":"https://item-shopping.c.yimg.jp/i/g/kamachu-shop_latter" }, "Review":{ "Rate":"4.16", "Count":"8635", "Url":"https://shopping.yahoo.co.jp/review/item/list?store_id=kamachu-shop&page_key=latter" }, "Store":{ "Id":"kamachu-shop", "Name":"\u84b2\u5c4b\u5fe0\u5175\u885b\u5546\u5e97", "Url":"https://store.shopping.yahoo.co.jp/kamachu-shop/" }, "_attributes":{ "rank":"1", "vector":"up", "type":"item" } }, "1":{ ~ }, "_container":"RankingData", "Categories":{ "Current":{ "Id":"4744", "ParentId":"2498", "Url":"https://shopping.yahoo.co.jp/category/4744/recommend", "Title":{ "Short":"\u30b9\u30a4\u30fc\u30c4\u3001\u6d0b\u83d3\u5b50", "Medium":"\u30b9\u30a4\u30fc\u30c4\u3001\u6d0b\u83d3\u5b50", "Long":"\u98df\u54c1 > \u30b9\u30a4\u30fc\u30c4\u3001\u6d0b\u83d3\u5b50" }, "Path":{ "0":{ "_attributes":{ "depth":1 }, "Id":"1", "ParentId":"0", "Title":{ "Name":"Shopping" } }, "1":{ ~ }, "_container":"Category" } }, "Children":{ "0":{ "_attributes":{ "sortOrder":"10" }, "Id":"14628", "Url":"https://shopping.yahoo.co.jp/category/14628/recommend", "Title":{ "Short":"\u30c1\u30e7\u30b3\u30ec\u30fc\u30c8", "Medium":"\u30c1\u30e7\u30b3\u30ec\u30fc\u30c8", "Long":"\u98df\u54c1 > \u30b9\u30a4\u30fc\u30c4\u3001\u6d0b\u83d3\u5b50 > \u30c1\u30e7\u30b3\u30ec\u30fc\u30c8" } }, "1":{ ~ }, "_container":"Child" } } } } } });

HTML

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="css/jquery.rateyo.min.css"> </head> <body> <header> <h1>【Yahoo】ランキングの結果を取得するツール</h1> <p>ジャンルID:<input type="text" id="rank_area" value="4744"></p> <button type="button" id="view_exe_button">結果表示</button> <button type="button" id="csv_exe_button">csv DL</button> </header> <div id="result"> <div id="rank_result"> </div> </div> <hr> <a style="display:none;" id="downloader" href="#"></a> <script src="js/jquery.min.js"></script> <script src="js/add.js"></script> <script src="js/jquery.rateyo.min.js"></script> </body> </html>

試したこと

JSONで取得しようとしたところCORSエラーが出るためJSONPで取得したのがまずかったのかと思い、
JSON.stringify()やJSON.parse()などで対応してみましたが効果はありませんでした。

再帰処理ですべて取得する記事は見つかるものの、
特定のデータだけを取り出すことができませんでした。

補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

良い質問の評価を上げる

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

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

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

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

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

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

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

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

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

yambejp

2019/10/17 09:25 編集

> CORSエラーが出るためJSONPで取得した jsonデータをapi側の調整なしにjsonpに変更はできません またjsonデータしかハカないapiならCORSをapi側で 解除してもらう必要があります
退会済みユーザー

退会済みユーザー

2019/10/17 09:32

紛らわしくてすみません。
yambejp

2019/10/17 09:36

> yahooショッピングAPIはJSONPです。 であれば「api」のサンプルはコールバック付きのjsonp型で 提示されたほうがよいでしょう
退会済みユーザー

退会済みユーザー

2019/10/18 02:08

コールバック付きのjsonp型というのが分からなかったため調べてみたのですが、こちらで合っているでしょうか。
yambejp

2019/10/18 02:10

途中にある "1":{ ~ }, のあたり、文法エラーですね。 省略しいているのかもしれませんが 最低限動くものを提示ください

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

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

JSONP

JSONP(JSON with padding)は、JSONを使用した関数呼び出しのための仕組み。クロスドメインでのデータの受け渡しが可能です。JavaScriptからクロスドメインで容易にデータを扱うことができます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。