Array/Object JSON data.map is not a function D3.js v3

Question

I have a dynamic JSON data which changes the API could return a single object or an array of data, when the API returns a single object, I get an error on the loop and data map. But I tried not applying a forEach to data and get the data individually and store them it the data. I get an error of data.map is not a function. I have a bar graph and I want to display the data below.

 "City": {
    "Town": "Texas",
    "Number": "12"
  }

I have the code below which display the data which directs to the forEach and data.map. The code displays correctly if it returns a number of data.

  data.forEach((d) => {
       d.town = d.Town;
       d.number = +d.Number;
  }); 

  const xScale = d3.scale.ordinal()
            .domain(data.map(d => d.town))
            .rangeRoundBands([0, width], 0.1);

  const yScale = d3.scale.linear()
            .domain([0, d3.max(data, d => d.number)])
            .range([height, 0]);

How can I be able to handle dynamic data within my graph whether the API return a single or multiple values or data?

You can use Array.isArray() to test the value before trying to use .map() — Pointy
– Pointy, Commented Jul 14, 2019 at 13:25
@Pointy after checking with the Array.isArray(), what can i use in replace of .map() ? — John
– John, Commented Jul 14, 2019 at 21:50
If it's not an array, then it's just a single object and you can directly access data.town. — Pointy
– Pointy, Commented Jul 14, 2019 at 21:59

Zaenal Arifin · Accepted Answer · 2019-07-14 13:33:31Z

1

Objects, {}, in JavaScript does not have the method .map(), it's only for Arrays, [].

So in order for your code to work change data.map() to data.city.map() since City is an array which you can iterate upon.

answered Jul 14, 2019 at 13:33

Zaenal Arifin

262 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

John Over a year ago

what if the data contained only { "Town": "Texas", "Number": "12" }

Zaenal Arifin Over a year ago

you can directly return them; var data = {"Town":"Texas", "Number":"12"}; document.getElementById("demo").innerHTML = data["Town"];

Collectives™ on Stack Overflow

Array/Object JSON data.map is not a function D3.js v3

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related