How to get data by id fron json file using ionic 4 react?

Ionic Framework Ionic React
1

Hello,

I am new in ionic react, I have 2 JSON file and 2 pages. In the first JSON file, I have a category list and second JSON file in category details. Now I want to get data by id(pass from home page to category details page). One thing is we can do like we pass an object, so that way we can show details but as I say I have 2 different JSON files. one contains category list and another category details:

categoryList.json:

[
    {
        "id": 1,
        "name": "Category 1",
        "description": "Category"
    },
    {
        "id": 2,
        "name": "Category 2",
        "description": "Category"
    },
    {
        "id": 3,
        "name": "Category 3",
        "description": "Category"
    },
    {
        "id": 4,
        "name": "Category 4",
        "description": "Category"
    }
]

CategoryDetail.json

[
    {
        "id": 1,
        "name": "category 1",
        "title": "Test page",
        "image": "assets/icon/icon.png"
    },
    {
        "id": 2,
        "name": "category 2",
        "title": "Test page",
        "image": "assets/icon/icon.png"
    },
    {
        "id": 3,
        "name": "category 3",
        "title": "Test page",
        "image": "assets/icon/icon.png"
    }
]

Home.tsx

import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonList, IonItem, IonLabel, IonLoading } from '@ionic/react';
import React, { useState } from 'react';
import { RouteComponentProps } from 'react-router';
import myData from '../data/outline.json';

const Home: React.FC<RouteComponentProps> = (props) => {

  const [showLoading, setShowLoading] = useState(true);
  setTimeout(() => {
    setShowLoading(false);
  }, 2000)

  const showDetail = (data: any) => {
    let prop: any = props;
    prop.history.push({
      pathname: 'catlist' + '/' + JSON.stringify(data)
    })
  }
  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle class="text-center">Home</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent className="ion-padding">
        <IonLoading
          isOpen={showLoading}
          onDidDismiss={() => setShowLoading(false)}
          message={'Loading...'}
        />
        <IonList>
          {myData.map((item, index) => (
            <IonItem key={index} onClick={() => { showDetail(item.id) }}>
              <IonLabel>
                <h1>{item.name}</h1>
                <p>{item.description}</p>
              </IonLabel>
            </IonItem>
          ))}
        </IonList>
      </IonContent>
    </IonPage >
  );
};

export default Home;

in my details page I can get id like this:

// const Home: React.FC = () => {
const Catlist: React.FC<RouteComponentProps> = (props) => {
    let prop: any = props;
    let match: any = prop.match;
    let data: any = JSON.parse(match.params.id);
    console.log(data.list);
2
3

If the JSON data is in a external file, first you need to read this file using some JS HTTP client, like Axios. This file must be served in your assets directory.

When you get the JSON data as a object in some var, just use filter function (from array type) to filter everything you need.