D3 V.4 — Compare Values From Multiple Datasets

(This is the reformulation of a question that I didn't ask in precise enough terms; my apologies for that). I have a data comparison problem. I have two datasets (much simplified h

Solution 1:

Have a look at your currentNodes array. There is no property called ab in it. That's a property of cat.continents instead.

Thus, if I correctly understand what you want, you can map the continents in currentNodes array:

var continentList = currentNodes.map(function(d) {
    return d.continent
}) 

And check if ab exists in that new array:

.text(function(d) {
    return continentList.indexOf(d.ab) > -1 ? d.ab : "not in list";
})

Here, I'm using a ternary operator and a string "not in list" for the false condition.

Here is the demo:

var cat = {
  continents: [{
    name: "Africa",
    ab: "AF",
    countries: [{
      name: "Egypt",
      ab: "Eg"
    }, {
      name: "Niger",
      ab: "Ng"
    }]
  }, {
    name: "America",
    ab: "AM",
    countries: [{
      name: "Brasil",
      ab: "Br"
    }, {
      name: "Canada",
      ab: "Ca"
    }, {
      name: "United States",
      ab: "Us"
    }, {
      name: "Venezuela",
      ab: "Vz"
    }]
  }, {
    name: "Asia",
    ab: "AS",
    countries: [{
      name: "Foo",
      ab: "Fo"
    }, {
      name: "Bar",
      ab: "Ba"
    }]
  }, {
    name: "Europe",
    ab: "EU",
    countries: [{
      name: "France",
      ab: "Fr"
    }, {
      name: "Germany",
      ab: "Ge"
    }, {
      name: "Greece",
      ab: "Gr"
    }, {
      name: "Italy",
      ab: "It"
    }, {
      name: "United Kingdom",
      ab: "Uk"
    }]
  }, {
    name: "Oceania",
    ab: "OC",
    countries: [{
      name: "Foo",
      ab: "Fo"
    }, {
      name: "Bar",
      ab: "Ba"
    }]
  }]
};

var currentNodes = [{
  name: "Japan",
  continent: "AS",
  country: "Jp",
  x: 200,
  y: 50
}, {
  name: "Italy",
  continent: "EU",
  country: "It",
  x: 50,
  y: 400
}, {
  name: "Bologna",
  continent: "EU",
  country: "It",
  x: 180,
  y: 100
}, {
  name: "Florence",
  continent: "EU",
  country: "It",
  x: 50,
  y: 200
}, {
  name: "Germany",
  continent: "EU",
  country: "Ge",
  x: 350,
  y: 430
}, {
  name: "Canada",
  continent: "AM",
  country: "Ca",
  x: 180,
  y: 400
}];

var continentList = currentNodes.map(function(d) {
  return d.continent
})

d3.select("body").selectAll(null)
  .data(cat.continents)
  .enter()
  .append('p')
  .text(function(d) {
    return continentList.indexOf(d.ab) > -1 ? d.ab : "not in list";
  })

<scriptsrc="//d3js.org/d3.v4.min.js"></script>

I suspect that you don't want to show the continents "not in list". In that case, the best idea is filtering the data array before binding the data to the elements (in the enter selection).

Solution 2:

In your second example, you are returning an array of objects, which you are hoping will have just one item. So you should use

return filteredNodes[0].ab

(Of course, you may get no matches or multiple matches if your datasets are not correctly filled, so may want to add some exceptions too)