【JavaScript】 jsonを配列にバラす方法【ミニ記事】〜Chart.jsを使ってみよう編〜　Part2

2023年10月28日2024年6月22日

概要

前回の記事を読んで頂いた方、ありがとうございます。

本記事はPart2ですが、単体でもお読み頂けます。

STEP

PART 1 ローカルのjsonファイルを読み込む方法

STEP

PART2 jsonを配列にバラす方法

本記事

STEP

PART3 ローカルのjsonファイルを読み込み、Chart.jsでグラフ作ってみた

成果物

1.コードを実行
2.ファイルの選択
3.デベロッパーツールのコンソールで結果を確認できます。

コード

HTML

<!DOCTYPE html>
<html lang="ja">

<head>

    <meta charset="utf-8">

    <title>JSONの配列化</title> 
   
</head>

<body>
    
    <h1>This is Body</h1>
    <input type="file" accept=".json" id="filedata" onchange="readjson()">


</body>

<script>


    var Chartlabels=[];
    var Chartlabel=[];
    var Chartdata=[];


    //ファイルを読み込む関数
    function readjson() {

        const file = document.getElementById("filedata").files[0];
        const reader = new FileReader();

    
        //ファイルの読み込み
        reader.readAsText(file);
        //ファイルが読み込まれた時発動。中身をjson形式で読みこむ
        reader.onload = (event) => {

            const data = JSON.parse(event.target.result);
            
            console.log(data);
            Split(data);

        };
        

    }

    //jsonをバラして配列に格納
    function Split(data){

        
        for(let loop=0;loop<3;loop++){

            Chartlabels[loop]=data.databases[loop].labels;
            console.log("ls:",data.databases[loop].labels);

            Chartlabel[loop]=data.databases[loop].label;
            console.log("lb:",data.databases[loop].label);

            Chartdata[loop]=data.databases[loop].data;
            console.log("data:",data.databases[loop].data);

        }

    }


</script>


</html>

sample.json

{
    "databases":[

        {
            "labels":"コーラ",
            "label":"コーラ",
            "data":"50"
        },

        {
            "labels":"サイダー",
            "label":"サイダー",
            "data":"20"
        },
        
        {
            "labels":"モンスター",
            "label":"モンスター",
            "data":"30"
        }

    ]

}