Question 248651 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Structuring data correctly in a local file

I’m working on a data file for a mock up. I have a cityData object with cities inside of it. Unfortunately I have set them up to read as arrays incorrectly. So now when I call the data into the ‘city’ UI file it’s not found. Actually looks like each item has 4 arrays inside of them. My goal is to call in cityData and filter through to match the city name to the routh path name.

City UI file.

import { useRouter } from "next/router";
import { cityData } from "../api/dummydata";

export default function service() {
  const router = useRouter()
  const city = router.asPath.replace("/", "").replace("%20", " ")
  const data = cityData
  //also tried   const data = cityData.Object.keys(city) - This will tell me 
  Object does not exist type// 

  return ()
}

cityData returns as such:

 Object 
   austin: (4) [{…}, {…}, {…}, {…}]
   dallas: (4) [{…}, {…}, {…}, {…}]
   el_paso: (4) [{…}, {…}, {…}, {…}]
   galveston: (4) [{…}, {…}, {…}, {…}]
   houston: (4) [{…}, {…}, {…}, {…}]
   san_antonio: (4) [{…}, {…}, {…}, {…}]

Data file:

export const cityData = {
    austin: [
      {details:""},
      {sights: []},
      {more_details:""},
      {image: ""}
    ],
    dallas: [
      {details:""},
      {sights: []},
      {more_details:""},
      {image:"../assets/dallas.jpg"}
    ],
    el_paso: [ 
      {details:""},
      {sights: []},
      {more_details:""},
      {image:"../assets/el-paso-texas.jpg"}
    ],
    galveston:  [
      {details:""},
      {sights: []},
      {more_details:""},
      {image:"../assets/galveston-island.jpg"}
    ],
    houston: [
      {details:""},
      {sights: []},
      {more_details:""},
      {image:"../assets/houston.jpg"}
    ],
    san_antonio: [
      {details:""},
      {sights: []},
      {more_details:""},
      {image:"../assets/san_antonio.jpg"}
    ],
  }

How can I structure cityData correctly so that I can filter cityData.filter((x) => x.name = city) or bring back the Object.keys()

Tags:

2

Answers


  1. 0

    It seems what you want is for it to be an array of objects rather than object of objects, so from:

    const cityData = {
    austin: [
      {details:""},
      {sights: []},
      {more_details:""},
      {image: ""}
    ],
    ...
}

    to:

    const cityData = [
  { 
    name: austin,
    data: [
      {details:""},
      {sights: []},
      {more_details:""},
      {image: ""}
    ],
  },
  ...
]

    To do that, you can iterate over the keys as you have tried:

    
const cityDataAsArray = Object.keys(cityData).map((key) => {
  const data = cityData[key];
  const item = {
    name: key,
    data: data,
  };
  return item;
});

    Stackblitz link

    Login or Signup to reply.
  2. 0 
    const newData = Object.entries(data).map(([key, value]) => {
  const obj = {}
  obj.name = key;
  value.forEach(item => Object.assign(obj, item))
  return obj
})
/*
newData = [
  {
     name: "austin",
     details:"",
     sights: [],
     more_details:"",
     image: ""
  }, 
  ...
]
*/
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search