Home > Article > Web Front-end > Example code for using json objects in HTML5

Example code for using json objects in HTML5

青灯夜游forward: 2018-10-09 15:23:422438browse

This article mainly introduces the example code for using json objects in HTML5. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

The following is an introduction to the method of using json objects in HTML5 through example code. The specific code is as follows:

<!DOCTYPE html>
<html>
    <head>
     <meta charset="UTF-8">
     <meta name="viewport"   content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"/>
     <title>json对象用法</title>
     <link rel="stylesheet" href="//g.alicdn.com/de/prismplayer/2.6.0/skins/default/aliplayer-min.css" />
     <script type="text/javascript" src="//g.alicdn.com/de/prismplayer/2.6.0/aliplayer-min.js"></script>
    </head>
    <body>
        <p  class="prism-player" id="J_prismPlayer" style="position: absolute"></p>
        <script>
        var students = {
          xiaomin: {
            name: "xiaoming",
            grade: 1
          },
          teemo: {
            name: "teemo",
            grade: 3
          }
        }
        students = JSON.stringify(students); //将JSON转为字符串存到变量里
        console.log(students);
        localStorage.setItem("students",students);//将变量存到localStorage里
        var newStudents = localStorage.getItem("students");
        newStudents = JSON.parse(students); //转为JSON
        console.log(newStudents); // 打印出原先对象
    //  alert(newStudents.length);
        alert(newStudents.xiaomin.name);
         //json数组类型字符串取值
        var jsonStr = &#39;[{"id":"01","open":false,"pId":"0","name":"A部门"},{"id":"01","open":false,"pId":"0","name":"A部门"},{"id":"011","open":false,"pId":"01","name":"A部门"},{"id":"03","open":false,"pId":"0","name":"A部门"},{"id":"04","open":false,"pId":"0","name":"A部门"}, {"id":"05","open":false,"pId":"0","name":"A部门"}, {"id":"06","open":false,"pId":"0","name":"A部门"}]&#39;;
        var jsonObj =  JSON.parse(jsonStr);//转换为json对象
        for(var i=0;i<jsonObj.length;i++){
                alert(jsonObj[i].id);  //取json中的值
        }
        console.log(jsonObj)
        var jsonStr1 = JSON.stringify(jsonObj)
        console.log(jsonStr1+"jsonStr1")
        </script>
    </body>
</html>

Supplement: Take a look belowConversion between JSON objects and String in Html5

Faced with the rapid development of mobile terminals, the way of providing data is no longer the previous PC-->PC interface, which prompted the use of JSON format. In JS before H5, I mentioned the eval method, eval() in the previous JS processing of JSON in H4. The conversion between JSON and String in H5 is as follows:

String converted to JSON object: use use using using using ‐ out out out out‐ ‐ ‐ ‐ ‐ ‐ ‐ #The above is the example code for using json objects in HTML5 introduced to you. I hope it will be helpful to your learning. For more related tutorials, please visit

Html5 Video Tutorial

Related recommendations: php public welfare training video tutorial

HTML5 graphic tutorial

HTML5Online Manual

The above is the detailed content of Example code for using json objects in HTML5. For more information, please follow other related articles on the PHP Chinese website!

php json html5 String JS 对象

Statement：

This article is reproduced at:jb51.net. If there is any infringement, please contact admin@php.cn delete

Previous article：Canvas pixel point operation video green screen cutoutNext article：Canvas pixel point operation video green screen cutout

See more

Example code for using json objects in HTML5

Related articles