How could I do a loop that repeats with data in Json in my case?

Question

How could I do a loop that repeats with data in Json in my case?

Navigation

#1 by (1 votes)

0

Good afternoon, I have a component in react and I need a json with the name and the link for the image to show that in my div .

import React from 'react';

class Content extends React.Component {
  render() {
     return ( 
 
<div className="col-lg-3 col-md-4 col-sm-6 col-xs-12">
    <div className="hovereffect">
        <img className="img-responsive" src="https://cdn.colorlib.com/wp/wp-content/uploads/sites/2/how-to-setup-website.jpg" alt="Name" />
            <div className="overlay">
                <h2>Jam3 Web Site</h2>
                <p> 
					<b>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec blandit nibh. Suspendisse potenti. Nulla vitae eleifend leo, sed gravida nulla.</b>
				</p> 
				<p> 
					<a href="#">VIEW DEMO</a>
				</p> 
            </div>
    </div>
</div>


     );
  }
}

export default Content;

What would be the proper way to do a repeat here?

json reactjs

asked by Santiago D'Antuoni 10.01.2017 в 22:31

source

1 answer

Java - SQL - Show data in a Java Swing form Create Buttons in dynamic form (C #) [closed]

score 1 · Accepted Answer

First of all, the data must reside in the state or in the properties of the component, regardless of whether you receive them from a REST service or if they are data generated by the front-end application itself, if you receive them from a service, then you must update the component's state with the data you receive from the ajax call.

Then you can show the items as follows. (I only put the relevant code)

import React from 'react';

class Content extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            items: [{nombre: 'Nombre1', enlace: 'www.ejemplo.com/img1.jpg'}, {nombre: 'Nombre2', enlace: 'www.ejemplo.com/img2.jpg'}]
        }
    }

    render() {
        let itemsView = [];

        this.state.items.forEach(function(item){
            itemsView.push(
                <li>
                    <h1>{item.nombre}</h1>
                    <img src={item.enlace}/>
                </li>
            )
        });

        return (
            <div>
                <ul>
                    {itemsView}
                </ul>
            </div>
        );
    }
}

export default Content;

To receive the data from a REST service, read my answer to this question, it's something different but in the answer is what you're looking for

link