React data table using json data

Question

import React from "react";
import {
  Button,
  Form,
  FormGroup,
  Label,
  Input,
  FormText,
  Row
} from "reactstrap";
import Icon from "react-icons-kit";
import { filter } from "react-icons-kit/fa/filter";
import { pencil, bin, search } from "react-icons-kit/icomoon";
import { ic_delete, ic_create } from "react-icons-kit/md";
import { Link } from "react-router-dom";
import { activeStyle } from "../projects/Projects.css";
import {
  orange,
  contentStyle,
  displayContainer,
  pageHeading,
  hrStyle,
  buttonStyle,
  floatRight1,
  exampletable,
  savebtn1,
  bankdiv,
  btnstyle
} from "../Layout.css";
import { hyperLink } from "../settings/LayoutSettings.css";
import { Header } from "../Header";
import { Footer } from "../Footer";
import $ from "jquery";

var result = [];
var URL = "http://localhost:3033/";
var parsed = "";
export class ClaimList extends React.Component {
  constructor() {
    super();
    this.state = {
      data: []
    };
  }
  componentDidMount() {
    this.Claimlist();
  }
  Claimlist() {
    alert("called");
    $.ajax({
      url: URL + "/ClaimList",
      type: "GET",
      dataType: "json",

      ContentType: "application/json",
      success: function(parsed) {
        parsed = JSON.stringify(parsed);
        console.log(parsed);
        for (var x in parsed) {
          result.push(parsed[x]);
        }

        result = $.parseJSON(parsed);
        data = JSON.stringify(data);
        this.setState(result);
        console.log("hello ramesh");
      }.bind(this),
      error: function(jqXHR) {
        console.log(jqXHR);
      }.bind(this)
    });
  }

  renderProducts() {
    return this.state.result.map(product => {
      return (
        <tr>
          <td>{product.ID}</td>
          <td>{product.ExpenseName}</td>
          <td>{product.Amount}</td>
        </tr>
      );
    });
  }
  render() {
    return (
      <div>
        <table>
          <tbody>
            {this.state.result.map(function(item, key) {
              return (
                <tr key={key.id}>
                  <td>{item.ID}</td>
                  <td>{item.ExpenseName}</td>
                  <td>{item.Amount}</td>
                  <td>{item.Description}</td>
                </tr>
              );
            })}
          </tbody>
        </table>

        <Header />
        <div className={displayContainer}>
          <p className={pageHeading}>Claims</p>

          <hr className={hrStyle} />
          <span className={floatRight1}>
            <form class="form-row" method="GET">
              <input type="search" placeholder="Search" />
              <div
                class="dropdown"
                style={{ position: "relative", left: "-1vw" }}
              >
                <button
                  class="btn  btn-outline-light"
                  type="button"
                  id={btnstyle}
                  data-toggle="dropdown"
                  aria-haspopup="true"
                  aria-expanded="false"
                >
                  <Icon icon={filter} />
                </button>
                <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                  <a class="dropdown-item">Employee ID</a>
                  <a class="dropdown-item">Expense Title</a>
                  <a class="dropdown-item">Date</a>
                  <a class="dropdown-item">Amount</a>
                </div>
              </div>
            </form>
          </span>
          <table class="table table-bordered table-striped table-responsive-md">
            <thead>
              <tr className={orange}>
                <th>Employee ID</th>
                <th>Employee Name</th>
                <th>Expense Title</th>
                <th>Description</th>
                <th>Amount</th>
                <th>Date</th>
                <th>Actions</th>
              </tr>
            </thead>
            <tbody>
              {/* {this.MyTableGrid()} */}

              {this.renderProducts()}
            </tbody>
          </table>
          <div
            className={bankdiv}
            style={{ marginTop: "7vw", marginLeft: "-7.7vw" }}
          >
            <Link to="/AddClaims">
              <button className="btn btn-outline-warning">Add New Claim</button>
            </Link>
          </div>
        </div>
        <Footer />
      </div>
    );
  }
}

I'm unable to fetch the data from json and map it into the datagrid. I'm using reactjs and json to get the values from the backend(go).localhost:3033 is my go server and mysql is my database. I'm getting an error as

Uncaught TypeError: Cannot read property 'map' of undefined

Post the output of this github.com/srikanth32/hrms/blob/master/src/go/claimsList.go#L64 JSON and also the exact code snippet where you have any problem. — Himanshu
– Himanshu, Commented Jul 24, 2018 at 13:30

Jayffe · Accepted Answer · 2018-07-24 14:24:00Z

2

maybe by simply set a default value for result in your constructor that for the moment is undefined in the first render of your class :

constructor() {
    super();
    this.state = {
      data: [],
      result: []
    };
  }

answered Jul 24, 2018 at 14:24

Jayffe

1,28910 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Bastien · Accepted Answer · 2018-07-24 15:03:48Z

1

Although as @Jitendra suggest, you can use JSX syntax

render() {
  return {this.state.result && <Fragment> ... </Fragment>}
}

answered Jul 24, 2018 at 15:03

Bastien

1581 silver badge11 bronze badges

Comments

Himanshu · Accepted Answer · 2018-07-24 14:46:16Z

0

You needs to check inside render if this.state.result is null or not before mapping it.

render(){
if (!this.state.result)
   return 
else 
   {do other stuffs}

edited Jul 24, 2018 at 14:46

Himanshu

12.8k9 gold badges49 silver badges63 bronze badges

answered Jul 24, 2018 at 14:16

Jitendra Purohit

11 bronze badge

Collectives™ on Stack Overflow

React data table using json data

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related