# Need help in kibana plugin development project to know how to fetch json data object send from kibana coreStart http post method(Client Side) to kibana irouter post method (at server end)

**URL:** <https://discuss.elastic.co/t/need-help-in-kibana-plugin-development-project-to-know-how-to-fetch-json-data-object-send-from-kibana-corestart-http-post-method-client-side-to-kibana-irouter-post-method-at-server-end/359309>\
**Category:** Elasticsearch\
**Tags:** elastic-stack-alerting\
**Created:** [May 11, 2024, 3:46pm UTC](https://discuss.elastic.co/t/need-help-in-kibana-plugin-development-project-to-know-how-to-fetch-json-data-object-send-from-kibana-corestart-http-post-method-client-side-to-kibana-irouter-post-method-at-server-end/359309 "2024-05-11T15:46:32Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Sunil\_Jagtap](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/sunil_jagtap/32/133604_2.png) [@Sunil\_Jagtap](https://discuss.elastic.co/u/Sunil_Jagtap)\
**Post date:** [May 11, 2024, 3:46pm UTC](https://discuss.elastic.co/t/need-help-in-kibana-plugin-development-project-to-know-how-to-fetch-json-data-object-send-from-kibana-corestart-http-post-method-client-side-to-kibana-irouter-post-method-at-server-end/359309/1 "2024-05-11T15:46:32Z")

</div>

Trying to fetch JSON data sent from client (React JS) - kibana coreStart http post method(Client Side) to kibana irouter post method (at server end)

My code looks like below :

Client Side :

```auto
const dataToSend = {
    title: 'Test Title',
    description: 'Testing alert creation through the API',
  };

  const handleSubmit = async (event: React.FormEvent) => {
    event.preventDefault();
    // Include fs module
    // var fs = require('fs');
    try {
      const response = await fetch('/api/test_plug2/example', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(dataToSend),
      });
    
      if (response.ok) {
        console.log('Data sent successfully');
      } else {
        console.error('Error sending data:', response.statusText);
      }
    } catch (error) {
      console.error('Error sending data:', error);
    }
  };

```

Server Side :

```auto
import { IRouter } from '../../../../core/server';
import { schema } from '@kbn/config-schema';

export function defineRoutes(router: IRouter) {
  router.post(
    {
      path: '/api/test_plug2/example',
      validate: {
        body: schema.object({
          // Define your JSON schema here
          // Example: title, description, tags, etc.
          title: schema.string(),
          description: schema.string(),
        }),
      },
    },
    async (context, request, response) => {
      // Handle the incoming JSON data here
      const { body } = request;
      // Process the data and perform necessary actions
      // ...
      return response.ok({ body: 'Data received successfully' });
    }
  );
}

```

But I am facing below error for now :

 ![Screenshot 2024-05-10 at 9.29.30 PM](https://us1.discourse-cdn.com/elastic/original/3X/6/f/6fbaf0a4d0bb192644b796342e66b08f57db4de9.png)

---

<div class="post-metadata">

**Author:** ![Sunil\_Jagtap](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/sunil_jagtap/32/133604_2.png) [@Sunil\_Jagtap](https://discuss.elastic.co/u/Sunil_Jagtap)\
**Post date:** [May 13, 2024, 9:04am UTC](https://discuss.elastic.co/t/need-help-in-kibana-plugin-development-project-to-know-how-to-fetch-json-data-object-send-from-kibana-corestart-http-post-method-client-side-to-kibana-irouter-post-method-at-server-end/359309/2 "2024-05-13T09:04:32Z")

</div>

**Using default behavior (code as below) I am able to capture data on client side,**

**But I want it exactly apposite, i.e. want to sent JSON data from client which should appear on server ( I am using post method for the same).**

Server Side :

```auto
import { IRouter } from '../../../../core/server';

export function defineRoutes(router: IRouter) {
  router.get(
    {
      path: '/api/my_test_plug/example',
      validate: false,
    },
    async (context, request, response) => {
      return response.ok({
        body: {
          // time: new Date().toISOString(),
          time: 'sunil'
        },
      });
    }
  );
}

```

Client Side :

```auto
export const MyTestPlugApp = ({ basename, notifications, http, navigation }: MyTestPlugAppDeps) => {
  // Use React hooks to manage state.
  const [timestamp, setTimestamp] = useState<string | undefined>();

  const onClickHandler = () => {
    // Use the core http service to make a response to the server API.
    http.get('/api/my_test_plug/example').then((res) => {
      setTimestamp(res.time);
      // Use the core notifications service to display a success message.
      notifications.toasts.addSuccess(
        i18n.translate('myTestPlug.dataUpdated', {
          defaultMessage: 'Data updated',
        })
      );
    });
  };

```

---

<div class="post-metadata">

**Author:** ![Sunil\_Jagtap](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/sunil_jagtap/32/133604_2.png) [@Sunil\_Jagtap](https://discuss.elastic.co/u/Sunil_Jagtap)\
**Post date:** [May 14, 2024, 3:38am UTC](https://discuss.elastic.co/t/need-help-in-kibana-plugin-development-project-to-know-how-to-fetch-json-data-object-send-from-kibana-corestart-http-post-method-client-side-to-kibana-irouter-post-method-at-server-end/359309/3 "2024-05-14T03:38:47Z")

</div>

this has been resolved, success code is as below :

Server Side :

```auto
import { IRouter } from '../../../../core/server';
import { schema } from '@kbn/config-schema';

export function defineRoutes(router: IRouter) {
  router.post(
    {
      path: '/api/my_test_plug/example',
      validate: {
        body: schema.object({
          // Define your JSON schema here
          // Example: title, description, tags, etc.
          title: schema.string(),
          description: schema.string(),
        }),
      },
    },
    async (context, request, response) => {
      const { body } = request;

      console.log(body)

      return response.ok({ body: `Where's my post data?` });
    }
  );
}

```

Client Side :

```auto
export const MyTestPlugApp = ({ basename, notifications, http, navigation }: MyTestPlugAppDeps) => {
  // Use React hooks to manage state.

  const dataToSend = {
    title: 'Test Title',
    description: 'Testing alert creation through the API',
  };

  const onClickHandler = async () => {
    await http.post('/api/my_test_plug/example', { body: JSON.stringify(dataToSend) });

      // Use the core notifications service to display a success message.
      notifications.toasts.addSuccess(
        i18n.translate('myTestPlug.dataUpdated', {
          defaultMessage: 'Data updated',
        })
      );
  };

```