How to read specific information from a JSON file in Reactjs?

Asked

Viewed 1,015 times

0

I’m having trouble rendering specific information in my code, for example, I would like to render only the "id":1, and the information contained in it. However in the code it renders the information of the two (id:1 and id:2).

This is the JSON file:

[
  {"id":1,  
   "Marketplace": "ML1",
   "Venda": "2452447411",
   "Nome": "Daniel",
   "Endereço": "Av. Paulista 1200",
   "Data da venda": "10/05/2020"
  },
  {
   "id":2,   
    "Marketplace": "ML1",
    "Venda": "2452432412",
    "Nome": "Hiago",
    "Endereço": "Av. Berrini 1300",
    "Data da venda": "02/04/2020"
   }
]

That’s the file where you’re reading the code:

const TrelloCard = ({text, id, index, }) => {
    
    const [modalIsOpen, setModalIsOpen] = useState(false)
    return(
        <Draggable draggableId={String(id)} index={index} >
            {provided => (
            <CardContainer
            ref={provided.innerRef} 
            {...provided.draggableProps} 
            {...provided.dragHandleProps}
            >
                <Card  >
                    <CardContent >
                        <Typography  gutterBottom> {text} </Typography>
                        <button onClick={() => setModalIsOpen(true)}>Informações</button>
                            <Modal isOpen={modalIsOpen} onRequestClose={() => setModalIsOpen(false) }>
                                <h1>Hello World</h1>
                                <h3>{text} </h3>
                                <div>
                                    {Dados.map(post => {
                                        return(
                                            <>
                                            <h4>{post.Nome}</h4>
                                            <h5>{post.Venda}</h5>
                                            <h5>{post.Marketplace}</h5>
                                
                                            </>
                                        )
                                    })}
                                </div>
                                
                                <button onClick={() => setModalIsOpen(false)}>Fechar</button>    
                            </Modal> 
                    </CardContent>
                </Card>               
                </CardContainer>
            )}        
        </Draggable>
    )
}


export default TrelloCard
json react

  • your question is very confusing.

  • I don’t quite understand it either. The idea is to always take only the first element, or just take an element with a specific ID that you determine?

  • I would like you to render this JSON information only; {"id":1, "Marketplace": "ML1", "Sell": "2452447411", "Name": "Daniel", "Address": "Av. Paulista 1200", "Date of sale": "10/05/2020" }

  • It wouldn’t just be doing an if to check if id is == 1 ?

1 answer

0


Is used in its code a map who has a callBack passing through each element of the array, but, you only want the position 0 of array through his commentary, example:

<>
    <h4>{Dados[0].Nome}</h4>
    <h5>{Dados[0].Venda}</h5>
    <h5>{Dados[0].Marketplace}</h5>
</>

this solves your problem, and needs to give a read on array in javascript, such as the website’s own link:

Browser other questions tagged json react

You are not signed in. Login or sign up in order to post.