topojson/d3.js: Uncaught (in promise) TypeError: Cannot read property 'type' of undefined

Question

I am trying to develop freeCodeCamp's fourth project from the Data Visualization Certification, the choropleth map. This is what I have written:

const promisses = [d3.json('https://raw.githubusercontent.com/no-stack-dub-sack/testable-projects-fcc/master/src/data/choropleth_map/counties.json'), d3.json('https://raw.githubusercontent.com/no-stack-dub-sack/testable-projects-fcc/master/src/data/choropleth_map/for_user_education.json')];

Promise.all(promisses).then((d)=>{return processData(d)});

function processData(data) {
  for (let i = 0; i < data.length; i++) {
    //console.log(JSON.stringify(data[i]));
  }
  
  let w = 800;
  let h = 0.6 * w;
  let padding = 40;
  
  let svg = d3.select('#chart-bg').append('svg');
  
  svg.attr('width', w + 2 * padding)
    .attr('height', h + 2 * padding)
    .attr('id','map')
  
  console.log(JSON.stringify(data[0].objects.counties));
  
  //The next line is where I am having trouble
  let counties = topojson.feature(data[0].objects.counties);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/3.0.2/topojson.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

Until the last line there have been no troubles, but then it says "Uncaught (in promise) TypeError: Cannot read property 'type' of undefined". Does anybody have an idea why this is happening? data[0].objects.counties is logging normally.

EDIT: data[0].objects.counties has a 'type' property and a 'geometries' property.

Answer 1

topojson.feature takes two parameters, as seen in the topojson doc's:

topojson.feature(topology, object);

You have only specified the objects you wish to extract:

 let counties = topojson.feature(data[0].objects.counties);

The error likely derives from the lack of a second parameter: type is undefined for the second parameter since the second parameter is not defined.

Using both parameters, you can extract your features without error using both parameters below:

let counties = topojson.feature(data[0], data[0].objects.counties);

const promisses = [d3.json('https://raw.githubusercontent.com/no-stack-dub-sack/testable-projects-fcc/master/src/data/choropleth_map/counties.json'), d3.json('https://raw.githubusercontent.com/no-stack-dub-sack/testable-projects-fcc/master/src/data/choropleth_map/for_user_education.json')];

Promise.all(promisses).then((d)=>{return processData(d)});

function processData(data) {
  for (let i = 0; i < data.length; i++) {
    //console.log(JSON.stringify(data[i]));
  }
  
  let w = 800;
  let h = 0.6 * w;
  let padding = 40;
  
  let svg = d3.select('#chart-bg').append('svg');
  
  svg.attr('width', w + 2 * padding)
    .attr('height', h + 2 * padding)
    .attr('id','map')
  
  
  //The next line is where I am having trouble
  let counties = topojson.feature(data[0], data[0].objects.counties);
  console.log(JSON.stringify(counties));
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/3.0.2/topojson.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>