解析 JSON 树 - Jquery

Question

我在下面有这个 JSON，我正在尝试将 long 和 lat 解析为谷歌地图标记。

我正在使用下面的代码来执行此操作，但是我似乎无法正确遍历树。

这样做的正确方法是什么？

<script type="text/javascript">
      $(document).ready(function() {
        $.getJSON("at.json", function(json1) {
          $.each(json1.response.entity.vehicle.position, function(key, data) {
            var latLng = new google.maps.LatLng(data.response.entity.vehicle.position.latitude, data.entity.vehicle.position.longitude); 
            console.log(latLng);
            // Creating a marker and putting it on the map
            var marker = new google.maps.Marker({
                position: latLng,
                title: data.route_id
            });
            marker.setMap(map);
          });
        });
      });
    </script>

以下是文件 at.json 中的示例 JSON。

[{
    "status": "OK",
    "response": {
        "header": {
            "gtfs_realtime_version": "1.0",
            "incrementality": 1,
            "timestamp": 1426482060.542
        },
        "entity": [
            {
                "id": "79ce9360-550d-0b94-b0a7-d55ac1740c76",
                "is_deleted": false,
                "vehicle": {
                    "trip": {
                        "trip_id": "0801RT670617001945833",
                        "route_id": "0801RT6706",
                        "schedule_relationship": 0
                    },
                    "vehicle": {
                        "id": "de6b502a9dc3755077de652004c74289118e33300e12fecc9e900fe5d705c08d"
                    },
                    "position": {
                        "latitude": -36.820696,
                        "longitude": 174.61268
                    },
                    "timestamp": 1426482029
                }
            },
            {
                "id": "3d977665-c24a-0824-dcc0-aa1b793f11ef",
                "is_deleted": false,
                "vehicle": {
                    "trip": {
                        "trip_id": "0804RT670916001550495",
                        "route_id": "0804RT6709",
                        "schedule_relationship": 0
                    },
                    "vehicle": {
                        "id": "9fd156f2ff9abe0f4d380eaa90c70448c043811e2bb2681a76e464e50ae76493"
                    },
                    "position": {
                        "latitude": -36.845409,
                        "longitude": 174.60794
                    },
                    "timestamp": 1426482030
                }
            },
            {
                "id": "3c8c2970-09dc-2b50-8a38-1a12f386f2c1",
                "is_deleted": false,
                "vehicle": {
                    "trip": {
                        "trip_id": "0812RT67341620834602",
                        "route_id": "0812RT6734",
                        "schedule_relationship": 0
                    },
                    "vehicle": {
                        "id": "ada6c294e315961c60f1f4dc50fa6805171f3d294e5fc3f1fc8a1c5410c5047b"
                    },
                    "position": {
                        "latitude": -36.853298,
                        "longitude": 174.6302
                    },
                    "timestamp": 1426482031
                }
            },
            {
                "id": "89207b4b-58cd-74e8-ca39-75f82bf9c766",
                "is_deleted": false,
                "vehicle": {
                    "trip": {
                        "trip_id": "0812RT67341620834602",
                        "route_id": "0812RT6734",
                        "schedule_relationship": 0
                    },
                    "vehicle": {
                        "id": "ada6c294e315961c60f1f4dc50fa6805171f3d294e5fc3f1fc8a1c5410c5047b"
                    },
                    "position": {
                        "latitude": -36.855498,
                        "longitude": 174.63012
                    },
                    "timestamp": 1426482031
                }
            },
            {
                "id": "dc8877c3-4406-9f38-15f7-713b9f6c01ac",
                "is_deleted": false,
                "vehicle": {
                    "trip": {
                        "trip_id": "0812RT67341620834602",
                        "route_id": "0812RT6734",
                        "schedule_relationship": 0
                    },
                    "vehicle": {
                        "id": "ada6c294e315961c60f1f4dc50fa6805171f3d294e5fc3f1fc8a1c5410c5047b"
                    },
                    "position": {
                        "latitude": -36.856993,
                        "longitude": 174.62904
                    },
                    "timestamp": 1426482031
                }
            },
            {
                "id": "e20411d6-4f72-a707-d0ce-31b778581cc2",
                "is_deleted": false,
                "vehicle": {
                    "trip": {
                        "trip_id": "0812RT67341700868987",
                        "route_id": "0812RT6734",
                        "schedule_relationship": 0
                    },
                    "vehicle": {
                        "id": "5533fddd4245c33f619f6f327e2041a021548598deb9a00d29ed896fedb53217"
                    },
                    "position": {
                        "latitude": -36.844015,
                        "longitude": 174.76557
                    },
                    "timestamp": 1426482031
                }
            },
            {
                "id": "b162042b-a0e8-9b8b-653d-20a579771dc0",
                "is_deleted": false,
                "vehicle": {
                    "trip": {
                        "trip_id": "0901RT671016152602930",
                        "route_id": "0901RT6710",
                        "schedule_relationship": 0
                    },
                    "vehicle": {
                        "id": "27e23aa8caece1157a3875304570b9dadb1faa150d8d37be2f36b5953bd0c313"
                    },
                    "position": {
                        "latitude": -36.870402,
                        "longitude": 174.66647
                    },
                    "timestamp": 1426482031
                }
            },
            {
                "id": "f52e08bf-ed22-1f42-b5af-6c1f77be072b",
                "is_deleted": false,
                "vehicle": {
                    "trip": {
                        "trip_id": "0902RT623615302334476",
                        "route_id": "0902RT6236",
                        "schedule_relationship": 0
                    },
                    "vehicle": {
                        "id": "d53c637e4603c449b9a28b9326cbd18c5a246da8cb09432d478e3c97356f843a"
                    },
                    "position": {
                        "latitude": -36.822909,
                        "longitude": 174.61944
                    },
                    "timestamp": 1426482031
                }
            },
            {
                "id": "a829aa60-a7bc-c124-1c81-e1bfee02d0a4",
                "is_deleted": false,
                "vehicle": {
                    "trip": {
                        "trip_id": "0902RT623615302334476",
                        "route_id": "0902RT6236",
                        "schedule_relationship": 0
                    },
                    "vehicle": {
                        "id": "d53c637e4603c449b9a28b9326cbd18c5a246da8cb09432d478e3c97356f843a"
                    },
                    "position": {
                        "latitude": -36.821887,
                        "longitude": 174.61732
                    },
                    "timestamp": 1426482031
                }
            },
            {
                "id": "48360944-8aeb-52a0-4dfb-dc74f7db95b2",
                "is_deleted": false,
                "vehicle": {
                    "trip": {
                        "trip_id": "0937RT64021625959211",
                        "route_id": "0937RT6402",
                        "schedule_relationship": 0
                    },
                    "vehicle": {
                        "id": "8b41636eb2f767facaf767b7bb69c4a95961cf15594e33dadee60e56e2d97fcb"
                    },
                    "position": {
                        "latitude": -36.821312,
                        "longitude": 174.62669
                    },
                    "timestamp": 1426482031
                }
            },
            {
                "id": "3af5c120-1632-5f4a-7f41-3137c2f2cc84",
                "is_deleted": false,
                "vehicle": {
                    "trip": {
                        "trip_id": "1002RT0780170037392",
                        "route_id": "1002RT0780",
                        "schedule_relationship": 0
                    },
                    "vehicle": {
                        "id": "c34b1ac8ffafa02c866ce8ff190542cc91707c69e33fc42df5e41d4af154cb5d"
                    },
                    "position": {
                        "latitude": -36.844256,
                        "longitude": 174.76685
                    },
                    "timestamp": 1426482031
                }
            }
        ]
    },
    "error": null
}]

Answer 1

json1 是一个数组，所以你必须这样做 json1[0].response 和 entity 也是一个数组。

$.each(json1[0].response.entity, function(key, data) {
   console.log(data.vehicle.position.latitude, data.vehicle.position.longitude);
});

这是您访问数据的方式

经度 - data.vehicle.position.latitude

纬度 - data.vehicle.position.longitude

和 route_id - data.vehicle.trip.route_id

这是demo

Answer 2

好吧，您可以使用递归方法来一般地搜索整个树 (JSON find in JavaScript)，或者您可以使用您的确切场景来知道在哪里查找。如果是前者，请查看链接。如果是后者，请参见下文。

所以你有一个包含一个对象的数组。从那个对象中，您需要获得.response.entity 的vehicle.positions 集。创建要在数组中使用的回调。

var mappedPositions = json1[0].response.entity.map(function(ent){
 return {
  title: ent.vehicle.trip.route_id;
  position: new google.maps.LatLng(ent.vehicle.position.latitude, ent.vehicle.position.longitude);
});

现在您有了一个映射的对象数组，其中包含标题和位置。 Map 是 JavaScript API 的一部分。

Answer 3

entity 和 json1 一样是一个数组

$(document).ready(function () {
    $.getJSON("at.json", function (json1) {
        $.each(json1[0].response.entity, function (key, data) {
            var position = data.vehicle.position;
            var latLng = new google.maps.LatLng(position.latitude, position.longitude);
            console.log(latLng);
            // Creating a marker and putting it on the map
            var marker = new google.maps.Marker({
                position: latLng,
                title: data.vehicle.route_id
            });
            marker.setMap(map);
        });
    });
});