like-gold•6mo ago

Resource list response in JSEND Format

I have backend which do not return list as json array in the http response. The server send it in JSEND Format. How to parse resource list from JSEND format into table?

11 Replies

kapa.ai•6mo ago

Hi @yohan. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Hmm, I don't know enough to give you a confident answer yet. The information extracts provided do not contain specific details on how to parse a resource list from JSEND format into a table using Refine. However, Refine provides a lot of flexibility when it comes to handling data and displaying it in tables. You can use the useTable hook from the @refinedev/react-table package to read the resource from the URL and return the data from the API endpoint. You can then display this data in tabular form using the @refinedev/react-table package. For more detailed information, you might find the Refine documentation (https://refine.dev/docs/getting-started/quickstart) helpful. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•6mo ago

<@706071614717952071> kapa.ai is still learning and improving, please let us know how it did by reacting below

like-gold•6mo ago

do you have example? @kapa.ai do you have example?

kapa.ai•6mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- I'm sorry, but the information extracts provided do not contain a specific example of parsing a resource list from JSEND format into a table using Refine. However, here's a general example of how to use the useTable hook with Refine to display data in a table:

import React from "react";  
import { useNavigation } from "@refinedev/core";  
import { useTable } from "@refinedev/react-table";  
import { ColumnDef, flexRender } from "@tanstack/react-table";  
  
export const CategoryList = () => {  
 const columns = React.useMemo<ColumnDef<any>[]>(  
 () => [  
 {  
 id: "id",  
 accessorKey: "id",  
 header: "Id",  
 },  
 {  
 id: "title",  
 accessorKey: "title",  
 header: "Title",  
 },  
 {  
 id: "actions",  
 accessorKey: "id",  
 header: "Actions",  
 cell: function render({ getValue }) {  
 return (  
 <div  
 style={{  
 display: "flex",  
 flexDirection: "row",  
 flexWrap: "wrap",  
 gap: "4px",  
 }}  
 >  
 <button  
 onClick={() => {  
 show("categories", getValue() as string);  
 }}  
 >  
 Show  
 </button>  
 <button  
 onClick={() => {  
 edit("categories", getValue() as string);  
 }}  
 >  
 Edit  
 </button>  
 </div>  
 );  
 },  
 },  
 ],  
 [],  
 );  
  
 const { edit, show } = useNavigation();  
  
 const {  
 getHeaderGroups,  
 getRowModel,  
 setOptions,  
 refineCore: {  
 tableQueryResult: { data: tableData },  
 },  
 } = useTable({  
 columns,  
 });
}

import React from "react";  
import { useNavigation } from "@refinedev/core";  
import { useTable } from "@refinedev/react-table";  
import { ColumnDef, flexRender } from "@tanstack/react-table";  
  
export const CategoryList = () => {  
 const columns = React.useMemo<ColumnDef<any>[]>(  
 () => [  
 {  
 id: "id",  
 accessorKey: "id",  
 header: "Id",  
 },  
 {  
 id: "title",  
 accessorKey: "title",  
 header: "Title",  
 },  
 {  
 id: "actions",  
 accessorKey: "id",  
 header: "Actions",  
 cell: function render({ getValue }) {  
 return (  
 <div  
 style={{  
 display: "flex",  
 flexDirection: "row",  
 flexWrap: "wrap",  
 gap: "4px",  
 }}  
 >  
 <button  
 onClick={() => {  
 show("categories", getValue() as string);  
 }}  
 >  
 Show  
 </button>  
 <button  
 onClick={() => {  
 edit("categories", getValue() as string);  
 }}  
 >  
 Edit  
 </button>  
 </div>  
 );  
 },  
 },  
 ],  
 [],  
 );  
  
 const { edit, show } = useNavigation();  
  
 const {  
 getHeaderGroups,  
 getRowModel,  
 setOptions,  
 refineCore: {  
 tableQueryResult: { data: tableData },  
 },  
 } = useTable({  
 columns,  
 });
}

This example displays data from the categories resource in a table. You would need to adjust this code to handle the JSEND format of your data. For more detailed information, you might find the Refine documentation (https://refine.dev/docs/getting-started/quickstart) helpful. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•6mo ago

<@706071614717952071> kapa.ai is still learning and improving, please let us know how it did by reacting below

like-gold•6mo ago

@kapa.ai can you show sample how to customize parsing json response from the API backend?

kapa.ai•6mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Sure, you can customize the parsing of JSON response from the API backend by creating a custom data provider. Here's a general example of how you can do this:

import { fetchUtils } from "@refine.dev";

export default {
    getList: async ({ resource, pagination, sort, filter }) => {
        const { url, options } = fetchUtils.apiGateway({
            url: `<https://example.com/${resource}`,>
            method: "GET",
        });

        const { json } = await fetchUtils.fetchJson(url, options);

        // Custom parsing of JSON response
        const data = json.data.map(item => {
            return {
                ...item,
                id: item._id, // For example, if your backend uses _id instead of id
            };
        });

        return {
            data,
            total: json.total,
        };
    },
    // ...other methods like getOne, getMany, etc.
};

import { fetchUtils } from "@refine.dev";

export default {
    getList: async ({ resource, pagination, sort, filter }) => {
        const { url, options } = fetchUtils.apiGateway({
            url: `<https://example.com/${resource}`,>
            method: "GET",
        });

        const { json } = await fetchUtils.fetchJson(url, options);

        // Custom parsing of JSON response
        const data = json.data.map(item => {
            return {
                ...item,
                id: item._id, // For example, if your backend uses _id instead of id
            };
        });

        return {
            data,
            total: json.total,
        };
    },
    // ...other methods like getOne, getMany, etc.
};

In this example, the getList method fetches data from the API and then maps through the JSON response to return a new array where the _id field from the backend is renamed to id. Please note that you need to implement other methods like getOne, getMany, getManyReference, create, update, updateMany, delete, and deleteMany based on your requirements. You can find more information about creating a custom data provider in the Refine documentation (https://refine.dev/docs/tutorial/understanding-dataprovider/create-dataprovider/#introduction). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•6mo ago

<@706071614717952071> kapa.ai is still learning and improving, please let us know how it did by reacting below

like-gold•6mo ago

@kapa.ai thank you

kapa.ai•6mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- You're welcome! If you have any other questions about Refine, feel free to ask. Happy coding! ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•6mo ago

<@706071614717952071> kapa.ai is still learning and improving, please let us know how it did by reacting below