How do I merge two json objects in javascript/jquery?

Question

I have a data set that looks like this:

{
"Stops": [
    {
        "Name": "COLUMBIA RD NW + MINTWOOD PL NW",
        "Routes": [
            "42",
            "43",
            "H1",
            "L2"
        ]
    }
]

}

And another that looks like this:

{
"Predictions": [
    {
        "DirectionText": "North to Mt Pleasant Via Adams Morgan",
        "Minutes": 7,
        "RouteID": "42"
    },
    {
        "DirectionText": "North to Mt Pleasant Via Adams Morgan",
        "Minutes": 25,
        "RouteID": "42"
    },
    {
        "DirectionText": "North to Chevy Chase Circle",
        "Minutes": 32,
        "RouteID": "L2"
    },
    {
        "DirectionText": "North to Mt Pleasant Via Adams Morgan",
        "Minutes": 36,
        "RouteID": "42"
    },
    {
        "DirectionText": "North to Mt Pleasant Via Adams Morgan",
        "Minutes": 58,
        "RouteID": "42"
    },
    {
        "DirectionText": "North to Mt Pleasant Via Adams Morgan",
        "Minutes": 69,
        "RouteID": "42",
    }
],
"StopName": "Columbia Rd Nw + Mintwood Pl Nw"

}

I'd like to combine the data on the Route ID in the first set, to add specifically the minutes to set. So the output would be something like:

{
"Stops": [
    {
        "Name": "COLUMBIA RD NW + MINTWOOD PL NW",
        "Routes": [
            {
                "42": [
                    {
                        "Minutes": [7, 25,36,58,69]
                    }
                ],
                "43": [
                    {
                        "Minutes": []
                    }
                ],
                "H1":[ 
                    {
                        "Minutes": []
                    }
                ],
                "L2": [
                    {
                        "Minutes": [32]
                    }
                ]
            }
        ],
        "StopID": "1001779"
    }
]
}

I'm stuck with how to write some javascript/jquery that will do this merge. Any ideas?

@adeneo I doubt that `$.extend()` will do the job. `for` loop is a right way here I guess. — VisioN, Jan 13 '13 at 21:06
Where do yo have the data sets? If it's JSON then you need to read them in somehow, and parse them into Javascript object. Do you need the result as a Javascript object, or as JSON? — Guffa, Jan 13 '13 at 21:12
I'll guess something like this [**FIDDLE**](http://jsfiddle.net/adeneo/zVTc4/) should do it? — adeneo, Jan 13 '13 at 21:21
possible duplicate of [How can I merge properties of two JavaScript objects dynamically?](http://stackoverflow.com/questions/171251/how-can-i-merge-properties-of-two-javascript-objects-dynamically) — asgoth, Jan 13 '13 at 21:34

Vlad Lyga · Accepted Answer · 2013-01-13T22:08:30.733

Please, here is the updated code, with empty arrays and everything. It is in plain javascript so no library needed. Its jut a crude example I know, but it works and I hope it will help you to find your way.Later you can refine it.

var 

    stops = {
        "Stops": [
            {
                "Lat": 38.92092,
                "Lon": -77.043684,
                "Name": "COLUMBIA RD NW + MINTWOOD PL NW",
                "Routes": [
                    "42",
                    "43",
                    "H1",
                    "L2"
                ],
                "StopID": "1001779"
            }
        ]
    },

    predictions = {
        "Predictions": [
            {
                "DirectionNum": "1",
                "DirectionText": "North to Mt Pleasant Via Adams Morgan",
                "Minutes": 7,
                "RouteID": "42",
                "VehicleID": "7136"
            },
            {
                "DirectionNum": "1",
                "DirectionText": "North to Mt Pleasant Via Adams Morgan",
                "Minutes": 25,
                "RouteID": "42",
                "VehicleID": "7103"
            },
            {
                "DirectionNum": "0",
                "DirectionText": "North to Chevy Chase Circle",
                "Minutes": 32,
                "RouteID": "L2",
                "VehicleID": "2207"
            },
            {
                "DirectionNum": "1",
                "DirectionText": "North to Mt Pleasant Via Adams Morgan",
                "Minutes": 36,
                "RouteID": "42",
                "VehicleID": "7132"
            },
            {
                "DirectionNum": "1",
                "DirectionText": "North to Mt Pleasant Via Adams Morgan",
                "Minutes": 58,
                "RouteID": "42",
                "VehicleID": "7111"
            },
            {
                "DirectionNum": "1",
                "DirectionText": "North to Mt Pleasant Via Adams Morgan",
                "Minutes": 69,
                "RouteID": "42",
                "VehicleID": "7135"
            }
        ],
        "StopName": "Columbia Rd Nw + Mintwood Pl Nw"
    };

    var routeTimes = {};
    for (var index in predictions.Predictions) {
        if(!routeTimes.hasOwnProperty(predictions.Predictions[index].RouteID)) {
            routeTimes[predictions.Predictions[index].RouteID] = [];
            routeTimes[predictions.Predictions[index].RouteID].push(predictions.Predictions[index].Minutes);
        } else {
            routeTimes[predictions.Predictions[index].RouteID].push(predictions.Predictions[index].Minutes);
        }
    }

    var 
        routes = stops.Stops[0].Routes,
        routesVsMinutes = {};

    for(var i in routes) {
        if (!routesVsMinutes.hasOwnProperty(routes[i])) {
            routesVsMinutes[routes[i]] = {Minutes: []};
        } 
        if (routeTimes[routes[i]]) {
            routesVsMinutes[routes[i]].Minutes = routeTimes[routes[i]];
        }
    }      
    stops.Stops[0].Routes = routesVsMinutes;

    console.log(stops);

Thanks Vlad, this is really close! Now the next trick is to add blank arrays for routes that don't have predictions in routeTimes — Jason Rosenbaum, Jan 13 '13 at 21:36
@JasonRosenbaum I've edited my answer with updated code example. Check it out. — Vlad Lyga, Jan 13 '13 at 22:09
Yeah, looking good! Thanks so much, this has given the project a jump start. — Jason Rosenbaum, Jan 13 '13 at 23:55
Vlad, my app launched today and I wanted to say thanks! I've used and edited your code, and I credited you in the source. Some more details: http://j-ro.github.com/WheresTheBusDC/ — Jason Rosenbaum, Feb 06 '13 at 14:32
@JasonRosenbaum Wow, Thank you! This is very exciting. Good luck to you, really glad I could help. — Vlad Lyga, Feb 06 '13 at 21:37

Christopher Chiche · Answer 2 · 2013-01-13T21:50:00.890

0

You can use jQuery map:

json1.Stops.routes = $.map(json1.Stops[0].Routes, function(route){
  //Take all predictions which concern the route
  var availables = $.filter(json2.Predictions, function(prediction){
    return prediction.RouteID === route
  })
  //Extract all minutes
  var minutesArray = $.map(availables, function(available){
    return available.Minutes
  })
  // Return the object to put in "routes"
  return {"Minutes": minutesArray}
})

With:

json1 = {"Stops":[...]}
json2 = {"Predictions:[...]}

edited Jan 13 '13 at 21:50

answered Jan 13 '13 at 21:29

Christopher Chiche

15,075
9
59
98

1

you have an error you your code, Stops is an array so it really should be json1.Stops[0].Routes. Didn't test your code otherwise, but this just jumped on me. – Vlad Lyga Jan 13 '13 at 21:36
That's true! One can also do a map on the array to add other cases, but I will keep with the Stops[0] – Christopher Chiche Jan 13 '13 at 21:49

How do I merge two json objects in javascript/jquery?

2 Answers2