0

Is there a difference in JS Array of Objects between the two console outputs? The first one shows a list of ellipses which contains all 7 objects. In the second, it shows an empty list but when I expand, all 7 javascript objects are there.

I also ran the Array.isArray on both and the results were 'True' for both.

The first one is a copy/paste from the code example from Recharts where the 'data' is provided locally as an array of objects. With this, the graph displays.

This is the data they provided:

export const data = [
{
  name: "Page A",
  uv: 4000,
  pv: 2400,
  amt: 2400,
},
{
  name: "Page B",
  uv: 3000,
  pv: 1398,
  amt: 2210,
},
{
  name: "Page C",
  uv: 2000,
  pv: 9800,
  amt: 2290,
},
{
  name: "Page D",
  uv: 2780,
  pv: 3908,
  amt: 2000,
},
{
  name: "Page E",
  uv: 1890,
  pv: 4800,
  amt: 2181,
},
{
  name: "Page F",
  uv: 2390,
  pv: 3800,
  amt: 2500,
},
{
  name: "Page G",
  uv: 3490,
  pv: 4300,
  amt: 2100,
},
];

I substituted the local 'data' variable with csv format and transformed to the desired array required for Recharts. However, the graph doesn't display.

Here is the csv format: name,uv,pv,amt "Page A",4000,2400,2400 "Page B",3000,1398,2210 "Page C",2000,9800,2290 "Page D",2780,3908,2000 "Page E",1890,4800,2181 "Page F",2390,3800,2500 "Page G",3490,4300,2100

This is the code to transform to the array of objects:

import React, { useEffect } from "react";
import { csv } from "d3";

const csvSimpleLineChartUrl =
   "https://gist.githubusercontent.com/ny2cali/bda7d4c7039300ee06e85ad8ccdc59a6/raw/SimpleLineChartData.csv";

export const useData = () => {
let data2 = [];
useEffect(() => {
  const row = (d) => {
    let data = {
      name: d.name,
      uv: +d.uv,
      pv: +d.pv,
      amt: +d.amt,
    };
  data2.push(data);
  return data;
};

csv(csvSimpleLineChartUrl, row);
}, []);
return data2;};
Orlyyn
  • 2,296
  • 2
  • 20
  • 32
ny2cali
  • 1
  • 3
  • There's no `console.log()` in your example. And the obvious answer to _"Is there a difference..."_ is yes, as you already explained with _"The first one shows a list of ellipses which contains all 7 objects. In the second, it shows an empty list..."_ – Andreas Mar 27 '21 at 08:24
  • 1
    [Is Chrome's JavaScript console lazy about evaluating arrays?](https://stackoverflow.com/questions/4057440/is-chromes-javascript-console-lazy-about-evaluating-arrays) – Andreas Mar 27 '21 at 08:25
  • Sorry about that Andreas. I just edited my post and included the link to the Console Output. – ny2cali Apr 01 '21 at 23:25

0 Answers0