Develop Reference

Using json storage, get the object with jquery code and save into a variable with the jquery result

I'm using a tour system called hopscotch, We wanted to be able to make these tours on the fly and as they where written in a JSON format we added it to our database for our site.
The issue is, to point at an element we need to use an ID or jquery or js document.querySelector("#content p") and when I parse (with JSON.parse) this will tell me that the JSON format is invalid, which is fair, but then if I don't parse it, it goes into the variable but it does not run the js or jquery code.
I have a feeling what I am trying to do is not possible however if anyone has any clue to what I can do to get this JSON or JSON like formatted text from the database and run the Jquery when it gets to the code, and adds the results of that query into the variable.
Thanks for helping.
EDIT
Example JSON that I want to store in my database, at the end of the code is the command that runs the tour.
I need to get the JSON into the var tour which works, and as explained before wont work if there is code like document.querySelector("#content p"), in it.
It looks like it just adds the document.querySelector("#content p"), as text. So when I console the tour var it still displays it as document.querySelector("#content p"), and not as result of that command.
var tour = {
id: "hello-hopscotch",
steps: [
{
title: "My Header",
content: "This is the header of my page.",
target: "header",
placement: "right"
},
{
title: "My content",
content: "Here is where I put my content.",
target: document.querySelector("#content p"),
placement: "bottom"
}
]
};
// Starts the tour!
hopscotch.startTour(tour);
To get the JSON I am just running a database query and then at this time parsing it though the JSON.parse command into the tour variable, which is then run as above.
Plugin Website: http://linkedin.github.io/hopscotch/

HOW to update and display JSON file dynamically on click of a button?

I am creating an addon in which, on click of a toolbar button, a panel is displayed which contains checkboxes and a save button. On clicking the save button, the selected checkbox`s data should be saved/updated in a JSON file which should be displayed after clicking save.
Moreover, the data dynamically updated in JSON file should be available even after browser restart.
Also the JSON file should be saved in file system or local storage?
Is this possible.. plz help... And plz ask if u need more info. Below is the addonScript which I used:-
var self = require('sdk/self');
var data = require("sdk/self").data;
var text_entry = require("sdk/panel").Panel({
contentURL: data.url("CheckboxAddon.html"),
//contentScriptFile: data.url("my-script.js")
});
// button creation
require("sdk/ui/button/action").ActionButton({
id: "show-panel",
label: "Show Panel",
icon: {
"16": "./star-icon.png",
},
onClick: handleClick
});
// Show the panel when the user clicks the button.
function handleClick(state) {
text_entry.show();
}
text_entry.on("show", function() {
text_entry.port.emit("show");
});
text_entry.port.on("text-entered", function (text) {
console.log(text);
text_entry.hide();
});

One of the things to keep in mind is that JSON is a subset of javascript, so you just write a javascript object which is also valid JSON. In your case I doubt this is going to be something you'll have to be worrying about. to achieve the effect you're looking for you can simply throw whatever data into dataString = JSON.stringify(data) or dataString = JSON.stringify(data, null, "\t") to give it that json format look. Conversely you would use JSON.parse(dataString) to turn a string into a javascript object.
Definitely use the json.org documentation a guide for writing JSON objects yourself.
the documentation on MDN has good examples, look at the JSON.stringify and JSON.parse in the methods section

Webix - How do I parse JSON from a URL before using it in a data table?

I'm messing around with Webix and the League of Legends API to see some champion data. The League API just gives you back giant JSON files that you can use to display data. However, I'm not sure what the best way to go about parsing these files for use in my data views are.
Here's my webix code for the datatable:
var leagueTable = {
rows: [
{
view: "template",
type: "header", template: "Champion Stats"
},
{
view: "datatable",
autoConfig: true,
url: RiotApiUrlUtility.getFindSummonerUrl("someSummoner")
}
]
};
The URL works and I get back the JSON I'm expecting. However, the JSON is structured such that the table doesn't display data how I want. (The table is rendered fine and it shows my summoner name from the json in the table, but the relevant data is nested further so the default parsing of the json doesn't know how to put it in the table).
I've looked through the documentation for webix and it might be the case that I have to use a DataProcessor, but the documentation is confusing without any concrete examples. I'm sure this operation must be pretty simple and I'm just missing something. Can anyone assist? Thanks.

Figured it out. I did:
webix.ajax().get(RiotApiUrlUtility.getFindSummonerUrl("aSummoner"),{
error:function(text, data, XmlHttpRequest){
alert("error");
},
success:function(text, data, XmlHttpRequest){
var data = JSON.parse(text);
$$('champDataTable').parse(data.aSummoner);
}
});

FullCalendar json feed crash

I'm setting a Full Calendar using eventSources with a JSON feed.
I'm not sure wether this is a bug or me, but I can't setup my eventSources if I don't put an empty event source like this
eventSources: [{
events: []
},
{
url: '/myfeed',
}]
right before my JSON feed.
If I don't send the empty event, it seems that an internally var rangeStart is not initialized and then, I got a crash line 9050 saying that format can't be called on undefined.

Getting started with extJS

I don't get what I'm doing wrong.
I'm trying to populate a form from a JSON string from the server and it doesn't work. I get nothing at all back. I examine the object and it's undefined. I've been beating my head against the wall for 3 days now. I need a simple example that works and I'll build from there.
Here's the simple example that I've been trying to use:
var messages = new Ext.data.JsonStore({
url: '/user/' + user_id,
method: 'GET',
root: 'user',
fields: [
{name: 'user_id'},
{name: 'first_name'}
],
listeners: {
load: messagesLoaded
}
});
messages.load();
function messagesLoaded(messages) {
console.log(messages);
}
Here's my JSON string:
{"success":"true","user":{"user_id":"2","first_name":"Test","last_name":"Test","email":null,"password":null,"city_id":"6379","birth_date":"2009-06-09","gender":"F","created_on":"2009-06-01 17:21:07","updated_on":"2009-06-14 17:20:14","active":"Y","cuisine_id":null}}
I really don't see what I'm doing wrong, but my JSON string isn't loading. Thanks!

Ok so you're almost there, but one problem. The root ("user" in this case) has to be an array. Even if it's an array with only 1 object. Ext.data.JsonReader (the default reader for a Ext.data.JsonStore) only accepts an array of results.
So your javascript looks just fine, but the JSON object returned by the server needs to look more like this.
{
"success":"true",
"user": [{
"user_id":"2",
"first_name":"Test",
"last_name":"Test",
"email":null,
"password":null,
"city_id":"6379",
"birth_date":"2009-06-09",
"gender":"F",
"created_on":"2009-06-01 17:21:07",
"updated_on":"2009-06-14 17:20:14",
"active":"Y",
"cuisine_id":null
}]
}

One more thing, consoloe.logging your store object will produce something like [Object] in Firebug... not too useful. You should either console.dir it, or log your actual data instead.
One comment about loading your form, once you get past loading your JSON (even though this example does not show that). Make sure your form is actually rendered before trying to load it with data, e.g. if trying to use something like form.loadRecord. Otherwise you'll end up with an empty form and no errors.