Rendering json using jquery - javascript

I need a simple example that has a json data and I have to parse it and render in html. Can someone suggest me a simple way to do this?

You can create a string from an object in JavaScript like this...
var jsonString = JSON.stringify(myJsonObject);
Then you can use that string to apply to a html element. For example...
document.getElementById('myDivID').innerText = jsonString;
With JQuery you can update a DIV with the following...
$("#MyDiv").html(jsonString);

I'm not entirely sure what you are asking. You do not have to use jQuery specifically to parse the object. All you need is standard JavaScript.
Given a JSON string, you can parse it into a JavaScript object using the JSON library
var myJSONObject = JSON.parse(myJSONString);
Or into a string from an object:
var myJSONString= JSON.stringify(myJSONObject);
If you are looking for the individual items of a JSON structure, then you can use a for loop:
for (var key in myJSONObject){
alert(myJSONObject[key]);
}
I've alerted myJSONObject[key] in the above, however, you can do what you want with it.
You would use jQuery to select out the container into which you wanted the info to be displayed, as suggested in usefan's answer.

Related

Parse html string to json using htmlparser2

I'm trying to use htmlparser2 (https://www.npmjs.com/package/htmlparser2) to parse a html raw string into json.
But its usage only logs out the tag/text, what I want is the json like its livedemo (http://demos.forbeslindesay.co.uk/htmlparser2/), so that I can filter the elements I want.
Any help or suggestions would be appreciated!
took a look of the source codes, it seems there is a helper method parseDOM that can do the trick:
var htmlparser = require("htmlparser2");
elements = htmlparser.parseDOM(htmlString);
so the elements will be the array of objects like the livedemo.
hope this will help anyone encounters the same problem.

serialize HTML tags/objects in javascript

I know there are a lot of questions on serializing objects in Javascript, but I'm trying to serialize a string to JSON objects after using the method .getData() from one of the APIs for later use. It returns a string, but I can't get any attributes.
Here is an example of what I did. I need to serialize this to a JSON object, but it just returns me this type of object. Is there a way that I can get the source of this audio element after serializing it with JSON.stringtify() ?
http://imgur.com/K4RhCht
You can use JSON.parse(theSerializedElement), set it as the innerHTML of an HTML element that you can dynamically create and then use DOM methods to get the attribute.
If I am understanding you correctly you want to serialize DOM element's attributes or some of them, or may be data attached to it. You will need to iterate through them on your own.
So you have some HTML as a string, and you want to get the value of an attribute in the audio tag?
EDIT: Assuming your string is in the data variable.
If you're using jQuery:
var source = jQuery(data).attr('src');
Without jQuery, it's still fairly straightforward.
var container = document.createElement('div');
container.innerHTML = data;
var source = container.querySelector('audio').getAttribute('src');

JS: convert string into object

I have code
data = "{isShowLoginPopup:true,newFavOfferId:1486882}";
I want to convert it into JS object (not in JSON) and use it in this way:
data.newFavOfferId = ...
How can I do this?
If your source is trusted, the simplest solution is to use eval :
data = eval('('+data+')');
If you don't trust the source, then you'd better specify what you can have and parse the string manually (not terribly hard if you have only one level of properties for example).
Another solution (depending on your real data) would be to change your data into JSON by inserting the missing quotes :
data = JSON.parse(datareplace(/({|,)\s*([^:,}{]+)\s*(:)/g,'$1"$2"$3'));
just remove the quotes
data = {
isShowLoginPopup:true,
newFavOfferId:1486882
};
Fiddle: http://jsfiddle.net/QpZ4j/
just remove quotes "" from the
data = "{isShowLoginPopup:true,newFavOfferId:1486882}";
DEMO
Whilst on the surface this looks like JSON data, it's malformed and therefore it does not work directly with JSON.parse(). This is because JSON objects require keys to be wrapped in quotes...
therefore:
"{isShowLoginPopup:true,newFavOfferId:1486882}"
as valid JSON should be:
"{\"isShowLoginPopup\":true,\"newFavOfferId\":1486882}"
So what you have there in fact IS a JavaScript object, not JSON, however the problem you have is that this is a JavaScript object as a string literal. If this is hard coded, then you need to just remove the " from the beginning and end of the string.
var data = {isShowLoginPopup:true,newFavOfferId:1486882};
If this object is serialized and requires transmission from/to a server etc, then realistically, it needs to be transmitted as a JSON formatted string, which can then be de-serialized back into a JavaScript object.
var data = JSON.parse("{\"isShowLoginPopup\":true,\"newFavOfferId\":1486882}");

Saving javascript objects as strings

This is for a gaming application.
In my game I want to save special effects on a player in a single field of my database. I know I could just put a refrence Id and do another table and I haven't taken that option off the table.
Edit: (added information) This is for my server in node not the browser.
The way I was thinking about storing the data is as a javascript object as follows:
effects={
shieldSpell:0,
breatheWater:0,
featherFall:0,
nightVision:0,
poisonResistance:0,
stunResistance:0,
deathResistance:0,
fearResistance:0,
blindResistance:0,
lightningResistance:0,
fireResistance:0,
iceResistance:0,
windResistance:0}
It seems easy to store it as a string and use it using effects=eval(effectsString)
Is there an easy way to make it a string or do I have to do it like:
effectsString=..."nightVision:"+effects.nightVision.toString+",poisonResistance:"+...
Serialize like that:
JSON.stringify(effects);
Deserialize like that:
JSON.parse(effects);
Use JSON.stringify
That converts a JS object into JSON. You can then easily deserialize it with JSON.parse. Do not use the eval method since that is inviting cross-site scripting
//Make a JSON string out of a JS object
var serializedEffects = JSON.stringify(effects);
//Make a JS object from a JSON string
var deserialized = JSON.parse(serializedEffects);
JSON parse and stringify is what I use for this type of storatge
var storeValue = JSON.stringify(effects); //stringify your value for storage
// "{"shieldSpell":0,"breatheWater":0,"featherFall":0,"nightVision":0,"poisonResistance":0,"stunResistance":0,"deathResistance":0,"fearResistance":0,"blindResistance":0,"lightningResistance":0,"fireResistance":0,"iceResistance":0,"windResistance":0}"
var effects = JSON.parse(storeValue); //parse back from your string
Here was what I've come up with so far just wonering what the downside of this solution is.
effectsString="effects={"
for (i in effects){
effectsString=effectsString+i+":"+effects[i]+","
}
effectsString=effectsString.slice(0,effectsString.length-1);
effectsString=effectsString+"}"
Then to make the object just
eval(effectsString)

Javascript stringed array into an actual array

Ok. So the title sounds confusing but that's probably the best way to describe it.
I'm using the TextExt jQuery plugin to create a tag list in a form. However the plugin creates an array in a string when submitted. eg. "["this","that","other"]".
How can I convert this to an actual array? ["this","that","other"]
Cue really simple answer I completely overlooked.
Since you are using jQuery you can just pass it through jQuery.parseJSON like this:
var array = jQuery.parseJSON('["this","that","other"]')
Looks like JSON. So then use JSON.parse(), or better jQuery.parseJSON() when you already have jQuery inlcuded.

Categories

Resources