Getting local json data with reactjs

Question

I'm getting json error in my first reactjs work. It is very important for me and work which I am a candidate. How can I fix this? Thank u very much.

related class:

constructor() {
  super();
  this.state = {
      data:[],
  }
}
componentDidMount(){    
    fetch('../JsonFiles/routes.json').
    then(response => response.json()).
    then(findresponse => this.setState ({ data: findresponse.data }));
}

render() {
  return (
    <div>
        fasfasfa
        {
            this.state.data.map((dynamicData, key) =>
                <div>
                        <span> {dynamicData.routes.origin.cityName} </span>
                        <span> {dynamicData.routes.destinations[{}].cityName} </span>
                </div>                    
            )
        }
    </div>
  );
}

}

json file:

{"routes": [
  {
    "origin": {
      "name": "Aalborg Airport",
      "country": "DK",
      "cityName": "Aalborg",
      "cityCode": "AAL"
    },
    "destinations": [
      {
        "name": "Bornholm Rønne",
        "country": "DK",
        "cityName": "Bornholm",
        "cityCode": "RNN"
      }
    ]
  },
  {
    "origin": {
      "name": "Barca",
      "country": "ES",
      "cityName": "Barcelona",
      "cityCode": "BCN"
    },
    "destinations": [
      {
        "name": "Borispol",
        "country": "UA",
        "cityName": "Kyiv",
        "cityCode": "KBP"
      }
    ]
  },
  {
    "origin": {
      "name": "Billund",
      "country": "DK",
      "cityName": "Billund",
      "cityCode": "BLL"
    },
    "destinations": [
      {
        "name": "Bornholm Rønne",
        "country": "DK",
        "cityName": "Bornholm",
        "cityCode": "RNN"
      },
      {
        "name": "København Kastrup",
        "country": "DK",
        "cityName": "Copenhagen",
        "cityCode": "CPH"
      },
      {
        "name": "Stavanger Sola",
        "country": "NO",
        "cityName": "Stavanger",
        "cityCode": "SVG"
      }
    ]
  },
  {
    "origin": {
      "name": "Bornholm Rønne",
      "country": "DK",
      "cityName": "Bornholm",
      "cityCode": "RNN"
    },
    "destinations": [
      {
        "name": "Aalborg Airport",
        "country": "DK",
        "cityName": "Aalborg",
        "cityCode": "AAL"
      },
      {
        "name": "Billund",
        "country": "DK",
        "cityName": "Billund",
        "cityCode": "BLL"
      },
      {
        "name": "København Kastrup",
        "country": "DK",
        "cityName": "Copenhagen",
        "cityCode": "CPH"
      },
      {
        "name": "Midtjyllands Lufthavn (Karup)",
        "country": "DK",
        "cityName": "Midtjyllands Lufthavn (Karup)",
        "cityCode": "KRP"
      },
      {
        "name": "Stavanger Sola",
        "country": "NO",
        "cityName": "Stavanger",
        "cityCode": "SVG"
      }
    ]
  },
  {
    "origin": {
      "name": "Charles de Gaulle",
      "country": "FR",
      "cityName": "Charles de Gaulle",
      "cityCode": "CDG"
    },
    "destinations": [
      {
        "name": "Billund",
        "country": "DK",
        "cityName": "Billund",
        "cityCode": "BLL"
      }
    ]
  },
  {
    "origin": {
      "name": "København Kastrup",
      "country": "DK",
      "cityName": "Copenhagen",
      "cityCode": "CPH"
    },
    "destinations": [
      {
        "name": "Billund",
        "country": "DK",
        "cityName": "Billund",
        "cityCode": "BLL"
      },
      {
        "name": "Bornholm Rønne",
        "country": "DK",
        "cityName": "Bornholm",
        "cityCode": "RNN"
      },
      {
        "name": "Midtjyllands Lufthavn (Karup)",
        "country": "DK",
        "cityName": "Midtjyllands Lufthavn (Karup)",
        "cityCode": "KRP"
      }
    ]
  },
  {
    "origin": {
      "name": "Esbjerg",
      "country": "DK",
      "cityName": "Esbjerg",
      "cityCode": "EBJ"
    },
    "destinations": [
      {
        "name": "Stavanger Sola",
        "country": "NO",
        "cityName": "Stavanger",
        "cityCode": "SVG"
      }
    ]
  },
  {
    "origin": {
      "name": "Borispol",
      "country": "UA",
      "cityName": "Kyiv",
      "cityCode": "KBP"
    },
    "destinations": [
      {
        "name": "Barca",
        "country": "ES",
        "cityName": "Barcelona",
        "cityCode": "BCN"
      }
    ]
  },
  {
    "origin": {
      "name": "Midtjyllands Lufthavn (Karup)",
      "country": "DK",
      "cityName": "Midtjyllands Lufthavn (Karup)",
      "cityCode": "KRP"
    },
    "destinations": [
      {
        "name": "Bornholm Rønne",
        "country": "DK",
        "cityName": "Bornholm",
        "cityCode": "RNN"
      },
      {
        "name": "København Kastrup",
        "country": "DK",
        "cityName": "Copenhagen",
        "cityCode": "CPH"
      }
    ]
  },
  {
    "origin": {
      "name": "Oslo Gardermoen",
      "country": "NO",
      "cityName": "Oslo",
      "cityCode": "OSL"
    },
    "destinations": [
      {
        "name": "Stord lufthavn, Sørstokken",
        "country": "NO",
        "cityName": "Stord",
        "cityCode": "SRP"
      },
      {
        "name": "Ørland",
        "country": "NO",
        "cityName": "Ørland",
        "cityCode": "OLA"
      }
    ]
  },
  {
    "origin": {
      "name": "Rhodos",
      "country": "GR",
      "cityName": "Rhodos",
      "cityCode": "RHO"
    },
    "destinations": [
      {
        "name": "Billund",
        "country": "DK",
        "cityName": "Billund",
        "cityCode": "BLL"
      }
    ]
  },
  {
    "origin": {
      "name": "Stavanger Sola",
      "country": "NO",
      "cityName": "Stavanger",
      "cityCode": "SVG"
    },
    "destinations": [
      {
        "name": "Billund",
        "country": "DK",
        "cityName": "Billund",
        "cityCode": "BLL"
      },
      {
        "name": "Bornholm Rønne",
        "country": "DK",
        "cityName": "Bornholm",
        "cityCode": "RNN"
      },
      {
        "name": "Esbjerg",
        "country": "DK",
        "cityName": "Esbjerg",
        "cityCode": "EBJ"
      }
    ]
  },
  {
    "origin": {
      "name": "Stord lufthavn, Sørstokken",
      "country": "NO",
      "cityName": "Stord",
      "cityCode": "SRP"
    },
    "destinations": [
      {
        "name": "Oslo Gardermoen",
        "country": "NO",
        "cityName": "Oslo",
        "cityCode": "OSL"
      }
    ]
  },
  {
    "origin": {
      "name": "Ørland",
      "country": "NO",
      "cityName": "Ørland",
      "cityCode": "OLA"
    },
    "destinations": [
      {
        "name": "Oslo Gardermoen",
        "country": "NO",
        "cityName": "Oslo",
        "cityCode": "OSL"
      }
    ]
  }
]}

AND I AM GETTING THIS ERROR:

I AM GETTING THIS ERROR

1 Unhandled Rejection (SyntaxError): Unexpected token < in JSON at position 0 (anonymous function) D:/development/js-projects/material-tutorial/src/Components/TrialForm/FlightSearch.js:13 10 |
11 | componentDidMount(){
12 | fetch('../JsonFiles/routes.json'). 13 | then(response => response.json()). 14 | then(findresponse => this.setState ({ data: findresponse.data })); 15 |
16 |

Could you try with absolute path? Like this: /home/test/user/JsonFiles/routes.json Please specify your json file path in the description. — sametcodes
– sametcodes, Commented Jul 3, 2018 at 13:59

sametcodes · Accepted Answer · 2018-07-03 14:07:55Z

1

You can import JSON file.

import * as jsonFile from '../JsonFiles/routes.json';

Define it on state in constructor function:

constructor() {
  super();
  this.state = {
      data: jsonFile
  }
}

answered Jul 3, 2018 at 14:07

sametcodes

5536 silver badges8 bronze badges

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

1 Comment

T. Emre Yildirim Over a year ago

Thank you. I solved it like your solution before you commented. However, thank you for your contribution.

Mukesh Burnwal Mike · Accepted Answer · 2018-07-10 05:41:11Z

0

es2015 version:

import jsonFile from '../JsonFiles/routes.json';

Now you have all json data available in "jsonFile" and you can use it any where.

edited Jul 10, 2018 at 5:41

answered Jul 3, 2018 at 14:28

Mukesh Burnwal Mike

4992 silver badges7 bronze badges

Collectives™ on Stack Overflow

Getting local json data with reactjs

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related