解析JSON Google Place数据时遇到问题

时间:2019-01-23 11:57:47

标签: jquery json google-maps-api-3

我正在尝试从Google获得某地方的评分。我正在通过placeID进行JSON请求,请求字段名称和等级。当我在浏览器中查看JSON URL时,看到以下数据:

{
   "html_attributions" : [],
   "result" : {
      "name" : "Coffeetots Play Café",
      "rating" : 4.7
   },
   "status" : "OK"
}

尝试在JavaScript / jQuery中将“评分”字段另存为变量或在页面上显示时,我陷入了困境。我的代码在下面(删除了我的API密钥),我假设我不需要一个“每个”循环,因为只有一个地方,但是我没有找到其他方法。

<div id="results"></div>

<script type="text/javascript">
$.getJSON("https://maps.googleapis.com/maps/api/place/details/json?placeid=ChIJgRUw-0_dekgRWCHhui-rPBg&fields=name,rating&key=XXX", function(json){
  $.each(json.results, function(i, place){
    myRating = place.rating;
    $("#results").append('<p>'+myRating+'</p>');
  });
});
</script>

任何帮助将不胜感激!

2 个答案:

答案 0 :(得分:1)

根据问题中提供的JSON,您应该使用json.result而不是json.results

{
   "html_attributions" : [],
   "result" : {
      "name" : "Coffeetots Play Café",
      "rating" : 4.7
   },
   "status" : "OK"
}

答案 1 :(得分:1)

查看示例结果,您得到的数组看起来与示例不一样。

这可以通过以下Google示例进行操作:https://developers.google.com/places/web-service/search

var json = {
   "html_attributions" : [],
   "next_page_token" : "CpQCAgEAAFxg8o-eU7_uKn7Yqjana-HQIx1hr5BrT4zBaEko29ANsXtp9mrqN0yrKWhf-y2PUpHRLQb1GT-mtxNcXou8TwkXhi1Jbk-ReY7oulyuvKSQrw1lgJElggGlo0d6indiH1U-tDwquw4tU_UXoQ_sj8OBo8XBUuWjuuFShqmLMP-0W59Vr6CaXdLrF8M3wFR4dUUhSf5UC4QCLaOMVP92lyh0OdtF_m_9Dt7lz-Wniod9zDrHeDsz_by570K3jL1VuDKTl_U1cJ0mzz_zDHGfOUf7VU1kVIs1WnM9SGvnm8YZURLTtMLMWx8-doGUE56Af_VfKjGDYW361OOIj9GmkyCFtaoCmTMIr5kgyeUSnB-IEhDlzujVrV6O9Mt7N4DagR6RGhT3g1viYLS4kO5YindU6dm3GIof1Q",
   "results" : [
      {
         "geometry" : {
            "location" : {
               "lat" : -33.867217,
               "lng" : 151.195939
            }
         },
         "icon" : "http://maps.gstatic.com/mapfiles/place_api/icons/cafe-71.png",
         "id" : "7eaf747a3f6dc078868cd65efc8d3bc62fff77d7",
         "name" : "Biaggio Cafe - Pyrmont",
         "opening_hours" : {
            "open_now" : true
         },
         "photos" : [
            {
               "height" : 600,
               "html_attributions" : [],
               "photo_reference" : "CnRnAAAAmWmj0BqA0Jorm1_vjAvx1n6c7ZNBxyY-U9x99-oNyOxvMjDlo2npJzyIq7c3EK1YyoNXdMFDcRPzwLJtBzXAwCUFDGo_RtLRGBPJTA2CoerPdC5yvT2SjfDwH4bFf5MrznB0_YWa4Y2Qo7ABtAxgeBIQv46sGBwVNJQDI36Wd3PFYBoUTlVXa0wn-zRITjGp0zLEBh8oIBE",
               "width" : 900
            }
         ],
         "place_id" : "ChIJIfBAsjeuEmsRdgu9Pl1Ps48",
         "scope" : "GOOGLE",
         "price_level" : 1,
         "rating" : 3.4,
         "reference" : "CoQBeAAAAGu0wNJjuZ40DMrRe3mpn7fhlfIK1mf_ce5hgkhfM79u-lqy0G2mnmcueTq2JGWu9wsgS1ctZDHTY_pcqFFJyQNV2P-kdhoRIeYRHeDfbWtIwr3RgFf2zzFBXHgNjSq-PSzX_OU6OT2_3dzdhhpV-bPezomtrarW4DsGl9uh773yEhDJT6R3V8Fyvl_xeE761DTCGhT1jJ3floFI5_c-bHgGLVwH1g-cbQ",
         "types" : [ "cafe", "bar", "restaurant", "food", "establishment" ],
         "vicinity" : "48 Pirrama Rd, Pyrmont"
      },
      {
         "geometry" : {
            "location" : {
               "lat" : -33.866786,
               "lng" : 151.195633
            }
         },
         "icon" : "http://maps.gstatic.com/mapfiles/place_api/icons/generic_business-71.png",
         "id" : "3ef986cd56bb3408bc1cf394f3dad9657c1d30f6",
         "name" : "Doltone House",
         "photos" : [
            {
               "height" : 1260,
               "html_attributions" : [ "From a Google User" ],
               "photo_reference" : "CnRwAAAAeM-aLqAm573T44qnNe8bGMkr_BOh1MOVQaA9CCggqtTwuGD1rjsviMyueX_G4-mabgH41Vpr8L27sh-VfZZ8TNCI4FyBiGk0P4fPxjb5Z1LrBZScYzM1glRxR-YjeHd2PWVEqB9cKZB349QqQveJLRIQYKq2PNlOM0toJocR5b_oYRoUYIipdBjMfdUyJN4MZUmhCsTMQwg",
               "width" : 1890
            }
         ],
         "place_id" : "ChIJ5xQ7szeuEmsRs6Kj7YFZE9k",
         "scope" : "GOOGLE",
         "reference" : "CnRvAAAA22k1PAGyDxAgHZk6ErHh_h_mLUK_8XNFLvixPJHXRbCzg-gw1ZxdqUwA_8EseDuEZKolBs82orIQH4m6-afDZV9VcpggokHD9x7HdMi9TnJDmGb9Bdh8f-Od4DK0fASNBL7Me3CsAWkUMWhlNQNYExIQ05W7VbxDTQe2Kh9TiL840hoUZfiO0q2HgDHSUyRdvTQx5Rs2SBU",
         "types" : [ "food", "establishment" ],
         "vicinity" : "48 Pirrama Rd, Pyrmont"
      }
   ],
   "status" : "OK"
}

 $.each(json.results, function(i, place){
    myRating = place.rating || "not rated"
    $("#results").append('<p>'+i+':'+' '+place.name+' '+myRating+'</p>');
  });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="results"></div>

如果您通过ID拨打电话,则根据https://developers.google.com/places/web-service/place-id

var json =     {
      "html_attributions" : [],
      "results" : [
        {
          "geometry" : {
            "location" : {
              "lat" : -33.870775,
              "lng" : 151.199025
            }
          },
          "place_id" : "ChIJrTLr-GyuEmsRBfy61i59si0",
          "name": "Somewhere",
          "rating": 4.5
        }
      ],
      "status" : "OK"
    }


 $.each(json.results, function(i, place){
    myRating = place.rating || "not rated"
    $("#results").append('<p>'+i+':'+' '+place.name+' '+myRating+'</p>');
  });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="results"></div>

如果您确实获得了所显示的对象,则不能使用每个对象:

var json =    {
   "html_attributions" : [],
   "result" : {
      "name" : "Coffeetots Play Café",
      "rating" : 4.7
   },
   "status" : "OK"
}


 myRating = json.result.rating || "not rated";
 $("#results").append('<p>'+json.result.name+' '+myRating+'</p>');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="results"></div>