JSONに追加・変更・削除

オブジェクト(JSON)を表示

JSONではキーの値とデータがダブルクォーテーション(")で囲われている必要がある。データが数字の場合はダブルクォーテーションは必要ない。

JSONのフォーマットチェックのサイト

JSONのデータ(例)

配列は"["と"]"で囲み、連想配列(オブジェクト)は"{"と"}"で囲む。
下記のdataは配列の中に部署とスタッフ職員のキーを持つ連想配列があり、職員の中には氏名と年齢のキーを持つ連想配列が入っているという配列です。

var data = 
{
  "営業部" : {"田中一朗":{"住所":"東京都港区","年齢": 52 },
              "佐藤博史":{"住所":"東京都目黒区", "年齢": 32 },
              "鈴木太郎":{"住所":"東京都練馬区", "年齢": 42 }
             },
  "経理部" : {"松山花子":{"住所":"東京都豊島区", "年齢": 40 },
              "広岡良子":{"住所":"東京都杉並区", "年齢": 30 },
              "岡田弘子":{"住所":"神奈川県川崎市", "年齢": 20}
             }
};

JSONを変更・追加・削除する

data["key1"]["key2"]["key3"] = 〇〇〇 と書く(keyはダブルクォーテーションで囲む必要あり)か、
data.key1.key2.key3 = 〇〇〇と書く(この書き方だとキーにダブルクォーテーションをつけてはダメ)

// 配列の内容を書き替えるには？
//下記の2通りの書き方ができる
data["経理部"]["松山花子"]["住所"] = "千葉県千葉市";
data.営業部.鈴木太郎.住所="千葉県印西市";

// 新しい人物を追加
data["営業部"]["永井政人"] = {"住所":"埼玉県さいたま市", "年齢": 18};
data.経理部.水出博司 =  {"住所":"神奈川川崎市", "年齢": 18};

 //新しい部と人物を追加
data["開発部"] = {"加藤博男":{"住所":"神奈川県小田原市", "年齢": 25}};

//住所・年齢の配列を作って、一段上の個人の名前の配列に入れて、それを配列(data)に入れる
arr1 = {};
arr1 = {"住所":"埼玉県所沢市", "年齢": 58};
arr2 = {};
arr2["伊藤博文"] = arr1;
data["技術部"] = arr2;

//新しい部に追加する
data.技術部.土屋華子 =  {"住所":"神奈川横浜市", "年齢": 20};

//空の配列を使ってキーとデータを入れて、さらに一段上の空の配列を作って入れ、それを配列(data)に入れる
arr1 = {};
arr1["住所"] = "東京都千代田区";
arr1["年齢"] = 45;
arr2 = {};
arr2["高田正志"] = arr1;
data["研究部"] = arr2;

//キーを変更する場合はコピー、変更、追加、削除を行う
//"松山花子"を"松原ゆり子"と書き替える
data["経理部"]["松原ゆり子"] = data["経理部"]["松山花子"];
delete data["経理部"]["松山花子"];
    
//結果を表示
for(var key1 in data)
{
 $("#out1").append("
  • " + key1 + "
    • ");
 for(var key2 in data[key1])
 {    
  $("#out1").append("
  • " + key2 + "（" + data[key1][key2].年齢 + "歳）　" + data[key1][key2].住所 + "
    • ");
 }
}

    上記スクリプトの結果↓

      JSONを保存する

      上記の変更後のJSONを保存（PHPにPOST）し、書き出した結果をJSON文字列で表示、さらにJSON配列にしてリストで表示する。

       //JSON(オブジェクト)を保存する
 $.post(
  'jsonWrite.php',
  {json_data: data, file_name: "json/data1.json" },
  function( data, textStatus )
  {
   if( textStatus == 'success' )
   {
     $("#out2").append("<li><strong>書出し成功！</strong></li>");
   }
   $("#out2").append("<li>"+data+"</li>");
   listSakusei(data);
  }
  ,'html'
 );

 // dataを配列（オブジェクト）にしてリスト表示する関数
 function listSakusei(data)
 {
   var data3 = JSON.parse(data);//JSON文字列を配列（オブジェクト）にする
   for(var key1 in data3)
   {
    $("#out2").append("<li><strong>" + key1 + "</strong></li>");
    for(var key2 in data3[key1])
    {    
     $("#out2").append("<li>" + key2 + "（" + data3[key1][key2].年齢 + "歳）　" + data3[key1][key2].住所 + "</li>");
    }
   }
 }
    
      // JSONを書きだすPHP
<?php
if($_SERVER["REQUEST_METHOD"] == "POST")
{
 $data = $_POST['json_data'];
 $file_name = $_POST['file_name'];
 $json = fopen($file_name, 'w+b');
 fwrite($json, json_encode($data, JSON_UNESCAPED_UNICODE));
// JSON_UNESCAPED_UNICODE:マルチバイト文字をJSONにエンコードした場合エスケープされ文字化けに見えるのを避けるため
 fclose($json);
//書き出したjsonを読み込んで返す
 $json2 = file_get_contents($file_name);
 print $json2;
}
?>

        JSONを読み込む

        $.getJSON(読み込むJSONファイル , 読み込んだ時の処理・・となる。
        読み込んだJSONはオブジェクト(配列)として入るのでJSON.parse()は不要。 

         //JSON(オブジェクト)を読み込む。下記の3行目のみ
 $(function() {
   $.getJSON("json/data1.json" , function(data) {
    listSakusei(data, "#out3");
   });
 });