how to split the result in array React/Axios

Question

I will explain my problem to you today: the following code works fine, I get my database, then I use a map function, so everything is fine. My question and the next, I get a table in it I have an object that contains an array. This table has the following form:

 [{"title":"Lagunitas IPA (Demi-Pinte","quantity":2}]

and it is possible to recover one of the two pieces of data because when I map over the array I get all of it.

Do you have an idea of how to fix this?

    import React, { Component } from 'react';
    import { CardText,  Col } from 'reactstrap';
    import axios from 'axios'

    const entrypoint = process.env.REACT_APP_API_ENTRYPOINT+'/api';

    class AdminPage  extends Component {

    constructor(props) {
        super(props);
        this.state = {
            data: [],   
              },
        };
    }

    getRandom = async () => {

        const res = await axios.get(
            entrypoint + "/alluserpls"
        )
        this.setState({ data: res.data })
    }
    componentDidMount() {
        this.getRandom()
    }
    render() {

        let datas = this.state.data.map(datass => {
          return (
              <div >
                  <Col sm="12" key={datass.id}">
                          <CardText> Commande{datass.items}</CardText>
                  </Col>
              </div>
          )
      })
        return (
        <div> 
        {datas}
      </div>
        )
     }
   }

export default AdminPage

try debuging and seeing what exactly is in datass.items and datass.id. you may need to access datass.items[0] and datass.items[1] however this is only an educated guess — bwright
– bwright, Commented Feb 7, 2020 at 13:45
inside <CardText> Commande{datass.title}</CardText> like this I mean — Pramod S. Nikam
– Pramod S. Nikam, Commented Feb 7, 2020 at 13:49
@bwright { "id": 118, "title": "brand", "items": "[{\"title\":\"Lagunitas IPA (Demi-Pinte\",\"quantity\":2}]" } — Neff
– Neff, Commented Feb 7, 2020 at 13:53
@PramodNikam i cant <CardText> Commande{datass.title}</CardText> because on my table i have " title" — Neff
– Neff, Commented Feb 7, 2020 at 13:53

Imran Qureshi · Accepted Answer · 2020-02-10 13:31:55Z

1

when you want to get a data from server , it is in json format so it can transfer from server to client. so when you receive on the client side , make sure to parse it, this will give you the data back into an object form that u can use each property of your data in mapping them.

lets assume you are receiving this data

 [{"title":"Lagunitas IPA (Demi-Pinte","quantity":2}]

this data in json format ,now you need to parse it to be able to use the properties seperately

in your getRandom method

getRandom = async () => {

   const res = await axios.get(
      entrypoint + "/alluserpls"
   )
   let parsedData = JSON.parse(res.data);
   this.setState({ data: parsedData  })
}

now you have the data stored as an array of objects, in render you can map it and use it as

let datas = this.state.data.map((datass,index) => {
    return (
       <div>
           <Col sm="12" key={index}">
               <Col sm="6">
               Title : {datass.title}
               </Col>
               <Col sm="6">
               Quantity: {datass.quantity}
               </Col>
           </Col>
       </div>
    )
 })

this will show the value of quantity and title separately.

edited Feb 10, 2020 at 13:31

answered Feb 10, 2020 at 12:57

Imran Qureshi

1681 silver badge10 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Neff Over a year ago

i got error AdminPage.js:83 Uncaught (in promise) SyntaxError: Unexpected token o in JSON at position 1 at JSON.parse (<anonymous>)

Imran Qureshi Over a year ago

you need to consider if the data you are getting in the res is json or not first.. the data u posted above is accurate.

Neff Over a year ago

Hi , the problem i think and that i have both format in the same table. What do you think ?my table looks like this to be precise { "id": 118, "name": "", "phone": "1643416502", "randomID": "456", "title": "", "quantity": "", "items": "[{\"title\":\"Lagunitas IPA (Demi-Pinte\",\"quantity\":2}]" }

Neff Over a year ago

and I really want to recover Items in two parts

Imran Qureshi Over a year ago

{ "id": 118, "name": "", "phone": "1643416502", "randomID": "456", "title": "", "quantity": "", "items": "[{\"title\":\"Lagunitas IPA (Demi-Pinte\",\"quantity\":2}]" } is also in json , you should be able to parse it, u can check in the console if it is the exact data you receive in res.data

|

Osman Safak · Accepted Answer · 2020-02-07 14:05:25Z

0

    getRandom = async () => {
            const res = await axios.get(
                entrypoint + "/alluserpls"
            )
            const data = res.json();
            this.setState({ data })
        }

answered Feb 7, 2020 at 14:05

Osman Safak

2551 silver badge5 bronze badges

7 Comments

Neff Over a year ago

and for inside<CardText> Commande{}</CardText> what is the code if i want to take only "quantity " for " items" ?

Osman Safak Over a year ago

let datas = this.state.data.map(datass => { return ( <Col sm="12" key={datass.id}"> <CardText> Commande{datass.quantity}</CardText> </Col> ) })

Neff Over a year ago

i have error , Uncaught (in promise) TypeError: t.json is not a function at AdminPage.js:82 at l (runtime.js:45) at Generator._invoke (runtime.js:264) at Generator.next (runtime.js:98) at r (asyncToGenerator.js:3) at u (asyncToGenerator.js:25)

Osman Safak Over a year ago

quantity string or number?

Neff Over a year ago

this schema "items": "[{\"title\":\"Lagunitas IPA (Demi-Pinte\",\"quantity\":2}]" } so is string i guess

|

Collectives™ on Stack Overflow

how to split the result in array React/Axios

2 Answers 2

8 Comments

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related