jQuery JSONへ変換

JSONオブジェクトへの変換手順をまとめました

JSON形式でデータ文字列を宣言
JSON.parseによりJSON化
初心者向けおすすめ書籍をご紹介！

JSON形式でデータ文字列を宣言

果物をまとめた「fruits」オブジェクトを用意
hidden項目に値設定

<input id="jsondata" name="JsonData" type="hidden" />

/**
 * Jsonデータを設定
 */
function setJsonData() {

	var fruits= [{
		   "name" : "ぶどう",
		   "number" : "10"
		},
		{
		   "name" : "りんご",
		   "number" : "20"
		},
		{
		   "name" : "みかん",
		   "number" : "30"
		}];

	$('#jsondata').val(JSON.stringify(fruits));
}

/**

* Jsonデータを設定

function setJsonData() {

var fruits= [{

"name" : "ぶどう",

"number" : "10"

{

"name" : "りんご",

"number" : "20"

{

"name" : "みかん",

"number" : "30"

}];

$('#jsondata').val(JSON.stringify(fruits));

}

JSON.parseによりJSON化

JSON.parseを使用して変換

/**
 * Jsonデータを取得
 */
function getJsonList() {
	var fruits = $("#jsondata").val();//指定した要素が持つvalue値を取得
	var jsonObj = JSON.parse(fruits);
	console.dir(jsonObj);
	for(var i = 0; i < jsonObj.length; i++)　{
	    $("#output").append("" + jsonObj[i].name + "（" + jsonObj[i].number + "個）");
	}
}

/**

* Jsonデータを取得

function getJsonList() {

var fruits = $("#jsondata").val();//指定した要素が持つvalue値を取得

var jsonObj = JSON.parse(fruits);

console.dir(jsonObj);

for(var i = 0; i < jsonObj.length; i++)　{

$("#output").append("" + jsonObj[i].name + "（" + jsonObj[i].number + "個）");

}

初心者向けおすすめ書籍をご紹介！

jQueryの基本的なところから学びたい人向け

リンク

プログラミングを学んだけど、実際Webシステムで
どうやって開発するの？という方向けの書籍です

リンク

Kindle Unlimitedなら無料で読めます
初回登録、30日間無料！

Kindle Unlimitedを30日間無料体験する