API Response Format

Hello, i want to use Inferencer using my API, but my API format looks something like this:

{
    "responseCode": 200,
    "responseStatus": "SUCCESS",
    "responseMessage": "Data retrieved successfully.",
    "locations": [
        {
            "id": "0009e300-37aa-11ee-946b-7119a08ec6fb",
            "name": "Bogor",
            "address": "Bogor",
            "description": "This is a new test location",
            "phone_number": "0123456789",
            "latitude": "-0.0",
            "longitude": "+0.0"
        },
  ]
}

{
    "responseCode": 200,
    "responseStatus": "SUCCESS",
    "responseMessage": "Data retrieved successfully.",
    "locations": [
        {
            "id": "0009e300-37aa-11ee-946b-7119a08ec6fb",
            "name": "Bogor",
            "address": "Bogor",
            "description": "This is a new test location",
            "phone_number": "0123456789",
            "latitude": "-0.0",
            "longitude": "+0.0"
        },
  ]
}

The list of data is inside the "location" attribute, how can i pass it to the data resources?

3 Replies

kapa.ai•12mo ago

Hi @regnregn. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- In order to use the Inferencer with your API, you need to create a custom data provider that can handle your API's response structure. The data provider is responsible for communicating with your API and transforming the responses into a format that refine can understand. In your case, the list of data is inside the "locations" attribute. You need to extract this data in your data provider's getList method. Here's a simplified example of how you might do this:

getList: async ({ resource, pagination, sorters, filters, meta }) => {  
 const { current, pageSize, mode } = pagination;  
 const { field, order } = sorters;  
 const { field, operator, value } = filters;  
  
 // You can handle the request according to your API requirements.  
 const response = await fetch(`your-api-url/${resource}`);
 const data = await response.json();

 return {  
 data: data.locations,  
 total: data.locations.length,  
 };  
};

getList: async ({ resource, pagination, sorters, filters, meta }) => {  
 const { current, pageSize, mode } = pagination;  
 const { field, order } = sorters;  
 const { field, operator, value } = filters;  
  
 // You can handle the request according to your API requirements.  
 const response = await fetch(`your-api-url/${resource}`);
 const data = await response.json();

 return {  
 data: data.locations,  
 total: data.locations.length,  
 };  
};

In this example, data.locations is used to extract the list of data from your API's response. For more information on creating a data provider, refer to the Creating a data provider tutorial (https://refine.dev/docs/tutorial/understanding-dataprovider/create-dataprovider/) and the Data Provider documentation (https://refine.dev/docs/api-reference/core/providers/data-provider). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•12mo ago

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

dependent-tan•12mo ago

Hey @regnregn, You can use the ‘fieldTransformer’ prop of the inferencer component. It is a function that takes the field as an argument and returns the modified field. You can find more information here: https://refine.dev/docs/packages/documentation/inferencer/#modifying-the-inferred-fields

Inferencer | refine

@refinedev/inferencer is a package that provides a way to automatically generate views for resources based on the data structure. The aim is to reduce the amount of time spent on creating views for resources by generating the code automatically that can be customized easily.