2

Here I wrote A code which fetches data from API http://fcctop100.herokuapp.com/api/fccusers/top/recent and displays Data in Form Of Table Which Looks Like Below In My Case As You Can See is Repeating For Every enter image description here

But I want To Make It Look Like enter image description here

Here Is What I Did So Far

var MainBox  = React.createClass({
    render:function(){
        return(
            <App/>
        );
    }
});
var App = React.createClass({
    //setting up initial state
    getInitialState:function(){
        return{
            data:[]
        };
    },
    componentDidMount(){
        this.getDataFromServer('http://fcctop100.herokuapp.com/api/fccusers/top/recent');
    },
    //showResult Method
        showResult: function(response) {

            this.setState({
                data: response
            });
    },
    //making ajax call to get data from server
    getDataFromServer:function(URL){
        $.ajax({
            type:"GET",
            dataType:"json",
            url:URL,
            success: function(response) {
                this.showResult(response);
            }.bind(this),
            error: function(xhr, status, err) {
                console.error(this.props.url, status, err.toString());
            }.bind(this)
        });
    },
    render:function(){
        return(
            <div>
                <Result result={this.state.data}/>
            </div>
        );
    }
});
var Result = React.createClass({
    render:function(){
        var result = this.props.result.map(function(result,index){
            return <ResultItem key={index} user={ result } />
            });
        return(
            <div>
                {result}
            </div>

        );
    }
});
var ResultItem = React.createClass({
    render:function(){
        var camper = this.props.user;
        return(
                <div className="row">
                    <div className="col-md-12">
                        <table className="table table-bordered">
                            <thead>
                            <tr>
                                <th className="col-md-4">UserName</th>
                                <th >Points In Last 30 Days</th>
                                <th>Points All Time</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr >
                                <td>{camper.username}</td>
                                <td>{camper.recent}</td>
                                <td>{camper.alltime}</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

        );
    }
});
ReactDOM.render(
    <MainBox />,
    document.querySelector("#app")
);
<!DOCTYPE html>
<head>
    <meta charset="UTF-8" />
    <title>React Tutorial</title>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<div id="app"></div>
<script src="demo.js" type="text/babel"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.min.js"></script>
</body>
</html>

1 Answer 1

5

The following should list all your items as a single row in your table, and only give you one table. One tip is to not use the index as the key for your map function. It's better to use some natural key or identifier in your result, some kind of id that will enable React better comparison of the components. A blog post describing this and some documentation.

var Result = React.createClass({
    render:function(){
        var result = this.props.result.map(function(result,index){
            return <ResultItem key={index} user={ result } />
            });
        return(
            <div className="row">
                <div className="col-md-12">
                    <table className="table table-bordered">
                        <thead>
                            <tr>
                                <th className="col-md-4">UserName</th>
                                <th >Points In Last 30 Days</th>
                                <th>Points All Time</th>
                            </tr>
                        </thead>
                        <tbody>
                            {result}
                        </tbody>
                    </table>
                </div>
            </div>
        );
    }
});
var ResultItem = React.createClass({
    render:function(){
        var camper = this.props.user;
        return(
            <tr >
                <td>{camper.username}</td>
                <td>{camper.recent}</td>
                <td>{camper.alltime}</td>
            </tr>
        );
    }
});
1
  • I'm giving you a belated vote because this helped me generate a table based on json data. Dec 19, 2017 at 16:39

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.