ReactJS - Paginating data from DBJSON

Question

I have an app that fetch JSON data from a DB JSON and I want to paginate this data like for an example to show 1 image per page. How can I do it? Here is my DB JSON

db.json file:

"interiores": [
  {    
    "images": [      
      "img_01", "img_02", "img_03", "img_04", "img_05"      
    ]
  }  
 ]

I have a React component code to that fetch the JSON data by axios. It is working successfully.

React component file:

import React, { Component } from 'react'
import axios from 'axios'    

const URL_INTERIORES = 'http://localhost:3001/interiores';

class Interiores extends Component {
  constructor(props) {
    super(props)
    this.state = {
      interiores: [],        
    }
  }


  componentDidMount() {
    axios.get(URL_INTERIORES)
      .then(res => {
        this.setState({ interiores: res.data })
      })     
  }


  render() {
    return (
      <div>

        {this.state.interiores.map(item =>
          <div>
            <div className="gallery images-box-1">
              {
                item.images
                  .map((img) => {
                    return (
                      <a href={`../images/${img}.jpg`}>
                        <img src={`../images/${img}_thumb.jpg`} alt="" />
                      </a>
                    )
                  })
              }
            </div>
          </div>
        )}              

      </div>
    );
  }
}


export default Interiores;

Here is the code made by SO user Piotr Berebecki can help . This code is working successfully It is a pagination of returning items from a simply array. I want to do the same thing but returning data from JSON DB shown above. How can I do? How can I solve it? Thank you.

shyam agarwal · Answer 1 · 2018-09-22T07:43:09.707

0

You can directly import your json file and then read from it if you have used create-react-app to scaffold your project, the module is already included, you just need to import your json otherwise you can install json-loader moudule. For more details you can refer this answer. es6 modules implementation, how to load a json file

For pagination with state you can do something like this at the bottom of page

 images.map((img) => { <li onClick={(img)=> this.updateImage(img)}> img.id</li>})

make update handler like

updateImage(img) {  

  this.setState({
    currentImg: img
  })
}

then you can use currentImg from your state to show in render method.

edited Sep 22 '18 at 07:43

answered Sep 22 '18 at 07:19

shyam agarwal

179
6

How can it help? I'm fetching the json succefully I just want only to paginate the result like this example: https://codepen.io/PiotrBerebecki/pen/pEYPbY – claudiopb Sep 22 '18 at 07:25
you can do this in two possible ways either by react router or a very simple approach by maintaining the state of current image , i have updated my answer to include this scenario. – shyam agarwal Sep 22 '18 at 07:44
It is a bit more complex. I want to show a pagination. It is exactly like this example: https://codepen.io/PiotrBerebecki/pen/pEYPbY but here I need to replace the simply array shown in this example for a json data of my app. I don't know how i can do that. – claudiopb Sep 22 '18 at 07:54
in co-relation with what you are referring replaces todo's with images from json,handleClick would be same and a simpler version of render just render image like this – shyam agarwal Sep 22 '18 at 08:08
What if i want to show 3 images per page? What can I do? Because in other part of the app I will need do it. – claudiopb Sep 22 '18 at 08:29
idea would be same only instead of currentImg take an array and set it's value to whatever you want in handleClick. like in link share by you – shyam agarwal Sep 22 '18 at 08:35

ReactJS - Paginating data from DBJSON

1 Answers1