Joining GeoJSON and JSON at client end for Choropleth Map in Leaflet

Question

This is not a duplicate of Merging/Joining GeoJSON and JSON? because I need to join on client side.

I want to develop a choropleth map. I am using the same tutorial of Leaflet. I am also using the same statesData provided in that tutorial. The problem is value. I am getting an API which providing me the value of states. The 2nd JSON is providing me the id of states and its corresponding value. I want to visualize the choropleth map using these instead of Density value given in the statesData.js file.

{"id":"01","value":130.36},{"id":"02","value":125.36},{"id":"03","value":525.36}

How can I put this value to obtain a choropleth map instead of using density that showed in the tutorial?

Answer 1

Since GeoJSON is based on JSON, you are simply looking for joining two JSON objects. I think that this question is almost similar with yours and there are alternative solutions(pure js or using jQuery) .

Answer 2

Since there are not that many values the simplest solution would be to create lookup array for JSON data:

var array = [{"id":"01","value":130.36},{"id":"02","value":125.36},{"id":"03","value":525.36}];
var lookup = {};
for (var i = 0, len = array.length; i < len; i++) {
    lookup[array[i].id] = array[i];
}

Now you can get value for some lookup_id where you need it by simple object reference:

desired_value = lookup[lookup_id].value;