Reactjs webpage with a csv file as database

Question

Currently I'm using Reactjs as the frontend for my website and a csv file as my backend database (Don't ask why. It's the requirement). I created a local http web server (written in Python) and it's working as desired. My question is how do I put the content of each cell of my csv file into a variable(or variables) and display them at wherever I want them to be on the webpage? There seems to be a problem with variable scope.

Here's what I got so far:

import React, { Component } from "react";
import $ from 'jquery';

function getData (data) {
    this.id = data.id;
    this.name = data.name;
    this.age = data.age;
}

export default class Profile extends Component {
    constructor (props) {
        super(props);
        this.state = {
            jsonlist: null,
            isNull: true
        }
        this.onClick = this.handleClick.bind(this);
    }

    handleClick() {
        var jl;
        $.post("http://127.0.0.1:8080",
        function(json){
            var parsed = JSON.parse(json);
            jl = parsed.list.map(function(data){
                return new getData(data);
            });
            this.setState(
                isNull: false,
                jsonlist: jl
            );
        });
    }

    render() {
        return (
            <div>
                <button onClick = {this.onClick}>GET CONTENT</button>
                { this.state.isNull
                    ? null
                    :
                     <ul>
                         <div>name: { this.state.jsonlist["0"].name } </div>
                         <div>age: { this.state.jsonlist["0"].age } </div>
                     </ul>
                }
            </div>
        )
    }
}

I know I can't set jsonlist with the value of jl (a json object). Is there a better way to do that? And the value of jsonlist in the return function is always null. What should I do with that?

csv file content for this webpage:

id || name || age
1  || A    || 22
2  || B    || 32
3  || C    || 29
4  || D    || 24

Can somebody give me an example using axios instead of jquery?

AKX · Accepted Answer · 2018-07-18 20:06:25Z

1

Rewrote answer based on comments.

You're probably looking for something like this.

I have no idea what's supposed to call loadData/onClick, though, since it's not referenced in your original code.

Also, you shouldn't use jQuery just to do AJAX; look into fetch() or maybe the axios library.

import React, { Component } from "react";
import $ from 'jquery';

export default class Profile extends Component {
    constructor (props) {
        super(props);
        this.state = {jsonlist: null};
        this.onClick = () => {
            this.loadData();
        };
    }

    loadData() {
        var jl;
        $.post("http://127.0.0.1:8080", (json) => {
            var parsed = JSON.parse(json);
            this.setState({
                jsonlist: parsed.list,
            });
        });
    }

    render() {
        const {jsonlist} = this.state;
        return (
            <ul>
                {(jsonlist || []).map((item) => (
                    <li key={item.id}>
                        name = {item.name}, age = {item.age}
                    </li>
                ))}
            </div>
        );
    }
}

edited Jul 18, 2018 at 20:06

answered Jul 18, 2018 at 19:56

AKX

171k16 gold badges147 silver badges229 bronze badges

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

4 Comments

Young Over a year ago

jsonlist was just a typo when I created this toy code segment. I can't show the original code because it's confidential. Can you give me a correct version of the mapping without getData()?

AKX Over a year ago

You really should show the original code as much as you can. Anonymize what needs to be anonymized, but don't just post toy code as "this is what I got so far".

Young Over a year ago

That's exactly the same structure. I can create a sample csv for that if you need it.

AKX Over a year ago

Rewrote answer.

Collectives™ on Stack Overflow

Reactjs webpage with a csv file as database

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related