How to Loopback Remote api response load in react admin datagrid

问题

i am using loopback 3 developed api load into react admin using react admin loopback package.my doubt is i am write remote api id based get list of values in my response.its result how to load react admin datagrid.

This i am try to load into my react admin based on react admin loopback.this standard template id passed to my template page.this id based call the api and load into datagrid.i dont know? how to pass the api in datagrid

http://localhost:3000/api/templates/gettemplatebystandardtemplateid?standardtemplateid=5c934f75fd22e006749e4ab8

StandardTemplate.js

import React, { Component } from 'react';
import {
    List,
    SimpleList,
    Responsive,
    Datagrid,
    TextField,
    EditButton,
    ShowButton, Edit, SimpleForm, TextInput
} from 'react-admin';
import { Link } from 'react-router-dom';

import { Config } from '../../config';
import { Button } from '@material-ui/core';
import { withStyles } from '@material-ui/core/styles';
const styles = {
    button: {
        fontWeight: 'bold',
        // This is JSS syntax to target a deeper element using css selector, here the svg icon for this button
        '& svg': { color: 'orange' }
    },
};
const MyEditButton = withStyles(styles)(({ classes, ...props }) => (
    <Button source="id"
        component={Link}
        to={{
            pathname: `/template/${props.record.id}`
            // state: { id: props.record.id }
        }}
    >
        Templates
                                             </Button>

));
class StandardTemplateList extends Component {
    componentDidMount() {
        console.log(this.props);
        document.title = Config.app.name + ' - StandardTemplate';
    }
    render() {
        return (
            <List {...this.props}>
                <Responsive
                    small={
                        <SimpleList
                            primaryText={record => record.name}
                            secondaryText={record => `${record.services} views`}
                            tertiaryText={record => new Date(record.createdAt).toLocaleDateString()}
                        />
                    }

                    medium={<Datagrid>
                        <TextField source="id" />
                        <TextField source="name" />
                        <TextField source="format" />
                        <TextField source="services" />
                        <TextField source="createdby" />
                        <MyEditButton />
                        <EditButton />
                        <ShowButton />
                    </Datagrid>
                    }
                />
            </List>
        );

    }
}

export default StandardTemplateList;

Template.js

import React, { Component } from 'react';
import {
    List,
    SimpleList,
    Responsive,
    Datagrid,
    TextField,
    EditButton,
    ShowButton
} from 'react-admin';
import { Link } from 'react-router-dom';
import { GET_LIST,GET_ONE } from 'react-admin';
import Card from '@material-ui/core/Card';
import CardHeader from '@material-ui/core/CardHeader';
import dataProvider from '../../dataProvider';
import { Button } from '@material-ui/core';

class TemplateList extends Component {

componentDidMount() {
        console.log(this.props);
        document.title = Config.app.name + ' - Template';
    }
    render() {

        return (
        <List {...this.props}>
        <Responsive
            small={
                <SimpleList
                    primaryText={record => record.name}
                    secondaryText={record => `${record.services} views`}
                    tertiaryText={record => new Date(record.createdAt).toLocaleDateString()}
                />
            }

            medium={
            <Datagrid>
                <TextField source="id" />
                <TextField source="name" />
                <TextField source="createdby" />
                <EditButton />
                <ShowButton />
            </Datagrid>
            }
        />
    </List>
  ) }
}

export default TemplateList;

来源：https://stackoverflow.com/questions/55370679/how-to-loopback-remote-api-response-load-in-react-admin-datagrid

标签

reactjs

material-ui

loopbackjs

react-admin