jquery json配列の変更

PHPz
リリース: 2023-05-14 11:14:09
オリジナル
539 人が閲覧しました

フロントエンド開発では、JSON 配列を変更および操作する必要があるシナリオによく遭遇します。 jQuery はこれを実現するのに非常に役立ちます。この記事では、jQuery を使用して JSON 配列を変更する方法を紹介します。

  1. JSON 配列の取得

まず、JSON 配列を取得する必要があります。 JSON 配列を直接定義することも、Ajax リクエストを通じてサーバーから返された JSON 配列を取得することもできます。

次の JSON 配列をサーバーから取得したとします。

var users = [
  {
    "name": "张三",
    "age": 20,
    "gender": "male"
  },
  {
    "name": "李四",
    "age": 25,
    "gender": "female"
  },
  {
    "name": "王五",
    "age": 30,
    "gender": "male"
  }
];
ログイン後にコピー
  1. JSON 配列内の要素を変更します

JSON 配列を走査できます。条件に基づいて変更する要素を見つけます。

次の例は、25 歳のユーザーの年齢を 30 歳に変更する方法を示しています。

$.each(users, function(index, user) {
  if(user.age === 25) {
    user.age = 30;
  }
});
ログイン後にコピー
  1. JSON 配列に新しい要素を追加します

Push() メソッドを使用して、JSON 配列に新しい要素を追加できます。

次の例は、JSON 配列に新しいユーザーを追加する方法を示しています。

var newUser = {
  "name": "赵六",
  "age": 28,
  "gender": "male"
};
users.push(newUser);
ログイン後にコピー
  1. JSON 配列から要素を削除します。

次の手順を繰り返すことができます。 JSON 配列を取得し、条件に基づいて削除する要素を検索し、splice() メソッドを使用して JSON 配列から要素を削除します。

次の例は、25 歳のユーザーを削除する方法を示しています。

$.each(users, function(index, user) {
  if(user.age === 25) {
    users.splice(index, 1);
  }
});
ログイン後にコピー
  1. JSON 配列を JSON 文字列に変換します

JSON 配列を変更した後つまり、通常はサーバーに送信し、処理してから返す必要があります。この時点で、JSON 配列を JSON 文字列に変換する必要があります。

JSON.stringify() メソッドを使用して、JSON 配列を JSON 文字列に変換できます。

var usersString = JSON.stringify(users);
ログイン後にコピー
  1. JSON 文字列を JSON 配列に変換する

サーバーから JSON 文字列を取得した場合、変更する前にそれを JSON 配列に変換する必要があります。

JSON.parse() メソッドを使用して、JSON 文字列を JSON 配列に変換できます。

var usersString = '[{"name":"张三","age":20,"gender":"male"},{"name":"李四","age":25,"gender":"female"},{"name":"王五","age":30,"gender":"male"}]';
var users = JSON.parse(usersString);
ログイン後にコピー

上記は、jQuery を使用して JSON 配列を変更する方法です。以上の操作により、JSON配列の変更や操作が容易になり、より柔軟なフロントエンド開発が実現できます。

以上がjquery json配列の変更の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!