I want to call JSON data from json file to html table

Question

I want to call JSON data from json file to html table. but, the error is coming again and again. Why? can someone help me?

I want to print JSON data in HTML table. "Hello" is Question and it have 4 option and 1 answer.

But, JSON data is not coming in HTML page.

To check this I put

tag with class demo and call "Hello" only at this position but, no any data is coming.

I am also using console.log(data); to check JSON data is calling or not. but, it shows an error.

Error: Uncaught SyntaxError: Unexpected token o in JSON at position 1

var data = {
  "mydata":[
      {
        "Hello":"abcd",
        "opt":["ab","cd","ef","gh"],
        "ans":"cd"
      },
      {
        "Hello":"efgh",
        "opt":["ab","cd","ef","gh"],
        "answer":"ab"
      },
      {
        "Hello":"ijkl",
        "opt":["ab","cd","ef","gh"],
        "answer":"ef"
      },
      {
        "Hello":"mnop",
        "opt":["ab","cd","ef","gh"],
        "answer":"gh"
      }
    ]
  };

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
  <script src="data.js"></script>
</head>
<body>

  <div class="container">
    <p class="demo"></p>
    <table class="table">
      <thead>
        <tr>
          <th>Hello</th>
          <th>1</th>
          <th>2</th>
          <th>3</th>
          <th>4</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
      </tbody>
    </table>
  </div>

<script>

  var myobj = JSON.parse(data);
  console.log(myobj);

</script>

</body>
</html>

SMAKSS · Accepted Answer · 2020-05-11 05:44:08Z

What's happening here?

Actually the data variable is not a JSON at all (it's may seem like a JSON but it's not) and you can easily find it out by using typeof method. So take a look at the below snippet.

var data = {
  "mydata": [{
      "Hello": "abcd",
      "opt": ["ab", "cd", "ef", "gh"],
      "ans": "cd"
    },
    {
      "Hello": "efgh",
      "opt": ["ab", "cd", "ef", "gh"],
      "answer": "ab"
    },
    {
      "Hello": "ijkl",
      "opt": ["ab", "cd", "ef", "gh"],
      "answer": "ef"
    },
    {
      "Hello": "mnop",
      "opt": ["ab", "cd", "ef", "gh"],
      "answer": "gh"
    }
  ]
};

console.log('data type is:', typeof data);
console.log('JSON data type is:', typeof JSON.stringify(data));

JSON's exists with type string, but in your case, data variable is an object so whenever you try to get the type of it, it will return object. But when you stringify it with built-in methods it will show as string.

How to solve this?

So in the end, for reading data values you just need to get mydata property within the data like this: data.mydata and then iterate through it by for loops.

So your final code should be something like this:

var data = {
  "mydata": [{
      "Hello": "abcd",
      "opt": ["ab", "cd", "ef", "gh"],
      "ans": "cd"
    },
    {
      "Hello": "efgh",
      "opt": ["ab", "cd", "ef", "gh"],
      "answer": "ab"
    },
    {
      "Hello": "ijkl",
      "opt": ["ab", "cd", "ef", "gh"],
      "answer": "ef"
    },
    {
      "Hello": "mnop",
      "opt": ["ab", "cd", "ef", "gh"],
      "answer": "gh"
    }
  ]
};


data.mydata.forEach((item, index) => console.log(`item ${index} in mydata is:`, item))

Kasey Chang · Accepted Answer · 2020-05-11 05:41:53Z

1

You are misunderstanding how JSON works. Your data is ALREADY in JSON compatible state.

You only need JSON.parse() to reverse the effects of someone used JSON.stringify() your data structure.

For example:

   console.log(data)
   var myobj = JSON.parse(JSON.stringify(data));
   console.log(myobj);

The two console logs would give "roughly" the same output.

answered May 11, 2020 at 5:41

Kasey Chang

5424 silver badges12 bronze badges

Collectives™ on Stack Overflow

I want to call JSON data from json file to html table