0

If I embed Json Data inside reactjs code. everything works fine.

But am having an issue calling json files externally into reactjs. Some Stackoverflow scholars suggest calling external library using the method below install json-loader: npm i json-loader --save

here is the source link of some scholars suggested solutions on that loading json data from local file into React JS

my problem is that I cannot get it to work as it displays error "require is not defined". below is the code.

    <!DOCTYPE html>
    <html>
    <head>
        <title>Hello ReactJS!</title>
          <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>
        <link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
        <script type="text/jsx" src="qaapp.js"></script>
    </head>
    <body>
    <div id="content" class="container"></div>
    <script type="text/jsx">


    var test = require('json!./data.json');
    alert(test);

        React.render( <Test details={test}/>, document.getElementById( "content" ) );
    </script>
    </body>
    </html>


**data.json**

{
        name: "Sample Test",
        description: "This is a sample test paper to demonstrate the ReactJS UI design by components.",
        passCutoff: 0.33,       
        applyNegativeMarking: false,
        time: 1,
        questions: [
            {
            no: "1",
            qtext:"California is in which part of USA?",
            options:[
                {text:"East"},
                {text:"Mid"},
                {text:"West"},
                {text:"South"}
            ],
            ans:"West",
            marks: 3
        },


        {
            no: "2",
            qtext:"Who is Prime Minister of India?",
            options:[
                {text:"Sonia Gandhi"},
                {text:"Narendra Modi"},
                {text:"Manmohan Singh"},
                {text:"Rahul Gandhi"}
            ],
            ans:"Narendra Modi",
            marks: 2
        },
        {
            no: "3",
            qtext:"Which of the following is most popular Search Engine Company?",
            options:[
                {text:"Microsoft"},
                {text:"Facebook"},
                {text:"Google"},
                {text:"Yahoo"}
            ],
            ans:"Google",
            marks: 1
        },
        ]
    }
briandenny
  • 107
  • 1
  • 8
  • Require is not work within your browser. also, json-loader is a webpack module, do you know how to use react with webpack? – Stanley Cheung Oct 24 '17 at 08:49
  • 1
    It seems you are new to React, and it is good that you are trying out things on your own trying to learn. Are you familiar with words like "webpack", "import", etc? If not, that means you should go to the next step in your learning curve. Try create-react-app. https://github.com/facebookincubator/create-react-app Will be happy to help if you are stuck. – anand Oct 24 '17 at 09:08
  • @stanley. No I dont. where can i get tutorials on implementing json-loader with react – briandenny Oct 24 '17 at 12:22

0 Answers0