Loading multiple datasets on start up

Hi there 😃

Currently following through the tutorial on vis academy. http://vis.academy/#/kepler.gl/2-load-data The tutorial is super clear and easy to follow through. However, I’m having trouble loading two sets of data in componentDidMount. This is what I have tried so far:

  componentDidMount() {
    // Use processCsvData helper to convert csv file into kepler.gl structure {fields, rows}
    const data = Processors.processCsvData(nycTrips);
    // Use processCsvData helper to convert csv file into kepler.gl structure {fields, rows}
    const data_ta = Processors.processCsvData(dummydata01);
    // Create dataset structure
    const dataset = {
      data,
      info: {
        // `info` property are optional, adding an `id` associate with this dataset makes it easier
        // to replace it later
        id: "my_data"
      }
    };
    // Creaing a second dataset
    const dataset_ta = {
      data_ta,
      info: {
        // `info` property are optional, adding an `id` associate with this dataset makes it easier
        // to replace it later
        id: "data_ta"
      }
    };
    // addDataToMap action to inject dataset into kepler.gl instance
    // I'm parsing them in as an array
    this.props.dispatch(addDataToMap({ datasets: [dataset,data_ta] }));
  }```

Is this the right approach or am I totally on the wrong path?

Thanks in advance for your help. 

@heshan0131 

[heshan0131]

I’m importing 2 datasets in a functional component, just dropping the code exampe if it helps.

import dataset_a from "data.json"
import dataset_b from "datab.json"

......
const dispatch = useDispatch();

  useEffect(() => {
    if (dataset_a) {
      dispatch(
        addDataToMap({
          datasets: [
            {
              info: {
                label: "dataset a",
                id: "data_a",
              },
              data: dataset_a,
            },
            {
              info: {
                label: "dataset b",
                id: "data_b",
              },
              data: dataset_b,
            },
          ],
          option: {
            centerMap: true,
            readOnly: false,
          },
        })
      );
    }
  }, [dispatch, dataset_a]);

the way you pass in datasets to addDataToMap is correct, looking at the above code, you should add dataset_a to your useEffect dependencies and check if (dataset_a, dataset_b)

[rozajay]

I think I have managed to achieve this through change componentDidMount() function here.

componentDidMount() {
    // Use processCsvData helper to convert csv file into kepler.gl structure {fields, rows}
    const data_ta = Processors.processCsvData(nycTrips);
    // Use processCsvData helper to convert csv file into kepler.gl structure {fields, rows}
    const data_m = Processors.processCsvData(dataset01);
    var data = data_ta;
    // Create dataset structure
    const dataset_t = {
      data,
      info: {
        // `info` property are optional, adding an `id` associate with this dataset makes it easier
        // to replace it later
        id: "my_data"
      }
    };
    data = data_m;
    // Create dataset structure
    const dataset_s = {
      data,
      info: {
        // `info` property are optional, adding an `id` associate with this dataset makes it easier
        // to replace it later
        id: "my_data_s"
      }
    };
    // addDataToMap action to inject dataset into kepler.gl instance
    // I'm parsing them in as an array
    this.props.dispatch(addDataToMap({ datasets: [dataset_s,dataset_t] }));

  }`