Using JSON files in html

Question

I'm have trouble to understand how to use the data saved in a JSON file and load it in a html page Everything locally: say this the JSON file :

    { 

    "level1":{
        "level1_1":{
            "example": "test",
            "example2":"123123"
        },
        "level1_2":{
            "example": "test",
            "example2":"123123"
        }
    },

    "level2":{
        "level2_1":{
            "example": "test",
            "example2":"123123"
        },
        "level2_2":{
            "example": "test",
            "example2":"123123"
        }
    }

}

And I want to be able to call the data from it, in and HTML file for example :

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>reading json</title>
  <style>

  </style>

</head>
<body>

  <br>
  file value :

  <br>

<script>
function loadJSON(callback) {   

var xobj = new XMLHttpRequest();
    xobj.overrideMimeType("application/json");
xobj.open('GET', 'config.json', true); // Replace 'my_data' with the path to your file
xobj.onreadystatechange = function () {
      if (xobj.readyState == 4 && xobj.status == "200") {
        // Required use of an anonymous callback as .open will NOT return a value but simply returns undefined in asynchronous mode
        callback(xobj.responseText);
      }
};
xobj.send(null);  
}

function init() {
 loadJSON(function(response) {
  // Parse JSON string into object
    var actual_JSON = JSON.parse(response);
 });
}
</script>

</body>

I've got the script from this tutorial and still do get it run. So my aim just to see after ** first value** data from the JSON file. any idea how u guys do it ?

Before <script> tag ends call init();. Before <script> element starts add <div id="displaydata"></div>. After actual_JSON add document.getElementById("displaydata").innerHTML=actual_JSON; — fiveobjects
– fiveobjects, Commented Jul 25, 2019 at 11:50
@fiveelements thanks for replying , can u tell how can use the call in html file ? — Engine
– Engine, Commented Jul 25, 2019 at 12:06

Alexis Philip · Accepted Answer · 2019-07-25 12:24:55Z

2

Here is a more elaborate answer.

First, let's parse the JSON into an object.

var actual_JSON = JSON.parse(response);

Second, transform the JSON object into a readable string.

var json_string = JSON.stringify(actual_JSON, undefined, 2);

Then, use the querySelector() function to select a DOM element. Note that #output means I want to select an ID attribute named output.

var output = document.querySelector("#output");

Then, I am adding by the JSON string to the DOM with the DOM innerHTML property. It will be added right after "file value".

output.innerHTML += json_string;

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>reading json</title>
  <style>

  </style>

</head>
<body>

  <br>
  <div id="output">file value : </div>
  <br>

<script>

// Starts.
init();

function loadJSON(callback) {   
  var xobj = new XMLHttpRequest();
      xobj.overrideMimeType("application/json");
  xobj.open('GET', 'config.json', true); // Replace 'my_data' with the path to your file
  xobj.onreadystatechange = function () {
        if (xobj.readyState == 4 && xobj.status == "200") {
          // Required use of an anonymous callback as .open will NOT return a value but simply returns undefined in asynchronous mode
          callback(xobj.responseText);
          // init(xobj.responseText)
        }
  };
  xobj.send(null);  
}

function init() {
  loadJSON(function(response) {

    // Parse JSON string into object
    var actual_JSON = JSON.parse(response);

    // Transforms the JSON object into a readable string.
    var json_string = JSON.stringify(actual_JSON, undefined, 2);

    // Select <br> tag.
    var output = document.querySelector("#output");

    // Adds it to the DOM.
    output.innerHTML += json_string;
  });
}

</script>
</body>

edited Jul 25, 2019 at 12:24

answered Jul 25, 2019 at 11:45

Alexis Philip

5362 gold badges5 silver badges23 bronze badges

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

8 Comments

Engine Over a year ago

thanks for replying but can u tell how should I call a specific element in html file file

Alexis Philip Over a year ago

I modified my answer and it is much more complete. I hope it helped you.

Engine Over a year ago

I've copied ur answer but still can't any resut ?

Alexis Philip Over a year ago

It works great for me. Make sure your config.json file is in the same directory as your html file.

Engine Over a year ago

index.html:33 Access to XMLHttpRequest at 'file:///C:/Users/Engine/Documents/json/config.json' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, brave, https.

|

Mehar · Accepted Answer · 2019-07-25 12:17:36Z

1

You have to add some id attribute in html, then select based on that id and loop the json data and insert like this

<!doctype html>

    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>reading json</title>
      <style>

      </style>

    </head>
    <body>

    <div id="json_result"></div>
<script>
function loadJSON(callback) {   

var xobj = new XMLHttpRequest();
    xobj.overrideMimeType("application/json");
xobj.open('GET', 'config.json', true); // Replace 'my_data' with the path to your file
xobj.onreadystatechange = function () {
      if (xobj.readyState == 4 && xobj.status == "200") {
        // Required use of an anonymous callback as .open will NOT return a value but simply returns undefined in asynchronous mode
        callback(xobj.responseText);
      }
};
xobj.send(null);  
}

function init() {

 loadJSON(function(response) {
  // Parse JSON string into object
    var actual_JSON = JSON.parse(response); 

    for (var key in actual_JSON) {
        var innerkey = actual_JSON[key];
        for (var inner in innerkey) {
             document.getElementById('json_result').innerHTML += 'Example: '+innerkey[inner]['example']+'<br>';
             document.getElementById('json_result').innerHTML += 'Example2: '+innerkey[inner]['example2']+'<br>';
        }   
    }   
 }); 
}
init();
</script>

</body>

answered Jul 25, 2019 at 12:17

Mehar

2,2583 gold badges26 silver badges51 bronze badges

4 Comments

Engine Over a year ago

thanks for reply but your solution seems not to work for me ? here's what I get : index.html:33 Access to XMLHttpRequest at 'file:///C:/Users/Engine/Documents/json/config.json' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, brave, https

Mehar Over a year ago

@Engine you can check by replacing the config.json with the absolute path of that file. maybe you can try this json-generator.com/api/json/get/bZKGxFnZDS?indent=2 , i have added you json file data and generated the link

Engine Over a year ago

@Maher even after setting up the path i get the same error :/

Engine Over a year ago

I think this the issue : stackoverflow.com/questions/10752055/…

Odwori · Accepted Answer · 2019-07-25 12:36:27Z

1

This stack overflow question will guide you well

answered Jul 25, 2019 at 12:36

Odwori

1,90019 silver badges14 bronze badges

1 Comment

Odwori Over a year ago

I found your answer in the question that was asked here. Do not concentrate on the reply but on the question.

Collectives™ on Stack Overflow

Using JSON files in html

3 Answers 3

8 Comments

4 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

8 Comments

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related