not getting any output while mapping an array of objects and displaying table rows in React JS

Question

I have an array of objects and I want to display it's values in a Table This is how my array looks like:

[{name: 'x', mobile: 'xxx'}, {name: 'y', mobile: 'yyy'}, ......]

I want to display it inside a table. This is what I tried so far

import React, { Component } from 'react';
import {
    Table,
    ProgressBar
} 
from 'react-bootstrap';

class Display extends Component {

  render() {
    var records = this.props.googleData;
    const API = this.props.api;
    const placeURI = this.props.placeURI;
    var rows = [];
    for(let p_id of records.results){
        let dataURI = `${placeURI}${p_id.place_id}${API}`;
        let proxyUrl = 'https://cors-anywhere.herokuapp.com/',
        targetUrl = dataURI
        fetch(proxyUrl + targetUrl)
        .then((res) => res.json())
        .then((data) => {
            let jsonData = JSON.parse(JSON.stringify(data));
            //console.log(jsonData);
            rows.push(jsonData.result);
        })
        .catch((e)=> console.log(`Error! ${e.message}`));
    }
    console.log(rows);

    return (
        <div>
            <ProgressBar now={45} />
            <Table striped bordered condensed hover responsive>
              <thead>
                <tr>
                  <th>#</th>
                  <th>Name</th>
                  <th>Full Address</th>
                  <th>Phone Number</th>
                  <th>International P.no</th>
                  <th>Website</th>
                  <th>Rating</th>
                </tr>
              </thead>
              <tbody>
                {rows.map(( listValue, index ) => {
                  return (
                    <tr key={index}>
                      <td>{listValue.name}</td>
                      <td>{listValue.title}</td>
                      <td>{listValue.price}</td>
                    </tr>
                  );
                })}
              </tbody>
            </Table>
        </div>
    );
  }
}

export default Display;

This is how my array looks

But the map() is not returning any row. And if there is any suggestion by which I can improve my code is extremely appreciable. Please help

Ravi Basil · Accepted Answer · 2018-04-21 15:10:59Z

    import React, { Component } from 'react';
    import {
        Table,
        ProgressBar
    } 
    from 'react-bootstrap';

    class Display extends Component {
        constructor(props) {
            super(props);
            this.state={
                rows: []
            }
        }


    componentDidMount = () => {
        var records = this.props.googleData;
        const API = this.props.api;
        const placeURI = this.props.placeURI;
        var rows = [];
        for (let p_id of records.results) {
            let dataURI = `${placeURI}${p_id.place_id}${API}`;
            let proxyUrl = 'https://cors-anywhere.herokuapp.com/',
                targetUrl = dataURI
            fetch(proxyUrl + targetUrl)
                .then((res) => res.json())
                .then((data) => {
                    let jsonData = JSON.parse(JSON.stringify(data));
                    //console.log(jsonData);
                    rows.push(jsonData.result);
                })
                .catch((e) => console.log(`Error! ${e.message}`));
        }
        this.setState({
            rows:rows
        })
        console.log(rows);
    };

      render() {

    return (
        <div>
            <ProgressBar now={45} />
            <Table striped bordered condensed hover responsive>
              <thead>
                <tr>
                  <th>#</th>
                  <th>Name</th>
                  <th>Full Address</th>
                  <th>Phone Number</th>
                  <th>International P.no</th>
                  <th>Website</th>
                  <th>Rating</th>
                </tr>
              </thead>
              <tbody>
                {this.state.rows.map(( listValue, index ) => {
                  return (
                    <tr key={index}>
                      <td>{listValue.name}</td>
                      <td>{listValue.title}</td>
                      <td>{listValue.price}</td>
                    </tr>
                  );
                })}
              </tbody>
            </Table>
        </div>
    );
  }

    }

    export default Display;

@Waeez Can you do console.log(this.state.rows) inside render method and let me know the result.

Collectives™ on Stack Overflow

not getting any output while mapping an array of objects and displaying table rows in React JS

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related