How to get json data from react fetch method

Question

I am unable to get data form API. I tried different way, but no luck. Here is my Code and API. I want to use these data (JSON) through react fetch method.

// My Fetch API

fetchData() {
        fetch('MYAPI_URL')
       .then(response => response.json())
        
  // .then(parsedJSON => console.log(parsedJSON)) //prints the data on console 
//        .then(parsedJSON => console.log(parsedJSON.status)) // Not Worked
  //      .then(parsedJSON => console.log(parsedJSON.data.Products) )  // Not Worked
      .then(parsedJSON => console.log(parsedJSON.status.data) ) // not working. 

  .then(parsedJSON => parsedJSON.data.map(pro => (
            {
      ..... Other code ....
      }
      ))

   }
    
    
// below is my api data

  "status": true,
  "data": {
    "banner": "mydomain.com/img/img1.png",
    "Products": [
      {
        "CategoryCode": "03",
        "CategoryName": "Appetizers",
        "SubCategory": [
          {
            "SubCategoryCode": "038",
            "SubCategoryName": "Chicken Wings",
            "Image":     "banner": "mydomain.com/img/img1.png",
            "SubCategoryType": [
              {
                "TypeCode": "05",
                "TypeName": "Normal",
                "AdditionalPrice": "0",
                "TypeSize": [
                  {
                    "SizeCode": "17",
                    "SizeName": "6 Pcs",
                    "Description": "Oven baked hot and spicy chicken wings.",
                    "Price": "349",
                    "Toppings": [
                      
                    ]
                   }
                ]
              }
             ]
             ...............



// I want to get Products Code etc. But I can't. No idea where I am doing wrong

When I use this fetch api it was working. The data was almost same with the above one, but that was not real Rest API.

Please specify "it is not working". Does the API endpoint not return any data or a HTTP error, is the response not properly present in react afterwards? — Capricorn, Sep 07 '18 at 14:07
`.then(parsedJSON => console.log(parsedJSON))` this line works right? — illiteratewriter, Sep 07 '18 at 14:09
1. .then(parsedJSON => console.log(parsedJSON.status)) 2. .then(parsedJSON => console.log(parsedJSON.status.data)) 3. .then(parsedJSON => console.log(parsedJSON.data)) All these lines says that ...map is not a function. and In Console.log it prints undifined — Saleem Jafar, Sep 08 '18 at 04:49

score -1 · Answer 1 · answered Sep 07 '18 at 14:08

-1

If you need to just receive the data and NOT update React component (not storing in local state), you can have a look at this answer: https://stackoverflow.com/a/44644532/1263904
Otherwise check this: https://stackoverflow.com/a/50980558/1263904

answered Sep 07 '18 at 14:08

pritam

2,452
1
21
31

Just Suppose that if I have to get data from the above api, how to do this in fetch api. – Saleem Jafar Sep 08 '18 at 07:38
Have you even looked over the links? – pritam Sep 08 '18 at 07:54

How to get json data from react fetch method

1 Answers1