「JSON」json配列のインデックスを指定し要素を取得する

2021年9月7日

構文
1.const 配列名 =JSON.parse(jsonデータ)
2.配列の要素: 配列名「インデックス」

使用例

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<!DOCTYPE html>
<html>
<body>
<h2>インデックスを利用してjson配列の要素を取得</h2>
<div id="show"></div>
<div id="cft"></div>
<script>
//json文字列の定義
const cityJson = '["東京", "大阪", "福岡","横浜"]';
//jsonから配列に変換
const resArray = JSON.parse(cityJson);
//セレクタshowで配列のインデックス1の要素を表示
document.getElementById("show").innerHTML = resArray[1];
//セレクタcftで配列のインデックス3の要素を表示
document.getElementById("cft").innerHTML = resArray[3];
</script>
</body>
</html>
<!DOCTYPE html> <html> <body> <h2>インデックスを利用してjson配列の要素を取得</h2> <div id="show"></div> <div id="cft"></div> <script> //json文字列の定義 const cityJson = '["東京", "大阪", "福岡","横浜"]'; //jsonから配列に変換 const resArray = JSON.parse(cityJson); //セレクタshowで配列のインデックス1の要素を表示 document.getElementById("show").innerHTML = resArray[1]; //セレクタcftで配列のインデックス3の要素を表示 document.getElementById("cft").innerHTML = resArray[3]; </script> </body> </html>
<!DOCTYPE html>
<html>
<body>

<h2>インデックスを利用してjson配列の要素を取得</h2>
<div id="show"></div>
<div id="cft"></div>

<script>
//json文字列の定義
const cityJson = '["東京", "大阪", "福岡","横浜"]';

//jsonから配列に変換
const resArray = JSON.parse(cityJson);

//セレクタshowで配列のインデックス1の要素を表示
document.getElementById("show").innerHTML = resArray[1];

//セレクタcftで配列のインデックス3の要素を表示
document.getElementById("cft").innerHTML = resArray[3];
</script>

</body>
</html>

結果
大阪
横浜

JSON

Posted by arkgame