1. ホーム
2. パソコン
3. HTML & CSS

【javascript】JSONファイルの追加・削除の方法とオブジェクト形式との変換 stringfy() parse()について

投稿日 : 2022年05月01日 更新日 :

JSONとは？

javascript上でのJSONデータ

// JSON形式
const json = {
  "name": "tanaka",
  "age": "28",
  "phone": "090-1234-5678"
};

// オブジェクト形式
const obj = {
  name: "tanaka",
  age: "28",
  phone: "090-1234-5678"
};

console.log(json);
console.log(obj);

JSONの配列構造

const json = [
  {  // データ1
    "name": "tanaka",
    "age": "28",
    "phone": "090-0123-4567",
  },
  {  // データ2
    "name": "sato",
    "age": "25",
    "phone": [  // 電話データ2つ
      "080-0987-7654",
      "090-3456-7890",
    ]  
  },
]

JSONデータの取得

console.log(json[0].name);
// 結果 => tanaka
console.log(json[1].phone[1]);
// 結果 => 090-3456-7890

JSONデータの追加

json[0].position = "社長";

pushを使う方法

json.push({ name: "suzuki", age: "35", phone: "090-1357-2468" });

【javascript】配列の中身を追加（push, unshift）、削除(pop, shift)する方法

JSONデータの削除

delete json[1].phone;

popを使って一番最後のデータを削除

json.pop();

JSONデータのエンコード stringify

   const obj = [
  {
    name: "tanaka",
    age: "28",
    phone: "090-0123-4567",
  },
  {
    name: "sato",
    age: "25",
    phone: ["080-0987-7654", "090-3456-7890"],
  },
];

let jsonData = JSON.stringify(obj);
console.log(jsonData.name);

JSONデータのデコード parse

 let objData = JSON.parse(jsonData);
console.log(objData);

まとめ