Retrieving JSON information using dynamic routes in Next.js

Question

Retrieving JSON information using dynamic routes in Next.js

I am working with a json file that contains content for various pages categorized under "service". In my nextJS project, I utilize dynamic routes with a file named "[serviceId].tsx" for routing. This setup is functioning correctly. However, I am facing an issue where I need to access information from the json file using the [serviceId] provided in the route.

Here is the code snippet from 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 has a structure similar to this (edited for clarity in 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": "/" 
                                }
                            ]
                        }           
                    }                   
                ]
        }

Each Service in the json file corresponds to individual pages. My objective is to dynamically set the title of the "ArticleWithPicture" component based on the title in the json file that matches the serviceId obtained from "router.query.serviceId". However, the code snippet below results in an error:

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

This issue is due to nesting curly braces. Is there a better way to approach this?

Directly accessing the title like this also does not work:

const title = json.serviceId.title

My actual goal is to query the json file based on the serviceId provided by "router.query.serviceId" like this:

 const title = json.{serviceId}.title

It seems like there could be a problem either with my json file structure or my method of accessing it. Any guidance on this matter would be greatly appreciated.

Thank you!

json typescript next.js nextjs-dynamic-routing

Answer 1

Answer №1

It seems like the JSON you provided encompasses your entire jsonFile. If the JSON you provided only represents jsonFile.services, then you should substitute any instances of jsonFile with jsonFile.services and adjust the type accordingly.

The structure of the JSON may not be optimized for your particular scenario due to excessive nesting.

Considering your current JSON

If you are unable to alter the JSON format, you will need to locate the service within the serviceId array:

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

Here is a fully typed example:

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

// This is optional, provided 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 improved JSON

Here is an example of a JSON structure that requires less unwrapping:

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

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

With this structure, you can simply access the service using jsonFile[serviceId] or jsonFile.services[serviceId].

Answer 2

It seems like the JSON you provided encompasses your entire jsonFile. If the JSON you provided only represents jsonFile.services, then you should substitute any instances of jsonFile with jsonFile.services and adjust the type accordingly.

The structure of the JSON may not be optimized for your particular scenario due to excessive nesting.

Considering your current JSON

If you are unable to alter the JSON format, you will need to locate the service within the serviceId array:

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

Here is a fully typed example:

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

// This is optional, provided 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 improved JSON

Here is an example of a JSON structure that requires less unwrapping:

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

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

With this structure, you can simply access the service using jsonFile[serviceId] or jsonFile.services[serviceId].

Retrieving JSON information using dynamic routes in Next.js

Answer №1

Considering your current JSON

With improved JSON

Similar questions

Retrieve data from JSON using AJAX

Having trouble retrieving XSRF-TOKEN from cookie in Next.js (React.js)?

Establishing the value of "document.cookie"

Position the circles in a way that they align along the circumference of a larger

Which <object> should I use to link my elasticsearch database with the INCEpTION NER annotation tool?

The error message "Property 'list' is not found on type 'void' React - Material UI" indicates that the 'list' property is not recognized

Efficiently rendering web pages with Next.js

attempting to employ a custom class for storing a JSON reply

The state update is paused by one state

"GraphQL DefinitelyTyped: The go-to resource for TypeScript typings

Dynamic user input using an enumeration

How can I simulate or manipulate the element's scrollHeight and clientHeight in testing scenarios?

Utilizing Next.js to Manage Back Button Functionality

Eliminating empty elements in json documents within a MongoDB database

Leveraging C# and iOS to retrieve a JSON address via an API

Best location to define numerous dialog components

A guide to consuming JSON String arrays in Spring Boot

JavaScript and TypeScript: Best practice for maintaining an Error's origin

Error encountered: React Typescript does not support the "any" type in a template literal expression

The type 'function that takes in a CustomEvent and returns void' cannot be assigned to a parameter of type 'EventListenerOrEventListenerObject'