JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScript（jQuery）でJSONを解析して特定の名前と値のペアを表示する方法

JSONの解析にはparseJSON()を使用

jQueryでJSON文字列を解析（パース）するには jQuery.parseJSON() を使用します。そして、解析したオブジェクトから特定の名前と値のペアを取り出して表示したい場合は、$.each() 関数が便利です。

まず、例として次のようなJSONデータを用意し、これを解析してみましょう。

const APIData =
'[{"Name":"John","Age":21},{"Name":"David","Age":24},{"Name":"Bob","Age":20}]';
const getObject = jQuery.parseJSON(APIData);

APIData は文字列形式のJSON配列です。これを jQuery.parseJSON() に渡すことで、JavaScriptのオブジェクト配列へと変換されます。

続いて、完全なコードを見ながら、「Name」（名前）のペアを取得して表示する方法を確認していきましょう。

サンプルコード

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initialscale=1.0">
<title>Document</title>
</head>
<link rel="stylesheet"
href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<body>
<script>
    const APIData =
    '[{"Name":"John","Age":21},{"Name":"David","Age":24},{"Name":"Bob","Age":20}]';
    const getObject = jQuery.parseJSON(APIData);
    $.each(getObject, function (k,obj) {
       console.log(obj['Name']);
    });
</script>
</body>
</html>

このコードでは、$.each() を使って解析済みのオブジェクト配列を1件ずつループ処理し、各要素から Name の値だけをコンソールに出力しています。キー番号は引数 k、オブジェクト本体は引数 obj として受け取ります。

プログラムの実行方法

上記のプログラムを実行するには、ファイル名を「anyName.html（例：index.html）」として保存し、ファイルを右クリックしてください。その後、VS Codeエディターのメニューから「Open with Live Server」を選択すると、ブラウザー上でページが開かれます。

ページが読み込まれるとスクリプトが実行され、開発者ツール（F12キーで起動できるConsole）に結果が出力されます。

出力結果

このプログラムを実行すると、コンソールには次のように「Name」の値が順番に出力されます。

John
David
Bob

JavaScript（jQuery）でJSONを解析して特定の名前と値のペアを表示する方法

補足：モダンな書き方について

なお、jQuery.parseJSON() はjQuery 3.0以降で非推奨（deprecated）となっています。現在のブラウザーはすべてネイティブの JSON.parse() に対応しているため、新しいプロジェクトでは次のように書き換えることをおすすめします。

const getObject = JSON.parse(APIData);
getObject.forEach(obj => {
   console.log(obj['Name']);
});

どちらの方法でも結果は同じですが、JSON.parse() を使えばjQueryに依存しない軽量なコードになります。

  1. JavaScriptのJSON.parse()メソッドとは？基本の使い方とサンプルコードを解説

    JSON.parse()メソッドとはJSON.parse()メソッドは、JSON形式の文字列を解析（パース）し、そこからJavaScriptオブジェクトを生成するためのメソッドです。Web APIなどから受け取ったJSONデータをJavaScriptで扱える形に変換する際に、最もよく使われる手法の一つです。基本的な構文は以下の通りです。JSON.parse(text[, reviver])第1引数には解析対象のJSON文字列を指定し、省略可能な第2引数のreviver関数を使うと、変換後の値を加工することもできます。サンプルコード以下は、JSON.parse()メソッドを使ってJSON文字列を

  2. JavaScriptでテキストボックスの入力値を取得して表示する方法

    JavaScriptでは、valueプロパティを使ってテキストボックスに入力された値を取得し、innerHTMLを使うことでその値を段落（<p>要素）に表示することができます。この仕組みは、フォームの入力内容をリアルタイムに画面へ反映させたい場合などによく使われる基本的なテクニックです。 コード例 以下が実際のサンプルコードです。 <!DOCTYPE html> <html lang="en"> <head>    <meta charset="UTF-8">