Fiddle Example
I have a function called parseData to render html presentation from returned json data in the main js file.
var data = {
"title": "This is news"
};
$("button").click(function(){
var feedformat = $(this).data('format');
item_html = parseData(feedformat, data);
$('.feedback').append(item_html);
});
function parseData(type, data) {
var item_html = '';
switch(type) {
case 'story':
item_html = '<h5>'+data.title+'</h5>';
break;
}
return item_html;
}
My question is, is it possible to use $.extend to add more cases from another script file that is dynamically pulled in on click using getscript? Suppose I have a new case called oldnews. That case contains a lot of html tags but won't be used often, so I don't want to store it in the main js file and would like to bring it in only when people want it. Call I use something like the following in another script file to extend parseData which is in the main js file?
(function($){
var addcase = $.fn.parseData;
$.fn.addcase = function( type,data ) {
case 'oldnews':
item_html = '<div>'+data.title+',but outdated</div>';
break;
};
}(jQuery));
This sounds pretty easy, actually. What you're really trying to do is map the names of data formats to functions that produce HTML output. You could easily encode what you've already demonstrated here with this:
var parseFunctions = {
story: function(data) {
return '<h5>' + data.title + '</h5>';
},
oldnews: function(data) {
return '<div>' + data.title + ', but outdated</div>';
}
}
When it is time to output some html you can do this:
$("button").click(function(){
var format = $(this).data('format');
if (typeof parseFunctions[format] == 'function')
$('.feedback').append( parseFunctions[format](data) );
});
This works because Javascript treats functions like any other value. You can assign them to variables, copy them, etc.. With this technique you can extend the base parseFunctions object with a another object containing functions. The main thing you have to look out for is key collision. (Two people trying to define a function for data type 'some_type'.)
Instead of switch/case statements, you could do something more extensible like looping over a container of news item qualifiers and their associated data. In JSON this might look like:
{
"story": {
"html": "<h5>%s<\/h5>"
},
"oldnews": {
"html": "<div>%s, but outdated<\/div>"
}
}
If you have a JavaScript object like that, you make it visible to parseData, which gets the "html" value of whichever one matches "type" and replaces "%s" with the title. Whenever new "cases" are pulled in, you use _.extend or $.extend to add to the structure.
Is it possible to include related field on save i.e.
save(null, {
success: function(updatedObject) {
// Is there a way to include another field which is an array of pointers either here or before save()?
},
error: function() {
...
}
});
Only when you query for an item can you get included objects, by using the include method.
var query = new Parse.Query('myClass');
query.include('arrayOfPointersColumn');
query.first().then(function(result) {
// you can access the full parse objects inside the result object.
var otherObjects = result.get('arrayOfPointersColumn');
console.log(otherObjects);
});
I am working on an app to store data offline. My problem is when I try to retrieve the data from local storage for update/edit, it keeps calling only the id of the first item, and not calling the id of the data in view.
Please what am I doing wrong?
Here is my code for loading employees:
// load cases from localStorage
var employees;
if (localStorage.getItem('employees')) {
employees = JSON.parse(localStorage.getItem('employees'));
} else {
// If no cases, create and save them
employees = [];
// offling storing of our cases
localStorage.setItem('employees', JSON.stringify(employees));
}
// show case listing in list view page
var showEmployees = function () {
//erase existing content
$('#employee_list').html('');
//insert each employee
for (var i = 0; i<employees.length; i++) {
addEmployees(employees[i]);
}
};
Here is my code to add an employee to list view:
//add an eliment to list view
var addEmployees = function (empData) {
//HTML content of one list element
var listElementHTML = '<li><a class="employee_list" ui-btn ui-btn-e ui-btn-icon-right ui-icon-carat-r" data-transition="fade" data-split-icon="delete" href="#item'+empData.id+'">' + empData.employeename + '<br> ' + empData.dateofbirth + '</br></a></li>';
//appending the HTML code to list view
$('#employee_list').append(listElementHTML);
};
Here is my code for Edit function:
//User input to edit form
$('#edit_employee_page').on('click' , function () {
var editEmployee = JSON.stringify({
id: employees.length+1,
employeeno: $('#employeeno').val(),
employeename:$('#employeename').val(),
stateoforigine:$('#stateoforigine').val(),
employeephone: $('#employeephone').val(),
dateofbirth:$('#dateofbirth').val()
});
//Alter the slected data
localStorage.setItem("employees", JSON.stringify(employees));
return true;
});
for (var i in employees) {
var id = JSON.parse(localStorage.getItem(employees[i]));
}
Here is my code for the Edit button:
//register Edit button
$('.edit_button').live('click', function (e) {
alert('I was Cliked!');
e.stopPropagation();
$.each(employees, function(a, b) {
//if(b.id == employees[i]){
$('#id').val(b.id);
$('#employeeno').val(b.employeeno);
$('#employeename').val(b.employeename);
$("#stateoforigine").val(i.stateoforigine);
$('#employeephone').val(b.employeephone);
$('#dateofbirth').val(b.dateofbirth);
$("#id").attr("readonly","readonly");
$('#employeeno').focus();
$.mobile.changePage('#edit_employee_page');
return false;
//}
});
});
Here is my local Storage:
[
{"id":1,
"employeeno":"DEF/234/20014",
"employeename":"Bill Gates",
"stateoforigine":"Osun",
"employeephone":"080765432",
"dateofbirth":"12/11/1965"},
{"id":2,
"employeeno":"DEF/234/20014",
"employeename":"Bill Gates",
"stateoforigine":"Osun",
"employeephone":"080765432",
"dateofbirth":"12/11/1966"},
{"id":3,
"employeeno":"DEF/234/20014",
"employeename":"Bill Gates",
"stateoforigine":"Osun",
"employeephone":"080765432",
"dateofbirth":"12/11/1966"},
{"id":4,
"employeeno":"DAST/003/2003",
"employeename":"Gold Base",
"stateoforigine":"",
"employeephone":"",
"dateofbirth":"12/03/1986"}
]
Thanks for helping me out
The way you are storing your employees into localStorage is correct, but the way you are getting them out is incorrect. You stored your employees by stating:
localStorage.setItem("employees", JSON.stringify(employees));
So, in order to retrieve them, you must use:
var employees = JSON.parse(localStorage.getItem("employees"));
You see, you stored the data as a string with a key of "employees"; therefore, you can only retrieve it by that key. Since all data stored in localStorage is saved as a string, you must use JSON.parse() to convert the data back into an object - an array in this case. Then you can iterate over your employees.
Update:
You should be running this code as soon as the page is rendered (see below). I'm not sure how you're doing that - if you're using an IIFE or jQuery's document.ready() function. I don't think it's necessary to store an empty array into localStorage if none were loaded initially, so, I took your else clause out.
var employees = [];
if (localStorage.getItem('employees') !== null) {
employees = JSON.parse(localStorage.getItem('employees'));
}
Debug this line-by-line when it runs and make positive your employees variable contains data. If it doesn't contain data, well then, there's nothing to edit.
If, however, there is data, then execute your showEmployees() function. Oddly, I'm not seeing in your code where you actually call this. Is it bound to a button or action in your UI? Also, what is that for loop doing after your $('#edit_employee_page') click event function? It's trying to read data from localStorage improperly and it does nothing.
I think if you simply stepped through your code one line at a time using breakpoints and desk-checking your inputs/outputs you'd find out where you're going wrong.
It also appears that there's a disconnect in your code. May be you left out some lines; you define a string editEmployee but out of the blues you store JSON.stringify(employees) whereas employees is not defined in your code:
$('#edit_employee_page').on('click' , function(){
var editEmployee = JSON.stringify({
id: employees.length+1,
//........
});
//Alter the slected data
localStorage.setItem("employees", JSON.stringify(employees));
return true;
});
I had a similar task to do . I did it this way.
I passed the dynamic Id to be passed as an id attribute
id="'+empData.id+'"
and then inside the
$('.edit_button').live('click', function (e) {
alert('I was Cliked!');
var empId=$(this).attr('id');
rest of the code is same.
I have a user specified JSON object that I'm attempting to process in the browser.
The problem is that it needs to match an existing object.
They can't accidentally:
forget to include some fields.
typo fields or deliberately add new fields.
Is there a way to handle this?
so basically if I have an object with foo and bar members, I want their defaults if the user's json is just {} ... and if they accidentally send something like {bart: "asdf";} (typo on 'bar') then I want it to generate an exception.
var default_object = { ... };
var allowed_keys = [ "key1", "key2", ... ];
var new_object = default_object.clone();
for (var key in json_object) {
if (json_object.hasOwnProperty(key)) {
if (allowed_keys.indexOf(key) == -1) {
// Report error here
} else {
new_object[key] = json_object[key];
}
}
}
See here for how to write the clone method I used above. If you use jQuery, you could simplify some of this code by using $.extend().
I've got a webpage which reads an XML file and loads the contents into a div on the page. As a part of this process, I need to identify all of the namespace prefixes and corresponding URIs declared in that file. I'm using jQuery to get and load the file like this:
$.get(sourceURI, function (data) {
var nsList = getNamespaces(data);
var target = $('#my_div');
target.html(data);
});
where getNamespaces is a function taking the result of the get, and returning an object in the form:
object = {
prefix1: uri1, //e.g xmlns:foo="http://bar.com" -> { foo: "http://bar.com" }
prefix2: uri2,
....
prefixn: urin
}
I have a sinking feeling that the answer may be a regex, but obviously that requires me to write one, and suffer over-used adages about having two problems from my colleagues. Is there a better way, or if not could someone point me in the right direction in constructing a regex?
Thanks!
If your browser is XHTML-compliant, you can use its parsing facilities to iterate over the XML elements with jQuery instead of processing a raw string with regular expressions:
function getNamespaces(data)
{
var result = {};
$(data).each(function() {
recurseGetNamespaces(this, result);
});
return result;
}
function recurseGetNamespaces(element, result)
{
var attributes = element.attributes;
for (var i = 0; i < attributes.length; ++i) {
var attr = attributes[i];
if (attr.name.indexOf("xmlns:") == 0) {
var prefix = attr.name.substr(6);
if (!(prefix in result)) {
result[prefix] = attr.value;
}
}
}
$(element).children().each(function() {
recurseGetNamespaces(this, result);
});
}
You can find a fiddle demonstrating this method here. (Disclaimer: that fiddle uses JSON.stringify() to display the results, so that part of the code might not work with browsers other than Firefox).