Link to home
Start Free TrialLog in
Avatar of Seham Hammad
Seham Hammad

asked on

Datatables with React

Hi experts,
I am trying to display datatable from a jsonresponse using fetch(url) into react componnet
but form some reason I can not see the table in the page.
Thanks very much in advance
here is my code
(NetworkStatus Component.)
import React, { Component } from "react";
import { Route, Redirect } from "react-router-dom";
import ReactDOM from "react-dom";
import $ from 'jquery';
import "react-table/react-table.css";
import { create } from "domain";
import DataTable from 'datatables.net'
$.DataTable = require('datatables.net');

export class NetworkStatus extends Component {
    state ={ data:[]  }

    createTable = (data) => {
        const tableColumns = [
            {Name:'name',       prop:'name'},
            {Name:'EU_ID',      prop:'eu_id'},
            {Name:'Sensor_Id',  prop:'sensor_id'},
            {Name:'IP_Address', prop:'ip_address'},
            {Name:'Latitute',   prop:'latitute'},
            {Name:'Longitute',  prop:'longitute'},
            {Name:'Type',       prop:'type'},
            {Name:'Last_Coms',  prop:'last_coms'},
            {Name:'Last_Data',  prop:'last_data'},
            {Name:'Last_Purged',  prop:'last_purged'},
        ]
        return (
            <DataTable
        keys="id"
        columns= {tableColumns}
        initialData={data}
        />  
    );
    }


    componentDidMount()  {

        var url = 'http://localhost:5000/Sensors';
        fetch(url)
            .then(response => response.json())
            .then(rows => {
                this.setState({data:rows})
            });
    }
    render() {
        return (
            <div> {this.createTable(this.state.data)}</div>
    )
    }

}


export default NetworkStatus;

Open in new window


and here is the route in the App component
 />
          <Route
            path="/networkstatus"
            render={props =>
              this.auth.isAuthenticated() ? (
                <NetworkStatus data={this.LoadDataTable} auth={this.auth} {...props} />
              ) : (
                this.auth.login()
              )
            }
          />

Open in new window

Avatar of leakim971
leakim971
Flag of Guadeloupe image

why : var url = 'http://localhost:5000/Sensors';
and not : var url = '/Sensors';

it look like you're facing a cross-domain issue : you're not using same protocol between the client, your application and the server
Avatar of Seham Hammad
Seham Hammad

ASKER

this link that I tell the component know how to talk to the backend that runs on node js using another web server
react runs on 3000 and the back end server runs on the 5000
This question needs an answer!
Become an EE member today
7 DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform.
View membership options
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.