how to use json objects from request

Question

So I have a fetch request that returns this json:

{
   "data":[
      {
         "latitude":44.43225,
         "longitude":26.10626,
         "type":"locality",
         "name":"Bucharest",
         "number":null,
         "postal_code":null,
         "street":null,
         "confidence":1,
         "region":"Bucharest",
         "region_code":"BI",
         "county":null,
         "locality":"Bucharest",
         "administrative_area":null,
         "neighbourhood":null,
         "country":"Romania",
         "country_code":"ROU",
         "continent":"Europe",
         "label":"Bucharest, Romania"
      }
   ]
}

In the component I want to show the latitude and longitude and I tried this way:

const conditions = (props) => {
    return (
        <div className={classes.Wrapper}>
            {
                props.error && <small className={classes.Small} > Please enter a valid city. </small>}
            {
                props.loading && < div className={classes.Loader} />}

            {
                props.responseObj.cod === 200 ?
                    <div className={classes.information}>
                        <p>{props.geoObj.data[0].longitude}</p>
                        <p>{props.geoObj.data[0].latitude}</p>
                    </div > : null
            } </div>
    )
}

but it doesn't work. Can you please tell me what's wrong and how should I use the objects from the JSON response.

I just need help in understanding how to use the objects from the json. — Alexandru Constantin Arvinte, Jul 31 '21 at 02:42
you can `console.log(props)` and see what mistakes you are making while getting the response, i think it's `cod === 200` but it might be something else, can you also post the error message? — tsamridh86, Jul 31 '21 at 03:21

score 0 · Answer 1 · answered Jul 31 '21 at 02:45

0

I think that you have to convert JSON file to Obj first. Try JSON.parse()

This post may help: How to read an external JSON

answered Jul 31 '21 at 02:45

Mike

56
1
9

score 0 · Answer 2 · answered Jul 31 '21 at 02:47

0

You used it properly. But when you fetching data, props geoObj hasn't structure like the fetch response.

You need to use [optional chaining][1] to avoid issues related:

{props.geoObj?.data?.[0]?.longitude}

answered Jul 31 '21 at 02:47

Viet

12,133
2
15
21

score 0 · Answer 3 · answered Jul 31 '21 at 03:17

like this?

const props = {
  "data":[
     {
        "latitude":44.43225,
        "longitude":26.10626,
        "type":"locality",
        "name":"Bucharest",
        "number":null,
        "postal_code":null,
        "street":null,
        "confidence":1,
        "region":"Bucharest",
        "region_code":"BI",
        "county":null,
        "locality":"Bucharest",
        "administrative_area":null,
        "neighbourhood":null,
        "country":"Romania",
        "country_code":"ROU",
        "continent":"Europe",
        "label":"Bucharest, Romania"
     }
  ]
}

type Data = typeof props.data[0]
const Condition = (props: Data) => <div>{
  JSON.stringify(props)}</div>

const Parent = () => {
  return <div>
    {
      props.data.map(data => <Condition {...data} />)
    }
  </div>
}

how to use json objects from request

3 Answers3