從JSON文件中獲取特定信息

我正在編寫一個應用程序，要求用戶點擊某個位置，然後通過Google地圖將其引導至該位置。我有數千個以JSON格式存儲的位置。我希望能夠點擊位置的名稱，並讓應用程序從文件中拉出座標。到目前爲止我有這個代碼。從JSON文件中獲取特定信息

HTML

<body> 
    <h1>ECC Site Lookup</h1> 

    <div ng-controller="firstCtrl"> 
     <input type="text" ng-model="search" border="1" /> 
     <ul> 
     <li ng-repeat="site in SiteLocs |filter : search "> 
      <a href="http://maps.google.com/?q=" + {{site.Point.coordinates}}> {{site.name}} </a> 
     </li>" 
     <li ng-repeat="site in SiteLocs |filter : search "></li> 
     </ul> 
    </div> 
    </body>

我覺得有什麼不對，這是HREF部分。具體的{{site.Point.coordinates}}

這裏是我的JS代碼

(function() { 
    var app = angular.module('app', []); 

    app.controller('firstCtrl', function($scope) { 
$scope.SiteLocs = [{ 
     "name": "502 Nelson St, Greenville, MS 38701", 
     "visibility": "0", 
     "description": "502 Nelson St, Greenville, MS 38701", 
     "styleUrl": "#waypoint", 
     "Point": { 
      "coordinates": "-91.05636,33.415485,0" 
     } 

     }, { 
     "name": "242 Blackhawk Trace, Galena, IL 61036", 
     "visibility": "0", 
     "description": "242 Blackhawk Trace, Galena, IL 61036", 
     "styleUrl": "#waypoint", 
     "Point": { 
      "coordinates": "-90.319778,42.390862,0" 
     } 
     }, { 
     "name": "3747 Ocean Dr, Vero Beach, FL 32963", 
     "visibility": "0", 
     "description": "3747 Ocean Dr, Vero Beach, FL 32963", 
     "styleUrl": "#waypoint", 
     "Point": { 
      "coordinates": "-80.358248,27.659094,0" 
     }]; 
angular.forEach($scope.SiteLocs, function(location){ 


    // if last 2 characters in string are ",0" 
    var clength = location.Point.coordinates.length; 


    if (location.Point.coordinates.substring(clength-2,clength)===",0") 
    { 
     location.Point.coordinates = location.Point.coordinates.substring(0,clength-2); 

    } 

    }); 
    }); 
    }());

來源

2014-07-16 Ian Pennebaker

的問題是你是不是把座標中的href裏面，他們是在href的報價之外。

<a href="http://maps.google.com/?q=" + {{site.Point.coordinates}}>

應該

<a href="http://maps.google.com/?q={{site.Point.coordinates}}">

看樣子你試圖以連接HTML字符串內，除非是內部{{}}表達括號完成，這將無法正常工作。

<a href="{{'http://maps.google.com/?q=' + site.Point.coordinates}}">

來源

2014-07-16 14:09:59 charlietfl

這是部分錯誤。 [不要將{href'與{{}}但使用ng-href]（https://docs.angularjs.org/api/ng/directive/ngHref）一起使用。不要在括號中包含URI！ – Pak

謝謝，解決了不加載鏈接的問題。但我想弄清楚如何讓它加載一個座標。因爲{{site.Point。座標}}是幾千個不同的座標。 –

@Pak它在'ng-repeat'中不是問題，因爲直到它被編譯，元素才能存在 – charlietfl

，不要串聯和（通常）使用ng-href：

<a ng-href="http://maps.google.com/?q={{site.Point.coordinates}}">{{site.name}}</a>

採用了棱角分明的標記像{{thing}}在href屬性將使鏈接到錯誤的URL，如果用戶之前角點擊它有機會用其價值取代{{thing}}加價。

Relevant angularJS documentation

但是，這是事實，你不需要使用ng-href一個ng-repeat裏面，因爲它必須首先編制。您仍然可以在這裏使用href。

來源

2014-07-16 14:10:44 Pak

我不知道這是否是最好的解決方案，但我可能會使用一個包裝函數來代替模板中的原始{{site.Point.coordinates}}。

以「站點」作爲參數並返回座標。甚至可以讓它構建整個鏈接，這樣你就可以擁有控制器中的所有內容而不是視圖。

也不能你只是做

var clength = location.Point.coordinates.split[',']

然後

if(clength[clength.length-1] === '0')

，而不是所有的辛苦遵循的子串的東西？

來源

2014-07-16 14:10:54 Askdesigners

這應該適用於我遇到的另一個問題。謝謝！ –

如果你的項目中有lodash，你也可以使用它的.last（）方法來獲取數組中的最後一項。：）發現目標！ – Askdesigners

從JSON文件中獲取特定信息

回答

相關問題