將JSON拆分為多個變量/一個數組

Question

我有這個JSON字符串：

"[{"lat":"42.021631","lng":"-93.624239"},{"lat":"19.112049","lng":"72.870234"}]"

我需要采用這種格式，以便能夠使用使用此格式的Google地圖進行繪制：

var flightPlanCoordinates = [
      {lat: 37.772, lng: -122.214},
      {lat: 21.291, lng: -157.821},
      {lat: -18.142, lng: 178.431},
      {lat: -27.467, lng: 153.027}
    ];

如何獲得此格式？ 使用Papa Parse導入CSV並刪除JSON文本中的引號后，我已經收到了字符串。 任何幫助將不勝感激。

Answer 1

JSON.parse(<json string variable>)將返回一個JS對象，您可以將其傳遞到Google地圖中。

但是：您的JSON無效： "[{lat:42.021631,lng:-93.624239},{lat:19.112049,lng:72.870234}]" 。 緯度和經度應用雙引號引起來。

Answer 2

您的字符串不是json格式，因此您首先將其轉換為json格式。

 let str = "[{lat:42.021631,lng:-93.624239},{lat:19.112049,lng:72.870234}]"; let jsonStr = str.replace(/(lat|lng)/g, '"' + "$1" + '"'); let json = JSON.parse(jsonStr); console.log(json); 

Answer 3

JSON.parse將JSON字符串轉換為javascript對象。 如果您保留引號，那么它是有效的JSON：

'[{"lat":42.021631,"lng":-93.624239},{"lat":19.112049,"lng":72.870234}]'

這將創建一條折線：

var path = JSON.parse('[{"lat":42.021631,"lng":-93.624239},{"lat":19.112049,"lng":72.870234}]');
console.log(path);
var polyline = new google.maps.Polyline({
  map: map,
  path: path
});

代碼段：

 function initialize() { var map = new google.maps.Map( document.getElementById("map_canvas"), { center: new google.maps.LatLng(0, 0), zoom: 1, mapTypeId: google.maps.MapTypeId.ROADMAP }); var path = JSON.parse('[{"lat":42.021631,"lng":-93.624239},{"lat":19.112049,"lng":72.870234}]'); var polyline = new google.maps.Polyline({ map: map, path: path }); } google.maps.event.addDomListener(window, "load", initialize); 

 html, body, #map_canvas { height: 100%; width: 100%; margin: 0px; padding: 0px } 

 <script src="https://maps.googleapis.com/maps/api/js"></script> <div id="map_canvas"></div> 

Answer 4

那不是有效的JSON。 如果字符串來自受信任的來源 ，則可以使用eval。

var result = eval([{lat:42.021631,lng:-93.624239},{lat:19.112049,lng:72.870234}])

將返回

[Object, Object]

Answer 5

最簡單的方法是評估。

var str = "[{lat:42.021631,lng:-93.624239},{lat:19.112049,lng:72.870234}]";
eval(str);

Answer 6

您應該嘗試保持報價...

x = "[{lat:42.021631,lng:-93.624239},{lat:19.112049,lng:0},{lat:42.112049,lng:0}]".split("},{");
var regex = /[+-]?\d+(\.\d+)?/g;

flightPlanCoordinates = [];
for (var i=0; i<x.length; i++) {
  coords = x[i].match(regex).map(function(v) { return parseFloat(v); });

  if (coords.length === 2) {
        flightPlanCoordinates.push({ "lat": coords[0], "lng": coords[1] });
  }
}

console.log(flightPlanCoordinates);

Kris Roofe的回答非常好。

Answer 7

考慮到問題的最新更新，此處的真正問題是JSON數據中的lat和lng值是字符串而不是數字。

換句話說，您的JSON數據如下所示（為清楚起見添加了空格）：

[
    { "lat": "42.021631", "lng": "-93.624239" },
    { "lat": "19.112049", "lng": "72.870234" }
]

它應該看起來像這樣：

[
    { "lat": 42.021631, "lng": -93.624239 },
    { "lat": 19.112049, "lng": 72.870234 }
]

解決此問題的最佳方法是更改​​服務器代碼以生成第二種格式，而不是第一種格式。 我無法提供詳細信息，因為我不知道您使用的是哪種服務器語言或庫。 但是，如果您可以讓服務器生成lat和lng值作為數字而不是字符串，那么一切都會變得更加容易。

如果無法做到這一點，解決方案就是不要亂用JSON文本，去掉引號或使用正則表達式將它們添加回去。 那只是在創建一個不需要且無濟於事的爛攤子。

相反，只需將lat和lng值轉換為所需的數字即可。

例如，如果您的JSON數組的第一個元素位於名為location的變量中，則您可能試圖像這樣創建一個LatLng對象：

var latlng = new google.maps.LatLng( location.lat, location.lng );

這可能不起作用，因為location.lat和location.lng是字符串，而不是數字。 但是您可以輕松地將它們轉換為數字：

var latlng = new google.maps.LatLng( +location.lat, +location.lng );

有幾種將字符串轉換為數字的方法，但是一元+運算符最簡潔。

+運算符如何工作？ 它不特定於Google Maps或LatLng對象或類似對象。 它只是一個JavaScript運算符。 如果將+運算符應用於已經是數字的東西，則它只會被忽略。 但是，如果將+應用於字符串 ，它將把它轉換為數字。

另外，您可以使用parseFloat函數：

var latlng = new google.maps.LatLng(
    parseFloat(location.lat),
    parseFloat(location.lng)
);

如果您發現它更清晰，那沒有什么錯，但是嘗試使用+運算符：一旦習慣了它，您可能會發現您喜歡它。

同樣，最好的解決方案是修復服務器代碼以生成正確的JSON數字，如上所示。

Answer 8

您需要將引號保留在JSON文本中並運行以下行：

var flightPlanCoordinates = JSON.parse('[{"lat":"42.021631","lng":"-93.624239"},{"lat":"19.112049","lng":"72.870234"}]')