html JSON备忘单

Posted 2021-05-11

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html JSON备忘单相关的知识，希望对你有一定的参考价值。

{
    "people": [
        {
            "name": "Brad",
            "age": 35
        },
        {
            "name": "Pober",
            "age": 18
        },
        {
            "name": "Tom",
            "age": 52
        },
        {
            "name": "Richard",
            "age": 17
        }
    ]
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JSON Sandbox</title>
</head>
<body>

    <ul id="people"></ul>
    
    <script>
        // var person = {
        //     name: "Brad",
        //     age: 35,
        //     address:{
        //         street: "5 main street",
        //         city: "Boston"
        //     },
        //     children:["Brianna", "Nicholas"]
        // }        

        // person = JSON.stringify(person);
        // person = JSON.parse(person);

        // console.log(person.address.street);
        // console.log(person.children[0]);

        // var people = [
        //     {
        //         name: "Brad",
        //         age: 35
        //     },
        //     {
        //         name: "Pober",
        //         age: 18
        //     },
        //     {
        //         name: "Tom",
        //         age: 52
        //     },
        //     {
        //         name: "Richard",
        //         age: 17
        //     }
        // ];

        // console.log(people);
        // console.log(people[1]);
        // console.log(people[1].age);

        // var output = "";
        // for (let i = 0; i < people.length; i++) {
        //     const element = people[i];
        //     // console.log(element.name)
        //     output += "<li>"+people[i].name+"</li>";
        // }
        // document.querySelector("#people").innerHTML = output;

        var xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function() {
            if(this.readyState == 4 && this.status == 200){
                var response = JSON.parse(xhttp.responseText);
                console.log(response.people);
                var people = response.people;
                var output = "";
                for (let i = 0; i < people.length; i++) {
                    const element = people[i];
                    // console.log(element.name)
                    output += "<li>"+people[i].name+"</li>";
                }
                document.querySelector("#people").innerHTML = output;
            }
        };
        xhttp.open("GET", "people.json", true);
        xhttp.send();

    </script>
</body>
</html>