Storing json in the DOM

JavaScript
1

Working on a CMS and wanted to know if anybody could give me some advice on the best way (if possible) of storing json in the DOM. Thinking of storing it in a hidden input but would need to turn into a string (somthing similar to serialize in php?).

I would need to then revert it back into json when ready to use.

I use jquery 1.4.2. Had a look in api but couldn’t seem to find anything.

Any Clues?

Thanks in advance.

2

thanks for reply, yep that’s what i though. Thought i’d be able to collect data in obj and then insert into an input tag for future use. Here’s my code, what am i doing wrong?

	
        //add custom product to order
	$("#custom_product_details a").live("click", function(){

		customName = $("input[name='custom_name']").val();
		customDesc = $("input[name='custom_description']").val();
		bouquetOption = $("select[name='custom_description']").val();
		customQuantity = $("input[name='custom_quantity']").val();
		customTotalCost = $("input[name='custom_total_cost']").val();
				
		//stock association array

		stockAssoc = new Array();
		$.each($(".custom_stock_assoc_div"), function(){
			
			producId = $(this).attr('value');
			productQuantity = $(this).find("input[name='stock_assoc_quantity']").val();
			
			objectToMerge = { 
				"productid" : producId,
				"quantity" : productQuantity
			};
			
			stockAssoc.push(objectToMerge);
		});
				
		//create a json object
		var customObj = {
			"name": customName,
			"desc": customDesc,
			"bouquet": bouquetOption,
			"quantity": customQuantity,
			"totalcost": customTotalCost,
			"stockassoc": stockAssoc
		}
		
		contentToLoad = '<div class="display_custom_item" value="'+customObj+'">';

		if(isFinite(customObj.bouquet)){
			if(customObj.bouquet != 0){
				contentToLoad += "<p class='bouquet_option'>as a <span>"+customObj.bouquet+"</span> Bal Bouq</p>";
			}
		}
		
		contentToLoad += '<div class="custom_name_display"><p class="name">'+customObj.name+'</p></div><p class="quantity">Quantity: <span>'+customObj.quantity+'</span></p><a href="#"><img src="'+CI_ROOT+'images/anyclues.png"/></a><a href="#"><img src="'+CI_ROOT+'images/page_white_edit.png"/></a><a href="#"><img src="'+CI_ROOT+'images/remove_red.png"/></a></div>';
		
		$("#customs_addorder").prepend(contentToLoad);
		alert('added to package');
		
		return false;
	});

everything else works as i want apart from this line:


		contentToLoad = '<div class="display_custom_item" value="'+customObj+'">';

when i look in DOM is see this

<div value="[object Object]" class="display_custom_item">

it obviously isn’t expanding

thanks for your help. I’m struggling to get my head round this.

3

JSON, as you probably know, is just a data-interchange format. You can embed a piece of JSON wherever you want – it’s just like regular textual content on the page. You’ll obviously want it to be hidden though – even to readers with CSS disabled. The best way is probably to put it in a script element and change the type to “text/json” or something else (it doesn’t really matter):


<script type="text/json" id="myjson">
{
    "foo": "bar",
    "bar": 1234
}
</script>

Notice that I’ve given it an ID so that it can be retrieved via JS:


var myjsonEl = document.getElementById('myjson').innerHTML,
    json = myjsonEl.text || myjsonEl.textContent || myjsonEl.innerHTML || '';

// Do something with json...