How do I fetch .json data into HTML using only JavaScript?-CodePudding

I am trying to display multiple arrays from a JSON file in an html document but I always get errors such as "undefined" or that it doesn't display all of the arrays.

Here's my json:

 "accounts": [
        {
            "website": "netflix.com",
            "username": "[email protected]",
            "password": "aSecurePassword"
        }
    ]

and here's my .js and .html:

 <h2>JSON Data to HTML</h2>
    <div id ="data" >
        <div >website</div>
        <div >user</div>
        <div >pw</div>
    </div>


    <script type="text/javascript">
        var mainContainer = document.getElementById("data");
        var div = document.createElement("div");
        
        fetch("./data.json")
        .then(function(response){
            return response.json();
        })
        .then(function(data){
            div.classList.add('website');
            mainContainer.appendChild(div);
            div.innerHTML = ""   data.website
        })
        
    </script>

The above coded example is supposed to add another line to the class "accounts" like this:

<div >website</div>
<div >user</div>
<div >pw</div>
<div >netflix.com</div>

however, it shows "undefined" in html and I don't understand why?

CodePudding user response：

The data object contains the property account which is an array with your websites objects, as @VLAZ said.

To display all your data, you should use a loop in the second then, like this :

.then(data => {
    data["accounts"].forEach(item => {
        // append the data to the html here
        // you can get the website using item.website
    }
})

CodePudding user response：

As your json file contains,

{
    "accounts": [{
        "website": "netflix.com",
        "username": "[email protected]",
        "password": "aSecurePassword"
    }]
}

The code here in the last .then() should be

.then(function(data){
        div.classList.add('website');
        mainContainer.appendChild(div);
        div.innerHTML = ""   data.accounts[0].website
    })

CodePudding user response：

First of all, ensure you have the correct json format. In your case, it should look like this:

{
  "accounts": [
    {
      "website": "netflix.com",
      "username": "[email protected]",
      "password": "aSecurePassword"
    }
  ]
}

Then you can create a file with a .json extension and save the data there.

In you .js, fetch the data as follows assuming everything is under the same folder:

fetch("./json.json").then((response) =>
  response.json().then((data) => {
    let mainContainer = document.createElement("div");
    mainContainer.classList.add("website");
    mainContainer.innerHTML = "Website";
    let websiteDiv = document.createElement("div");
    websiteDiv.classList.add("website");
    websiteDiv.innerHTML = data.accounts[0].website;

    let userDiv = document.createElement("div");
    userDiv.classList.add("user");
    userDiv.innerHTML = data.accounts[0].username;

    let passwordDiv = document.createElement("div");
    passwordDiv.classList.add("password");
    passwordDiv.innerHTML = data.accounts[0].password;

    mainContainer.appendChild(userDiv);
    mainContainer.appendChild(passwordDiv);
    mainContainer.appendChild(websiteDiv);

    document.body.appendChild(mainContainer);
  })
);

Now, this should work in the case where you have only one record. If you have multiple records, consider using a loop so that you can iterate through your entire dataset.