Local json file is not loading using ajax in react js

Tags: javascript jquery json ajax reactjs
By : Bilkul
Source: Stackoverflow.com
Question!

I have the following react component.

import React, { Component } from 'react';
class GraphView extends Component { 
    constructor(props){
        super(props);       
        this.state = {      
            datajson: ''
        };      
    }   
    componentDidMount() {
        $.ajax({        
            url: 'data.json',
            dataType: 'json',           
            success: function(data) {
              this.setState({datajson: data});
            }.bind(this)
      });
    }
    render() {      
        return(     
            <div>   
                ...
            </div>
        );
    }
}

export default GraphView;

when I try to load the local json file "data.json", it is showing a not found error. Do I need to pass any other parameters? My local json file resides in the same folder as that of GraphView.

By : Bilkul


Answers

Loading JSON from filesystem is turned off in most browsers, because security. This is normally called "cross origin", but Chrome also turns this off even when the origin (the HTML) is on the filesystem.

Just imagine how reading from the filesystem could impose security concerns. Should HTML from the filesystem be able to talk "cross-origin" with the internet?

Consider this HTML:

By : arve0


This video can help you solving your question :)
By: admin