Get and print informations from Json File in HTML website-CodePudding

I need to create a basic website where I have to print informations from a Json file. With Javascript. For each person of my json file I want to show on my html website, the picture of this person with the link in the json, and his first name and his date of birth.

What I would like to have it's, the picture of the results, below a small title : Personnal information with some informations from the json.

But I have no idea how to do that cause I'm a beginner in Javascript. Can you help me please ? Thanks a lot Theo

{
    "number_of_results": 20,
    "results": [
        {
            "name": {
                "first": "Test",
                "last": "Test"
            },
            "date_of_birth": {
                "date": "1985-12-03T02:05:33",
                "age": 36
            },
            "picture": {
                "large": "apple.png",
            },
        },
        {
            "name": {
                "first": "Test1",
                "last": "Test1"
            },
            "date_of_birth": {
                "date": "1999-11-18T20:05:06",
                "age": 33
            },
            "picture": {
                "large": "apple1.png",
            }
         }
}

This is my html

<!DOCTYPE html>
<html>

<head>
    <title>Test</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    <link rel="stylesheet" type="text/css" href="./styles.css">
    <script type="text/javascript" src = "test.js">
    </script>
</head>

<body>


<div class="album py-5 bg-light">
        <div class="container">
            <br><h1>Persons</h1><br>
            <div class="row">
                <div class="card-group">     
         
                     <div id="myData"></div>
                        

                </div>
            </div>
        </div>
</div>

I tried this king of script, but it doesn't work

    fetch('test.json')//file json objects
        .then(function (response) {
            return response.json();
        })
        .then(function (data) {
            appendData(data);
        })
        .catch(function (err) {
            console.log('error: '   err);
        });
function appendData(data) {
    var mainContainer = document.getElementById("myData");
    for (var i = 0; i < data.results.length; i  ) {
        var img = document.createElement("img");
        img.src = data.results[i].picture.large;
        mainContainer.appendChild(img);
        var div = document.createElement("div");
        div.innerHTML = 'Email: '   data.results[i].email   ' First Name :'   data.results[i].name.first;
        mainContainer.appendChild(div);
    }
}

CodePudding user response：

It appears that your data structure doesn't quite match what you had in your script so some of the corrections here (from your version) are:

change .firstName to .name.first
reference results array so results.name becomes results[i].name
email shows undefined but that's because it is not in the data (at least not in your example)
the image tag shows up with the right source, but because those are not full urls, the image will likely appear broken until the data is more realistic.

The following script should append both the div with the name/email and the image.

function appendData(data) {
    var mainContainer = document.getElementById("myData");
    for (var i = 0; i < data.results.length; i  ) {
        var div = document.createElement("div");
        div.innerHTML = 'Email: '   data.results[i].email   ' First Name :'   data.results[i].name.first;
        mainContainer.appendChild(div);
        var img = document.createElement("img");
        img.src = data.results[i].picture.large;
        mainContainer.appendChild(img);
    }
}

CodePudding user response：

Try This:

function appendData(data) {
    var mainContainer = document.getElementById("myData");
    for (var i = 0; i < data.results.length; i  ) {
        var div = document.createElement("div"); 
        div.innerHTML = 'Email: '   (data.results[i].email?data.results[i].email:'')   ' First Name :'   (data.results[i].name?data.results[i].name.first:'');
        mainContainer.appendChild(div);
    }
}