Access json data based on dynamic route nextjs

Question

I have a json file that contains content for several different pages that are under a "service" category. I use dynamic routes in nextJS by having a file as "[serviceId].tsx", this routing works. However I have a json file where I want to use the [serviceId] provided in the route to access information.

I have the following code in my [serviceId].tsx file:


    const json = jsonFile.services  
    const router = useRouter()
    const serviceId = router.query.serviceId
  

  return (
      <div> 
        <ArticleWithPicture title={content.title} description={content.description}/>
    </div>
  )
}

My json file looks similar to this (ive edited it to be more clear for this example):


        {
            "serviceId":
                [
                    {
                        "service1": {
                        "id": "xx",
                        "title": "xxx",
                        "description": "xx",
                        "featuredCompany":
                            [
                                { "id": "1", 
                                   "name": "xxx",
                                   "companyPageURL": "/",
                                   "imagePath": "xxx",
                                   "description": "xxx",
                                   "additionalServices": {
                                   "service1": "xxx",
                                   "service2": "xxx"
                                },
                                   "instagramURL":"/",
                                   "twitterURL": "/" 
                                }
                            ]
                        }           
                    },
                    {
                        "service2": {
                        "id": "xxx",
                        "title": "xxx",
                        "description": "xxx",
                        "featuredCompany":
                            [
                                { "id": "1", 
                                   "name": "xxx",
                                   "companyPageURL": "/",
                                   "imagePath": "xxx",
                                   "description": "xxx",
                                   "additionalServices": {
                                   "service1": "xxx",
                                   "service2": "xx"
                                },
                                   "instagramURL":"/",
                                   "twitterURL": "/" 
                                }
                            ]
                        }           
                    }                   
                ]
        }

Basically, each Service has the content for each indiviual page. So I want to dynamically set for instance the title of my component "ArticleWithPicture" based on the corresponding title in my json file based on the serviceId that I get from router.query.serviceId. However when I try the following code:

<ArticleWithPicture title={json.{serviceId}.title}/>

I get error (this is due to how I use "{}" within a "{}", is there a way to do this better?

But I also cannot access it if I do eg:

const title = json.serviceId.title

or (what is what I actually want to do ie: query the json file based on my serviceId provided by "router.query.serviceId")

const title = json.{serviceId}.title

I guess something might be wrong with either my json file structure or how I try to access it. Any advice would be appreciated.

Thanks!

Regarding `json.{serviceId}.title`: I think you should do `json[serviceId].title` instead. Regarding whether the json structure is wrong: In your example, `"serviceId"` is a key name, not a variable, so you could access it with `json.serviceId` or `json["serviceId"]`. That said, maybe that's only misleading in your simplification, then I'ld ask you to provide correct example instead. Additionally, the json file starts with `"services"`, but I don't see you're navigating through this parent entry. — NotX, Dec 27 '22 at 11:02
Regarding the last: Did you mean to write `jsonFile.services` instead of `jsonFile.service`? — NotX, Dec 27 '22 at 11:08
@NotX thanks for your reply, I've edited my question to have my actual json (ive removed some content for clairty but the structure is the same now). I tried to access the title with json.[serviceId].title but I get the error: "identifier expected". If I try to log "json.serviceId" I get the two arrays that I have in my json file, but I want to access one specifically based on ServiceId from route — Tihi, Dec 27 '22 at 11:53
Ah, I think I understand what you're aiming for. You don't want `json[serviceId]` as I thought first, but you actually wanted to interpolate the service id in the same manner nextjs did. Then `json[serviceId]` won't help, because, this will try to access `json.service1` (as example). I think, what you're aiming for is not possible b/c it's some hardcoded fancy logic from `nextjs` and nothing which is available out-of-the-box at other places, so you have to go over the entries and find the matching one. If the structure of the json isn't fixed I'ld recommend you to change it for that. — NotX, Dec 27 '22 at 13:29

koolskateguy89 · Accepted Answer · 2022-12-28T08:47:03.503

I'm assuming the JSON you provided is your entire jsonFile. If the JSON you provided is just jsonFile.services, then change any uses of jsonFile to jsonFile.services and update the type.

The format of the JSON isn't great for your use case because there's a lot of unnecessary wrapping.

With your current JSON

Assuming you cannot modify the format of the JSON, you would have to find the service from the serviceId array:

function getService(json, serviceId) {
  return json.serviceId
    .find((serviceWrapper) => serviceWrapper[serviceId] !== undefined)
    ?.service;
}

A fully typed example:

type Service = {
  id: string
  title: string
  description: string
  // ...
};

// you don't have to use this, I just included it for clarity
type JsonFile = {
  serviceId: {
    [serviceId: string]: Service
  }[]
};

function getService(json: JsonFile, serviceId: string): Service | undefined {
  return json.serviceId
    .find((serviceWrapper) => serviceWrapper[serviceId] !== undefined)
    ?.service;
}

// declare const jsonFile: JsonFile;

export default function ServicePage() {
  const router = useRouter();
  const serviceId = router.query.serviceId as string;

  const content = getService(jsonFile, serviceId);

  if (!content) return (
    <div>
      {'Article doesn\'t exist.'}
    </div>
  );

  return (
    <div>
      <ArticleWithPicture title={content.title} description={content.description} />
    </div>
  );
}

With better JSON

An example JSON that would need less unwrapping is:

{
  "service1": {
    "id": "xx",
    "title": "xxx",
    // ...
  },
  "service2": {
    "id": "xxx",
    "title": "xxx",
    // ...
  }
}

type JsonFile = {
  [serviceId: string]: Service
}

Then you would be able to just do jsonFile[serviceId] or jsonFile.services[serviceId] to get a service.

Access json data based on dynamic route nextjs

1 Answers1

With your current JSON

With better JSON