react JS import Files and use specific one based on Condition-CodePudding

Im trying to show on a google map markers based on lat and lng from a json file.

I'm importing the files like that:

import * as crimeData from "../resources/newfile.json";
import * as aggAssault from "../resources/categories/AGG_ASSAULT.json";
import * as autoTheft from "../resources/categories/AUTO_THEFT.json";
import * as burglaryNonres from "../resources/categories/BURGLARY-NONRES.json";
import * as burglaryResidence from "../resources/categories/BURGLARY-RESIDENCE.json";
import * as homocide from "../resources/categories/HOMICIDE.json";
import * as larcenyFromVehicle from "../resources/categories/LARCENY-FROM_VEHICLE.json";
import * as larcenyNonVehicle from "../resources/categories/LARCENY-NON_VEHICLE.json";
import * as rape from "../resources/categories/RAPE.json";
import * as robberyCommercial from "../resources/categories/ROBBERY-COMMERCIAL.json";
import * as robberyPedestrian from "../resources/categories/ROBBERY-PEDESTRIAN.json";
import * as robberyResidence from "../resources/categories/ROBBERY-RESIDENCE.json";

each file is a category of crime.

when i use this it works:

function Map() {
            return (
            <>
            <GoogleMap 
            defaultZoom={10}
            defaultCenter= {{lat: 33.8547, lng: -84.38895}}
            >
                {crimeData.crimes.map((crime) => (
                    <Marker key={Math.random()} position = {{lat: parseFloat(crime.lat), lng: parseFloat(crime.long)}} />
                )
                )}
            </GoogleMap>
            </>
            );
        }

        const WrappedMap = withScriptjs(withGoogleMap(Map));

but I need to change crimeData to one of the other files based on a condition.

i have tried this:

const array= [aggAssault, autoTheft, burglaryNonres, burglaryResidence, homocide, larcenyFromVehicle, larcenyNonVehicle, rape, robberyCommercial, robberyPedestrian, robberyResidence ]

and replaced crimeDate with array[1] for example and I get an error. the error is a type error, i guess its not taking array[2] as an imported json file any idea on how to do it. Thank you.

CodePudding user response：

It's best to make crimeData state.

The basic idea...

interface CrimePoint {
  lat: number
  long: number
}

const crimes = [aggAssault, autoTheft, .. etc]

const [crimeData, setCrimeData] = useState<CrimePoint[]>(crimes[0])

handleSelect(index /* from somewhere */) => {setCrimeData(crimes[index])}

You will likely have to derive the index using somethign more complex, like...

const arrayByType = [
  {
    type: 'aggAssault'
    data: aggAssault
  },
  {
    type: 'autoTheft'
    data: autoTheft
  },
  
]

  // from an input or select
handleSelect(e) => {
  const toFind = e.target.value
  const found = arrayByType.find((el) => (el.type === toFind))
  setCrimeData(found.data)
}

or...

const crimesAsObj = {
  aggAssault,
  autoTheft,
  // etc.
}

const mapByType = new Map<string, CrimePoint[]>()
for (const [key, value] of Object.entries(crimesAsObj)) {
  mapByType.set(key, value)
}

  // from an input or select
handleSelect(e) => {
  const toFind = e.target.value 
  const data = mapByType.get(toFind)
  setCrimeData(data)
}