It is my first time talking about JSON and I need some help (sorry if I make some mistake).
I have datas in the MySql database with strange values (ex. è - à - ù - ò.....) and when I have back the response from JSON my field result null.
Follow you can see the code I'm using!
Could somebody help me how to replace this letters or fixing the problem.
THANK YOU!
I get my datas phrased
{"items":
{
"id":"305",
"title":"Il manipolatore",
"description":null
}
....
}
This is my code:
var serviceURL = "app/testE/services/";
var employees;
$('#employeeListPage').bind('pageinit', function(event) {
getEmployeeList();
});
function getEmployeeList() {
$.getJSON(serviceURL + 'getemployees.php', function(data) {
$('#employeeList li').remove();
employees = data.items;
$.each(employees, function(index, employee) {
$('#employeeList').append('<li><a href="employeedetails.html?id=' + employee.id + '">' + '<img src="' + employee.img + '" width="80px" height="80px" />' +
'<h4>' + employee.title + '</h4>' +
'<p>' + employee.description + '</p>' +
'</a></li>');
});
$('#employeeList').listview('refresh');
});
}
Use $.ajax() rather than $.getJSON() and then set the charset to utf-8.
http://api.jquery.com/jQuery.ajax/
Related
I am using geonames.org to auto populate my address fields based on zip code. I have been using there api and it was woking recently when I saw the following error:
net::ERR_NAME_NOT_RESOLVED
This is the bit of code i'm using to make the api call:
$.getJSON("https://www.api.geonames.org/postalCodeLookupJSON?postalcode=" + zip[0] + "&country=" + country + "&username=myUsername", function(response) {
//code for my view
$(".locked").attr("readonly", false);
var places = response.postalcodes;
if (places.length > 1){
$.each(places, function(i, place) {
$('#rightSideZip').append('<li class="zipLookups" data-city="' + place.placeName + '" data-zip="' + place.postalcode + '" data-state="' + place.adminCode1 + '"><span>' + place.postalcode + ' – ' + place.placeName + '</span><p>' + place.adminName1 + '</p></li>')});
} else {
city.val(response.postalcodes[0].placeName).blur();
state.val(response.postalcodes[0].adminCode1).blur();
lat.val(response.postalcodes[0].lat).blur();;
lng.val(response.postalcodes[0].lng).blur();;
latitude = response.postalcodes[0].lat;
longitude = response.postalcodes[0].lng;
}
});
});
Can I just not use this api anymore until they get the certificate or is there a way around it?
I have the following AJAX code for processing a returned results from the database,
$.ajax({
type: 'POST',
async: true,
url: "../../../avocado/private/functions/measures.php",
data: {name:selectedValue},
success: function(data, status){
var selectedData = JSON.parse(data);
console.log(selectedData);
document.getElementById("measures").innerHTML = "<div id=\"measures\">"
+ "<table class=\"table table-condensed\">"
+ "<tr><th>desc1</th><td>"+selectedData[0][6]+"</td></tr>"
+ "<tr><th>desc2</th><td>"+selectedData[0][7]+"</td></tr>"
+ "<tr><th>desc3</th><td>"+selectedData[0][8]+"</td></tr>"
+ "<tr><th>desc4</th><td>"+selectedData[0][9]+"</td></tr>"
+ "</table>"
+ "</div>";
},
error: function(xhr, status, err) {
alert(status + ": " + err);
}
});
The data returned is a 2D array, like this below,
Array[5]
0: Array[14]
1: Array[14]
2: Array[14]
3: Array[14]
4: Array[14]
so what I want to do is to loop each array and display the inner information on the HTML page but I have no idea how I should go about doing it.. this code only returns the values stored on index[0].
Can I please get some help?
==============================================================================
UPDATED
So I tried to use Jquery.append() like the following below..
jQuery.each( selectedData, function( i, val ) {
$("measures").append(
"<table class=\"table table-condensed\">"
+ "<tr><th>desc1</th><td>"+selectedData[i][6]+"</td></tr>"
+ "<tr><th>desc2</th><td>"+selectedData[i][7]+"</td></tr>"
+ "<tr><th>desc3</th><td>"+selectedData[i][8]+"</td></tr>"
+ "<tr><th>desc4</th><td>"+selectedData[i][9]+"</td></tr>"
+ "</table>"
);
});
/*
document.getElementById("measures").innerHTML = "<div id=\"measures\">"
+ "<table class=\"table table-condensed\">"
+ "<tr><th>desc1</th><td>"+selectedData[0][6]+"</td></tr>"
+ "<tr><th>desc2</th><td>"+selectedData[0][7]+"</td></tr>"
+ "<tr><th>desc3</th><td>"+selectedData[0][8]+"</td></tr>"
+ "<tr><th>desc4</th><td>"+selectedData[0][9]+"</td></tr>"
+ "</table>"
+ "</div>";
*/
now..its not appending any values to the div #measures at all...
I have not tried the code. But I hope this will help you.
document.getElementById("measures").innerHTML = "<div id=\"measures\">";
$.each( selectedData, function( index, value ){
$.each( index, function( index2, value2 ){
$('#measures').append(value2);
});
});
I want to get the data from Json url api page, how can i get this, please help me in this regards
$(document).ready(function() {
$("#driver").click(function(event){
$.getJSON('http://globalmetals.xignite.com/xGlobalMetals.json/GetLondonFixing?Symbol=XAU&Currency=USD', function(data) {
var json = $.parseJSON(data);
$('#stage').html('<p> Outcome: ' + json.Outcome + '</p>');
$('#stage').append('<p>Message : ' + json.Message+ '</p>');
$('#stage').append('<p> Name: ' + json.Name+ '</p>');
});
});
});
When you use $.getJSON, the data is already parsed for you, it's wrong to call $.parseJSON.
$.getJSON('http://globalmetals.xignite.com/xGlobalMetals.json/GetLondonFixing?Symbol=XAU&Currency=USD', function(json) {
$('#stage').html('<p> Outcome: ' + json.Outcome + '</p>');
$('#stage').append('<p>Message : ' + json.Message+ '</p>');
$('#stage').append('<p> Name: ' + json.Name+ '</p>');
});
I have the following line in my script, building a string based on news feed data retrieved from JSON:
var buildstring = "<table><tr><img src=" + obj.value.items[x]["media:content"].url + "> <b>" + obj.value.items[x].title + "</b><br /><td>" + obj.value.items[x].description.content + "</td></tr></table><br />";
In general it works fine - except for one thing. The feed that is being parsed occasionally doesn't have an image file associated with a particular title and description, and in that case, the entire script fails.
Is there any way to get the script to skip over any missing item in the feed and to build the string from the items that are there? E.g. if there is no image file for a story, the string consists of just the title and description? In the typical case I am taking 5 - 10 stories - if all of them have the 3 elements (image, title and description.content), it's all fine. If one story is missing the image file, I get nothing at all.
Thanks for any advice or assistance.
EDIT:
More complete code:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.min.js"> </script><script type="text/javascript">
function pipeCallback(obj) {
document.write("<div id=testdiv><b>LATEST NEWS</b><hr>");
var x;
for (x = 0; x < obj.count ; x++)
{
var imageurl = obj.value.items[x]["media:content"].url ? obj.value.items[x]["media:content"].url : "http://static.jquery.com/org/images/project/jquery-project-sm.png";
var buildstring = "<table><tr><img src=" + imageurl + "> <b>" + obj.value.items[x].title + "</b><br /><td>" + obj.value.items[x].description.content + "</td></tr></table><br />";
document.write(buildstring);
buildstring = null;
}
document.write("</div>");
}
</script>
You could use a ternary expression to build the string:
var textOnly = "<b>" + obj.value.items[x].title + "</b><br /><td>" + obj.value.items[x].description.content + "</td></tr></table><br />";
var buildstring = (typeof obj.value.items[x]["media:content"] == 'undefined') ?
"<table><tr><td><img src=" + obj.value.items[x]["media:content"].url + "></td>" + textOnly
: "<table<tr><td></td>" + textOnly;
Obviously this gets really ugly, fast, which is why they invented client-side templating (JQuery templating, Underscore.js, Mustache.js, Handlebars.js, etc, take your pick).
These allow you to separate the data from the markup, so you can write something like this:
var template = "<table><tr><td><img src='{{ image }}' /></td><td>{{ title }}</td><td>{{ description }}</td></tr></table>";
And you can get the HTML by from the data + template:
var html = Mustache.render(template, obj.value.items[x]);
The best option is simply to include placeholder, right? So if there is no image then the placeholder appears...
This would be achieved like this:
var imageurl = obj.value.items[x]["media:content"].url ? obj.value.items[x]["media:content"].url : "http://link.to.default/image.png";
var buildstring = "<table><tr><img src=" + imageurl + "> <b>" + obj.value.items[x].title + "</b><br /><td>" + obj.value.items[x].description.content + "</td></tr></table><br />";
I'm using:
function pipeCallback(obj) {
to get the contents of a Yahoo pipe (in JSON). I then create a string inside:
document.write("<div......);
var buildstring = ".......;
document.write(buildstring);
document.write("</div>");
Everything works, except that one item in the string:
obj.value.items[x].description.content
contains a lot of text and is stripped of its formatting. Is there a way to define a var (using .text()?) to keep the formatting and then to use the defined term in the string - e.g. something like:
var description = (obj.value.items[x].description.content).text()
and then to use the term 'description' in buildstring in place of obj.value.items[x].description.content.
Thanks for any suggestions/help.
EDIT
#Barmar Thanks. I tried that (I think...):
var description = function() {return (obj.value.items[x].description.content).text()};
var buildstring = "<table><tr><img src=" + imageurl + "> <b>" + obj.value.items[x].title + "</b><br /><td>" + description() + "</td></tr></table><br />";
(imageurl is a separately defined variable). I think I must have missed the point of your suggestion (or not given the right information at first). Anyhow..it didn't work.
EDIT #2
function pipeCallback(obj) {
document.write("<div id=testdiv><b>LATEST NEWS</b><hr>");
var x;
for (x = 0; x < obj.count ; x++)
{
var imageurl = (typeof obj.value.items[x]["media:content"] == 'undefined') ? "http://default.png" : obj.value.items[x]["media:content"].url;
var buildstring = "<table><tr><img src=" + imageurl + "> <b>" + obj.value.items[x].title + "</b><br /><td>" + obj.value.items[x].description.content + "</td></tr></table><br />";
document.write(buildstring);
buildstring = null;
}
document.write("</div>");
}
You can do:
var description = function() {return (obj.value.items[x].description.content).text()};
and then use description() to get this.