CODEWITHSUNDEEP
javascriptjsonreactjs
Developer
Developer

Reputation: 1437

Loop JSON data into ReactJS

I am a newbie to ReactJS and was trying to fetch the data from JSON file. I have created 2 files one is products.json and app.jsx. I can get the result in console.log()

[{…}]
0
:
{title: "Product Title", img: "./p-1.jpg", des: "DES1", rs: 599}
length
:
1
__proto__
:
Array(0)

but it's rendering in view. I sometimes get undefined, or the data itself is not populating.

here's my react code.

import React from 'react';
import Request from 'superagent';
import ReactDOM from 'react-dom';

import {
    Container,
    Col,
    Row,
    Card
} from 'react-bootstrap';

class App extends React.Component {
    render() {
        return (
            <div className="container">
                <Header />
                <Content />
                <Footer />
            </div>
        );
    }
}

// Header starts 
class Header extends React.Component {
    componentDidMount() {
        //alert('Header');
    }
    render() {
        return (
            <header>
                <h1>Header !! </h1>
            </header>

        );
    }
}
// Header ends 

// Content starts 
class Content extends React.Component {
    constructor() {
        super();
        this.state = {
            data: []
        }
    }

    componentDidMount() {
        var url = "./products.json";
        Request.get(url)
            .then((res) => {
                console.log(res.body.data);
                console.log(res.body.data.title);
                //this.setState({data: data.conversations});
                this.setState({
                    PTitle: res.body.title,
                    PImg: res.body.img,
                    PDesc: res.body.des,
                    PRs: res.body.rs
                });
            })
            .catch(function (err) {
                alert(err);
                // err.message, err.response
            });

    }
    render() {
        return (
            <ul>
                {
                    this.state.data.map((key, i) => 
                    <ProductList key={i} products={key} />)
                }
            </ul>
        )
    }
}
// Content ends 

// Footer starts 
class Footer extends React.Component {
    render() {
        return (
            <div>
                Footer !!
            </div>
        )
    }
}
// Footer ends


// Products Starts
class ProductList extends React.Component {
    render() {
        return (
            2. - <li>{PTitle}</li>
        )
    }
}
// Products Ends

export default App;

Upvotes: 0

Views: 5344

Answers (4)

Phonbopit
Phonbopit

Reputation: 3383

I am not familiar with superagent but It look like your input ./products.json that serve as http://localhost:3000/products.json (assume you run react at port 3000)

I think first step you can replace serve static json to use mock server like https://www.mocky.io/ and generate response

but If you can serve static json with superagent you have to receive your data and then set to your component state.

If your request is success, set state,

// componentDidMount()

let url = 'http://www.mocky.io/v2/5a6032db100000fa02307802';

Request.get(url)
  .then((res) => {
    this.setState({data: res.body.data});  
  }).catch(() => {});

and update your render() method

return (
  <ul>
    {
      this.state.data.map((product, index) => (
        <ProductList key={index} product={product} />
      ))
    }
  </ul>
)

and the last, your ProductList in render() method because you send product as a props

render() {
  const { title, img, des, rd } = this.props.product;

  return (
    <li>{title} : {des} : {rd} : {img}</li>
  )
}

Upvotes: 1

Hemadri Dasari
Hemadri Dasari

Reputation: 33974

Do setState for data array after the res in Ajax call. You are already doing that but commented. Try the below it has slight change

this.setState({
    data: res.body (or) res.body.data
})

Upvotes: 0

Jonny Asmar
Jonny Asmar

Reputation: 1980

It looks like superagent uses text rather than body as one might expect. So what you'll need to do is parse your json file like this:

Request.get(url).then((res: any) =>{
    const json = JSON.parse(res.text);
    // If you have a conversations item in that response you can then do this
    this.setState({data: json.conversations});
    ...

Assuming that the value of conversations is an Array, you will have no problem then using this.state.data.map to iterate/loop over the values.

Upvotes: 1

kng
kng

Reputation: 627

Edited: What you need is

this.setState({data: res.body.data});

Then

this.state.data.map((one_product,i) => (
   <Product key={i} product={one_product}/>
);

and

class Product extends React.Component {
    render() {
        return (
            <li>{this.props.product.title}</li>
        );
    }
}

Upvotes: 0

Related Questions