Can't join together between geojson and json in leaflet

Question

Use this code to transmit information to the map:

function join(){            
    $.when(
        $.getJSON('bairro.json'),
        $.getJSON('convertJson.php')
    ).done(function(responseGeojson, responseData) {
        var data = responseData[0]
        var geojson = responseGeojson[0]

        // Create hash table for easy reference
        var dataHash = {}
        console.log('==data==');
        console.log(data);
        data.forEach(function(item) {
            if(item.cod) 
            dataHash[item.cod] = item.cod;
            if(item.nome) 
            dataHash[item.nome] = item.nome;
            if(item.local) 
            dataHash[item.local] = item.local;

        })
        // Add value from hash table to geojson properties
        geojson.features.forEach(function(item) {
            console.log('-->' + dataHash[item.properties.nome]);
            item.properties.Codigo = +dataHash[item.properties.cod]   || null
            item.properties.Nome   = +dataHash[item.properties.nome]  || null
            item.properties.Local  = +dataHash[item.properties.local] || null

        })

    })
}

But it returns undefined values and no image appears on the map.

Geojson looks like:

{"type": "FeatureCollection",
"features": [
{ "type": "Feature", "properties": { "NOME": "local1", "REGIAO_ADM": "value1", "CODBAIRRO": "13"}, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ 694555.509827277157456, 7483079.800010865554214 ], [ 694554.849827276892029, 7483077.34010686352849 ], [ 694551.869923274731264, 7483076.470026861876249 ],...}
{ "type": "Feature", "properties": { "NOME": "local2", "REGIAO_ADM": "value2", "CODBAIRRO": "13"}, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ 694555.509827277157456, 7483079.800010865554214 ], [ 694554.849827276892029, 7483077.34010686352849 ], [ 694551.869923274731264, 7483076.470026861876249 ],...}
{ "type": "Feature", "properties": { "NOME": "local3", "REGIAO_ADM": "value3", "CODBAIRRO": "13"}, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ 694555.509827277157456, 7483079.800010865554214 ], [ 694554.849827276892029, 7483077.34010686352849 ], [ 694551.869923274731264, 7483076.470026861876249 ],...}

JSON looks like:

[{ "cod": "13", "local": "local1", "nome": "value1" }, { "cod": "98", "local": "local2", "nome": "value2" }, { "cod": "97", "local": "local3", "nome": "value3" }]

Someone knows what I may be doing wrong can you help me?

Answer 1

You could take your array and use it to create a map so that you can lookup/dictionary values by an identifier (the key). The data structure you would be after would be:

From:

[{id:"A",property:"value1"},{id:"B",property:"value2"}, .... ]

To:

{A:{id:"A",property:"value1"},B:{id:"B",property:"value2"}, .... }

Now to find the properties of object A, we only need to access that property.

Currently you code doesn't keep an association between keys and values. It takes property values and creates an array with properties that have a value equal to the property name:

dataHash[item.cod] = item.cod;

If item.cod is equal to "foo", then then dataHash.foo == "foo". dataHash[item.cod] doesn't nest properties:

 var data = [{cod:1,nome:2,local:3},{cod:4,nome:5,local:6}] var dataHash = {}; data.forEach(function(item) { if(item.cod) dataHash[item.cod] = item.cod; if(item.nome) dataHash[item.nome] = item.nome; if(item.local) dataHash[item.local] = item.local; }) console.log(dataHash); 

There are many ways to accomplish what you want though, for your data, when you create your dictionary, the code could look something like (assuming no property names (not values) start with a number):

    var lookup = {};
    data.forEach(function(item) {
        if(item.id) {
          lookup[item.id] = {
            id: item.id,
            property1: item.property1,
            property2: item.property2,
            property3: item.property3
          }   
        }
      })

Though of course, if you want all the properties carried into the dictionary, you could use:

    var lookup = {};
    data.forEach(function(item) {
        if(item.id) {
          lookup[item.id] = item
        }
      })

This assumes no duplicate entries in your data

 var data = [ {id:"id1",property1:"text1",property2:"text2",property3:"text3"}, {id:"id2",property1:"textA",property2:"textB",property3:"textC"}]; var lookup = {}; data.forEach(function(item) { if(item.id) { lookup[item.id] = { id: item.id, property1: item.property1, property2: item.property2, property3: item.property3 } } }) console.log(lookup) 

Now all you have to do is look up the values you want to join to each element in the geojson:

  geojson.features.forEach(function(item) {
            if(lookup([item.properties.id])) {
                item.properties.joined = lookup[item.properties.id]
            }
        })

Because the geojson might have properties with the same name as the incoming data, we can place all the properties we are joining as a subproperty of joined.

For your data the whole operation might look like:

 var geojson = {"type": "FeatureCollection", "features": [ { "type": "Feature", "properties": { "NOME": "local1", "REGIAO_ADM": "value1", "CODBAIRRO": "13"}}, { "type": "Feature", "properties": { "NOME": "local2", "REGIAO_ADM": "value2", "CODBAIRRO": "13"}}, { "type": "Feature", "properties": { "NOME": "local3", "REGIAO_ADM": "value3", "CODBAIRRO": "13"}} ]} var data = [{ "cod": "13", "local": "local1", "nome": "value1" }, { "cod": "98", "local": "local2", "nome": "value2" }, { "cod": "97", "local": "local3", "nome": "value3" }] var lookup = {}; data.forEach(function(item) { if(item.local) { lookup[item.local] = item; } }) geojson.features.forEach(function(d) { if (lookup[d.properties.NOME]) { d.properties.joined = lookup[d.properties.NOME]; } }) console.log(geojson); 

The snippet assumes local (in the json) and NOME in the geojson are unique values that the join is to be performed with.