How to parse JSON url of api data and display in div - json

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>');
});

Related

Best way to load/store ndDialog template?

I am using ngDialog to display a modal window with an alert message.
I have the modal window working however the code looks messy.
I am wondering is it possible to replace the raw html template with a link to a html file instead of writing the HTML within the function itself.
$scope.openDialog = function(components) {
$scope.selected = components.component;
ngDialog.open({
template: '<h4>' + 'Alert' + '</h4>' +
'<table class="table">' +
'<tr><th>Type</th><td>' + components.type + '</td></tr>' +
'<tr><th>Component</th><td>' + components.component + '</td></tr>' +
'<tr><th>Created</th><td>' + components.created + '</td></tr>' +
'<tr><th>Alert</th><td>' + components.alert + '</td></tr>'+
'</table>',
plain: true
});
};
Yep, just use templateUrl rather than template.
$scope.openDialog = function(components) {
$scope.selected = components.component;
ngDialog.open({
templateUrl: 'yourfilename.html',
plain: true
});
};

Need help parsing json data on web page

I would like to display the last 10 songs played on a web page. Here's the code I'm using but I'm unable to retrieve and display the requested info from the json file. https://jsfiddle.net/Heropiggy95/6qkv7z3b/ Can someone point out the errors or demonstrate a working example? Thank you.
$(document).ready(function() {
$.getJSON("http://apps.radioactive.sg/lastsongsplayed.php?stationId=995fm&callback=myfunction", function(data) {
var html = ''; // declare the variable that will be used to store the information
$.each(data.myfunction, function(i, item) {
{
html += 'Song: ' + item.song.track + ', Artist: ' + item.song.artist + ', Time: ' + item.playedtime + '';
} //
}); //
$('.nowplaying').append(html); // print the information to the document with a span class of 'nowplaying' and use the jQuery append method to insert the information.
}); // close JSON call
}); // close document ready function
Try to use JSON.parse like this
$(document).ready(function() {
$.getJSON("http://apps.radioactive.sg/lastsongsplayed.php?stationId=995fm", function(data) {
var html = ''; // declare the variable that will be used to store the information
var parsedData = JSON.parse(data);
$.each(parsedData, function(i, item) {
{
html += 'Song: ' + item.song.track + ', Artist: ' + item.song.artist + ', Time: ' + item.playedtime + '';
} //
}); //
$('.nowplaying').append(html); // print the information to the document with a span class of 'nowplaying' and use the jQuery append method to insert the information.
}); // close JSON call
}); // close document ready function

Looping through AJAX result and post to HTML,

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);
});
});

Phonegap - HTML does not display image from storage

I'm using FileTransfer plugin to download an image from a remote server.
The image is stored in "storage/emulated/0/" - using the following code:
function downloadFile(fileDownloadName){
//console.log('downloadFile');
window.requestFileSystem(
LocalFileSystem.PERSISTENT,
0,
function(fileSystem){
//console.log('onRequestFileSystemSuccess');
fileSystem.root.getFile(
'dummy.html',
{create: true, exclusive: false},
function(fileEntry){
//console.log('onGetFileSuccess!');
var path = fileEntry.toURI().replace('dummy.html', '');
var fileTransfer = new FileTransfer();
fileEntry.remove();
fileTransfer.download(
'https://www.myserver.com/imagens/' + fileDownloadName,
path + fileDownloadName,
function(file) {
//console.log('download complete: ' + file.toURI());
return path + fileDownloadName;
},
function(error) {
console.log('download error source ' + error.source);
console.log('download error target ' + error.target);
console.log('upload error code: ' + error.code);
}
);
},
fail
);
},
fail
);
}
So, I'm pointing the path + fileDownloadName to SRC of my image, but the image does not appear.
var location = path + fileDownloadName;
window.resolveLocalFileSystemURL(location, function(oFile) {
oFile.file(function(readyFile) {
var reader= new FileReader();
reader.onloadend= function(evt) {
$(".circle-perfil").css('background-image', 'url(' + evt.target.result + ')');
};
reader.readAsDataURL(readyFile);
});
Is there something wrong I'm doing? Should I have to store the image in another folder? If yes, how to do it?
If you are using img tag then set its image as:
$(".circle-perfil").css('background', 'url(' + evt.target.result + ')');
or
$(".circle-perfil").css('content', 'url(' + evt.target.result + ')');
In case of div or span
$(".circle-perfil").css('background-image', 'url(' + evt.target.result + ')');
I had set it like:
var image = document.getElementById('cameraPic');
image.src = 'path/of/image file';

Replace JSON values

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/