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

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

新規登録して質問してみよう
ただいま回答率
85.48%
Google API

Googleは多種多様なAPIを提供していて、その多くはウェブ開発者向けのAPIです。それらのAPIは消費者に人気なGoogleのサービス(Google Maps, Google Earth, AdSense, Adwords, Google Apps,YouTube等)に基づいています。

JavaScript

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

jQuery

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

Google マップ

Google Mapは、Google社がオンラインで提供している地図・ローカル検索サービスです。GIS(Geographic Information System:地理情報システム)の中の「WebGIS」に該当します。地図・航空写真・地形の表示方式があり、それぞれユーザーが縮尺を調整して表示させることができます。地域の情報サービスを検索する機能やルート検索の機能も搭載されています。

Q&A

0回答

727閲覧

Javascriptの繰り返し処理で複数のPlace IDから情報を取得・表示させたい

fkdy

総合スコア11

Google API

Googleは多種多様なAPIを提供していて、その多くはウェブ開発者向けのAPIです。それらのAPIは消費者に人気なGoogleのサービス(Google Maps, Google Earth, AdSense, Adwords, Google Apps,YouTube等)に基づいています。

JavaScript

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

jQuery

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

Google マップ

Google Mapは、Google社がオンラインで提供している地図・ローカル検索サービスです。GIS(Geographic Information System:地理情報システム)の中の「WebGIS」に該当します。地図・航空写真・地形の表示方式があり、それぞれユーザーが縮尺を調整して表示させることができます。地域の情報サービスを検索する機能やルート検索の機能も搭載されています。

0グッド

0クリップ

投稿2019/08/19 01:55

###実現したいこと
Javascriptの処理でGoogle APIを利用して、
複数店舗の口コミのレートを1枚のページに表示させたい

###困っていること
一番目のPlace IDしか取得できず、
1つめの店舗のレーティングが他の場所にも複数表示されてしまいます。

###どうしたいか
2店舗目、3店舗目のPlace IDも
同一ページで実行するJavascriptで取得して
1枚のページに複数の店舗のレートを表示させたいです。

###該当コード

html

1<div class="js_review_wrap" data-place-id="1店舗目のPlace ID"> 2 <!-- 口コミレート表示エリア --> 3 <section class="js_review_over4"></section> 4 <!-- 口コミレート表示エリア --> 5</div> 6 7<div class="js_review_wrap" data-place-id="2店舗目のPlace ID"> 8 <!-- 口コミレート表示エリア --> 9 <section class="js_review_over4"></section> 10 <!-- 口コミレート表示エリア --> 11</div> 12 13<div class="js_review_wrap" data-place-id="3店舗目のPlace ID"> 14 <!-- 口コミレート表示エリア --> 15 <section class="js_review_over4"></section> 16 <!-- 口コミレート表示エリア --> 17</div> 18 19<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script> 20<script src="rating.js"></script>

Javascript

1jQuery(function($){ 2 const API_KEY = '自分のAPI KEY'; 3 4 $.getScript('https://maps.google.com/maps/api/js?key=' + API_KEY + '&libraries=places', function(){ 5 const service = new google.maps.places.PlacesService(document.createElement('div')); 6 7 // 全レビュー格納所 8 const allReview = []; 9 // プレイスIDを持つラッパー 10 const $review_wrap = $(".js_review_wrap"); 11 // 全レビュー出力場所 12 const $review_all = $(".js_review_all"); 13 // ☆4以上のレビュー出力場所 14 const $review_over4 = $(".js_review_over4"); 15 16 service.getDetails({ 17 // プレイスIDは投稿を想定しているためHTMLから取得 18 placeId: $review_wrap.data('place-id'), 19 fields: ['review'] 20 }, function(place, status) { 21 if (status == google.maps.places.PlacesServiceStatus.OK) { 22 $.each(place.reviews, function(){ 23 24 // レビューの氏名・レートを取得し格納 25 const reviewObj = {}; 26 reviewObj['name'] = this.author_name; 27 reviewObj['rate'] = this.rating; 28 29 // 全レビュー格納所へin 30 allReview.push(reviewObj); 31 }); 32 } 33 34 // 全クチコミを回す 35 for (const key in allReview) { 36 // 全クチコミ格納dl 37 const $dl = $('<dl class="list-review-output" data-rate="' + allReview[key].rate + '" />'); 38 // ☆4以上の口コミ格納dl 39 const $dl_rate_over4 = $('<div class="list-review-output" />'); 40 41 // レートが☆4以上なら 42 if (allReview[key].rate >= 4) { 43          $dl_rate_over4.append('<div class="namae">' + allReview[key].name + ' さん</div>'); 44 $dl_rate_over4.append('<div class="rate" data-rate="' + allReview[key].rate + '"></div>'); 45 46          // ☆4以上用のdlへ入れる 47 $review_over4.append($dl_rate_over4); 48 } 49 50 $dl.append('<dd class="namae">' + allReview[key].name + '</dd>'); 51        $dl.append('<dd class="data">' + allReview[key].content + '</dd>'); 52 // 全クチコミ用格納dlにどんどん追加する 53 $review_all.append($dl); 54 } 55 }); 56 }); 57});

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

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

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

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

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

m.ts10806

2019/08/19 02:05

allReviewには全件入っているかどうか確認は取りましたか?
kei344

2019/08/19 06:26

https://teratail.com/questions/205242 こちらでされている内容と変わらないようですので、再度こちらでされることをお勧めします。(質問内容を消して編集されていますが、当該質問の回答は既に出ている回答以上ののものは望めないと思います)
fkdy

2019/08/19 06:28

確認できておりません! 初心者でして。。。どうやって確認するのでしょうか!
fkdy

2019/08/19 10:18

ありがとうございます! 確認したところ、Allreviewには一番初めの店舗の口コミ全件が格納されていました。 ここに全店舗分の口コミを格納するのでしょうか?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

アカウントをお持ちの方は

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問