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

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

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

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

JavaScript

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

jQuery

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

Q&A

解決済

2回答

1990閲覧

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オブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿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

1$(function(){ 2 // buttonがclickされたとき、変数に検索する値を代入 3 $('#view_exe_button').on('click', function(){ 4 var genreId = $('#rank_area').val(); 5 6 $('div#rank_result').empty(); 7 $('div#rank_result').prepend('<div id="rank1"></div>'); 8 9 // リクエストURLを設定する(ランキング) 10 $.getJSON('https://shopping.yahooapis.jp/ShoppingWebService/V1/json/categoryRanking?callback=?', { 11 appid: Client ID, 12 category_id: genreId, 13 period: "daily", 14 offset: "1" 15 16 }, function(data){ 17 $('div#rank_result').prepend('<h2>Yahooランキング結果  カテゴリID:'+genreId+'</h2>'); 18 $.each(data.ResultSet[0].Result, function(i, item){ 19 var temp = $(`<dl class="rank"><dd class="dd0">${item._attributes.rank}</dd> 20 <dd class="dd1"><a href="${item.Url}"><img src="${item.Image.Medium}"></a></dd> 21 <dd class="dd2">${item.Name}</dd> 22 <dd class="dd3" id="sterrank${item._attributes.rank}"></dd> 23 <dd class="dd4">${item.Review.Rate} (${item.Review.Count}件)</dd> 24 <dd class="dd5">${item.Store.Name}</dd></dl>`); 25 $('div#rank1').append(temp); 26 27 // 評価を星にする 28 $('#sterrank'+item._attributes.rank).rateYo({ 29 starWidth: "20px", 30 rating: item.Review.Rate, 31 halfStar: true, 32 readOnly: true 33 }); 34 }) // each 35 }); // function(data) 36 }); // clickイベント 37}); // function 38 39// // ////////////////////////////////////////////////////////////////////////////////// 40 41// csv出力(クリック) 42$(function(){ 43 $('#csv_exe_button').on('click', function(){ 44 var userhh = $('select#yoyakuH').val(); 45 var usermi = $('select#yoyakuM').val(); 46 47 // 現在の年月日時分秒を取得 48 var now = new Date(); 49 var yy = now.getFullYear(); 50 var mm = ("0"+(now.getMonth()+1)).slice(-2); 51 var dd = ("0"+now.getDate()).slice(-2); 52 var hh = ("0"+now.getHours()).slice(-2); 53 var mi = ("0"+now.getMinutes()).slice(-2); 54 var ss = ("0"+now.getSeconds()).slice(-2); 55 56 var nowtime = String(yy)+String(mm)+String(dd)+String(hh)+String(mi)+String(ss); 57 var nowtimename = '取得:'+String(yy)+'年'+String(mm)+'月'+String(dd)+'日'+String(hh)+'時'+String(mi)+'分'+String(ss)+'秒'; 58 var genreId = $('#rank_area').val(); 59 60 // リクエストURLを設定する(ランキング) 61 $.getJSON('https://shopping.yahooapis.jp/ShoppingWebService/V1/json/categoryRanking?callback=?', { 62 appid: Client ID, 63 category_id: genreId, 64 period: "daily", 65 offset: "1" 66 67 }, function(data){ 68 // 配列 の用意 69 var array_data = [['ランキング順位','カテゴリID:',genreId,nowtimename],['順位','URL','商品名','評価平均','評価件数','店名']] 70 $.each(data.ResultSet[0].Result, function(i, item){ 71 array_data.push([item._attributes.rank,item.Url,item.Name, 72 item.Review.Rate,item.Review.Count,item.Store.Name]); 73 }) // each 74 75 // BOM の用意(文字化け対策) 76 var bom = new Uint8Array([0xEF, 0xBB, 0xBF]); 77 78 // CSV データの用意 79 var csv_data = array_data.map(function(l){return l.join(',')}).join('\r\n'); 80 var blob = new Blob([bom, csv_data], { type: 'text/csv' }); 81 var url = (window.URL || window.webkitURL).createObjectURL(blob); 82 var a = document.getElementById('downloader'); 83 a.download = nowtime + '.csv'; 84 a.href = url; 85 86 // ダウンロードリンクをクリックする 87 $('#downloader')[0].click(); 88 }); // function(data) 89 }); // click 90}); // function 91 92 // data = JSON.stringify(data); 93 // data = JSON.parse(data);

api

1/* */data({ 2 "ResultSet":{ 3 "totalResultsAvailable":"100", 4 "firstResultPosition":"1", 5 "totalResultsReturned":20, 6 "0":{ 7 "Result":{ 8 "RankingInfo":{ 9 "LastModified":"2019-10-18", 10 "StartDate":"2019-10-17", 11 "EndDate":"2019-10-17", 12 "CategoryId":"4744", 13 "Gender":"all", 14 "Generation":"all", 15 "Period":"daily" 16 }, 17 "0":{ 18 "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", 19 "Code":"kamachu-shop_latter", 20 "Url":"https://store.shopping.yahoo.co.jp/kamachu-shop/latter.html", 21 "Image":{ 22 "Id":"kamachu-shop_latter", 23 "Small":"https://item-shopping.c.yimg.jp/i/c/kamachu-shop_latter", 24 "Medium":"https://item-shopping.c.yimg.jp/i/g/kamachu-shop_latter" 25 }, 26 "Review":{ 27 "Rate":"4.16", 28 "Count":"8635", 29 "Url":"https://shopping.yahoo.co.jp/review/item/list?store_id=kamachu-shop&page_key=latter" 30 }, 31 "Store":{ 32 "Id":"kamachu-shop", 33 "Name":"\u84b2\u5c4b\u5fe0\u5175\u885b\u5546\u5e97", 34 "Url":"https://store.shopping.yahoo.co.jp/kamachu-shop/" 35 }, 36 "_attributes":{ 37 "rank":"1", 38 "vector":"up", 39 "type":"item" 40 } 41 }, 42 "1":{ 43 ~ 44 }, 45 "_container":"RankingData", 46 "Categories":{ 47 "Current":{ 48 "Id":"4744", 49 "ParentId":"2498", 50 "Url":"https://shopping.yahoo.co.jp/category/4744/recommend", 51 "Title":{ 52 "Short":"\u30b9\u30a4\u30fc\u30c4\u3001\u6d0b\u83d3\u5b50", 53 "Medium":"\u30b9\u30a4\u30fc\u30c4\u3001\u6d0b\u83d3\u5b50", 54 "Long":"\u98df\u54c1 > \u30b9\u30a4\u30fc\u30c4\u3001\u6d0b\u83d3\u5b50" 55 }, 56 "Path":{ 57 "0":{ 58 "_attributes":{ 59 "depth":1 60 }, 61 "Id":"1", 62 "ParentId":"0", 63 "Title":{ 64 "Name":"Shopping" 65 } 66 }, 67 "1":{ 68 ~ 69 }, 70 "_container":"Category" 71 } 72 }, 73 "Children":{ 74 "0":{ 75 "_attributes":{ 76 "sortOrder":"10" 77 }, 78 "Id":"14628", 79 "Url":"https://shopping.yahoo.co.jp/category/14628/recommend", 80 "Title":{ 81 "Short":"\u30c1\u30e7\u30b3\u30ec\u30fc\u30c8", 82 "Medium":"\u30c1\u30e7\u30b3\u30ec\u30fc\u30c8", 83 "Long":"\u98df\u54c1 > \u30b9\u30a4\u30fc\u30c4\u3001\u6d0b\u83d3\u5b50 > \u30c1\u30e7\u30b3\u30ec\u30fc\u30c8" 84 } 85 }, 86 "1":{ 87 ~ 88 }, 89 "_container":"Child" 90 } 91 } 92 } 93 } 94 } 95});

HTML

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <link rel="stylesheet" href="css/jquery.rateyo.min.css"> 6</head> 7<body> 8 <header> 9 <h1>【Yahoo】ランキングの結果を取得するツール</h1> 10 <p>ジャンルID:<input type="text" id="rank_area" value="4744"></p> 11 <button type="button" id="view_exe_button">結果表示</button> 12 <button type="button" id="csv_exe_button">csv DL</button> 13 </header> 14 15 <div id="result"> 16 <div id="rank_result"> 17 </div> 18 </div> 19 20 <hr> 21 <a style="display:none;" id="downloader" href="#"></a> 22 23 <script src="js/jquery.min.js"></script> 24 <script src="js/add.js"></script> 25 <script src="js/jquery.rateyo.min.js"></script> 26</body> 27</html>

試したこと

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

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

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

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

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

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":{ ~ }, のあたり、文法エラーですね。 省略しいているのかもしれませんが 最低限動くものを提示ください
guest

回答2

0

ベストアンサー

自己解決しました。

Yahoo!ショッピングAPIで取得した商品データ数を拾いたい
こちらの質問でResultSet[0].Result[i]直下より
更にネストされたデータへのパスが通っていることにヒントを得て、
eachをforに置き換えることでネストの値をエラーなく無事に取得することが出来ました。

勉強させていただき、ありがとうございました。

}, function(data){ var item = data.ResultSet[0]; var max = data.ResultSet.totalResultsReturned; $('div#rank_result').prepend('<h2>Yahooランキング結果  カテゴリID:'+genreId+'</h2>'); for(var i = 0; i < max; i++) { var temp = $(`<dl class="rank"><dd class="dd0">${item.Result[i]._attributes.rank}</dd> <dd class="dd1"><a href="${item.Result[i].Url}"><img src="${item.Result[i].Image.Medium}"></a></dd> <dd class="dd2">${item.Result[i].Name}</dd> <dd class="dd3" id="sterrank${item.Result[i]._attributes.rank}"></dd> <dd class="dd4">${item.Result[i].Review.Rate} (${item.Result[i].Review.Count}件)</dd> <dd class="dd5">${item.Result[i].Store.Name}</dd></dl>`); $('div#rank1').append(temp); // 評価を星にする $('#sterrank'+item.Result[i]._attributes.rank).rateYo({ starWidth: "20px", rating: item.Result[i].Review.Rate, halfStar: true, readOnly: true }); } //for

投稿2019/10/18 05:17

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

もしjsonpのコールバック関数がdata()なら
こんな処理になります

javascript

1$(function(){ 2 var url="'https://shopping.yahooapis.jp/ShoppingWebService/V1/json/categoryRanking"; 3 var ClientID="hoge"; 4 var genreID="fuga"; 5 $.ajax({ 6 url:url, 7 data:{ 8 appid: ClientID, 9 category_id: genreID, 10 period: "daily", 11 offset: "1", 12 }, 13 dataType:'jsonp', 14 jsonpCallback:'data', 15 }).done(function(res){ 16 console.log(res); 17 }).fail(function(xhr,err){ 18 console.log(err); 19 }); 20}); 21

投稿2019/10/18 02:21

yambejp

総合スコア114585

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問