Parse JSON Tree - Jquery

Question

I have this JSON below, which I am trying to parse out the long and lat to google maps markers.

I am using the below code to do so, however I can't seem to traverse the tree correctly.

What is the correct way to do this?

<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>

Below is example JSON in a file at.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
}]

Dhiraj · Accepted Answer · 2015-03-16 05:58:54Z

3

json1 is an array so you have to do json1[0].response and entity is also an array.

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

This is how you access the data

longitude - data.vehicle.position.latitude

latitude - data.vehicle.position.longitude

and route_id - data.vehicle.trip.route_id

Here is a demo

edited Mar 16, 2015 at 5:58

answered Mar 16, 2015 at 5:52

Dhiraj

33.7k10 gold badges65 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2017-05-23 12:14:19Z

1

Well, you could use a recursive approach to generically search the entire tree (JSON find in JavaScript), or you could use your exact scenario to know where to look. If the former, see the link. If the latter, see below.

So you have an array with one object in it. Out of that one object, you need to get the .response.entity set of vehicle.positions. Create a callback to use in the array.

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);
});

And now you have a mapped array of objects with title and position in them. Map is part of the JavaScript API.

edited May 23, 2017 at 12:14

CommunityBot

11 silver badge

answered Mar 16, 2015 at 5:58

Travis J

82.6k43 gold badges213 silver badges280 bronze badges

Comments

Arun P Johny · Accepted Answer · 2015-03-16 05:53:15Z

0

The entity is an array as is the 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);
        });
    });
});

answered Mar 16, 2015 at 5:53

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Collectives™ on Stack Overflow

Parse JSON Tree - Jquery

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related