BinaryDevelop
  1. ホーム
  2. Web制作
  3. html5

HTML5でjsonオブジェクトを使用するためのサンプルコード

2022-02-01 06:18:57

次のコード例では、HTML5でjsonオブジェクトを使用する方法を紹介します。 

<!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 object usage</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>
        <div class="prism-player" id="J_prismPlayer" style="position: absolute"></div>
        <script>
        var students = {
          xiaomin: {
            name: "xiaoming",
            grade: 1
          },
          teemo: {
            name: "teemo",
            grade: 3
          }
        }
        students = JSON.stringify(students); //transform JSON into a string and store it in a variable
        console.log(students);
        localStorage.setItem("students",students);//Save the variable to localStorage
        var newStudents = localStorage.getItem("students");
        newStudents = JSON.parse(students); //convert to JSON
        console.log(newStudents); // print out the original object
    // alert(newStudents.length);
        alert(newStudents.xiaomin.name);
         // json array type string to take values
        var jsonStr = '[{"id":"01","open":false,"pId":"0","name":"Department A"} ,{"id":"01","open":false,"pId":"0","name":"Department A"},{"id":" quot;:"011","open":false,"pId":"01","name":"Department A"},{"id":" quot;03","open":false,"pId":"0","name":"Department A"},{"id":"04" ;,"open":false,"pId":"0","name":"Department A"}, {"id":"05","open ":false,"pId":"0","name":"Department A"}, {"id":"06","open":false ,"pId":"0","name":"Department A"}]';
        var jsonObj = JSON.parse(jsonStr);//convert to json object
        for(var i=0;i<jsonObj.length;i++){
                alert(jsonObj[i].id); //take the value in json
        }
        console.log(jsonObj)
        var jsonStr1 = JSON.stringify(jsonObj)
        console.log(jsonStr1+"jsonStr1")
        </script>
    </body>
</html>

追記：下記参照 Html5でJSONオブジェクトとStringを相互変換する

モバイルの急速な発展に直面して今、データを提供する方法は、古いPCではありません - >JSON形式の使用を促すPCインタフェース、H5以前のJSでは、私は前のH4のJSで述べたevalメソッドのJSONの処理、eval（） 、H5のJSONと次のように文字列に変換されます。

            文字列をJSONオブジェクトに変換します。                        

var jsonObj;
                            function myParse(){
                          var jsonStr=document.querySelector("#txtJsonStr").value;
                            jsonObj=JSON.parse(jsonStr);
                            }

          JSONオブジェクトからStringへの変換。                    

     function myStringify(){
                          var txtJson=document.querySelector("#txtJsonStr");
                           var jsonStr2=JSON.stringify(jsonObj); //here jsonObj is a JSON object
                                   txtJson.value=jsonStr2;
                           }

概要

上記はHTML5でjsonオブジェクトを使用するサンプルコードです、お役に立てれば幸いです。また、スクリプトハウスのウェブサイトを応援していただき、ありがとうございます。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します