Develop Reference

Why isn't my code getting the JSON values?

function getResults(){
var text = encodeURIComponent(searchField.val().trim());
$.ajax({
type: "GET",
url: "https://en.wikipedia.org/w/api.php?action=query&prop=extracts&exintro&format=json&titles=" + text,
dataType: "jsonp",
success: function(data){
showResults(data, text);
}
});
}
function showResults(data, text) {
results.show();
var query = "https://en.wikipedia.org/wiki/" + text;
for (var id in data.query.pages) {
var code = "<a href=" + query + " class='results'>" + "<div class='results'>";
code = code + "<strong>" + id.title + "</strong>";
code = code + "<br>";
code = code + id.extract;
code = code + "</div></a>"
$(code).appendTo(results);
}
}
In the showResults function, its showing the id.title and id.extract as undefined. Why is that? What am I doing wrong?

When you do this:
for (var id in data.query.pages)
The, id variable is filled with a property name which is simply a string. If you want to get that value of that property, you have to reference the value of that property as in:
data.query.pages[id]
Or, if that's an object that you then want .title from, then you would need
data.query.pages[id].title
and
data.query.pages[id].extract

That's because when iterating over an object (using for-var-in-object loop), the var (id in this case) is the key, but if you need value, use object[key] syntax. Check the following code
$.ajax({
type: "GET",
url: "https://en.wikipedia.org/w/api.php?action=query&prop=extracts&exintro&format=json&titles=newton",
dataType: "jsonp",
success: function(data) {
for (var id in data.query.pages)
document.write(data.query.pages[id].title);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

In your case, you are using just key=> '321123'. To get value of object use key. To get object data.query.pages[id].
for (var id in wiki = data.query.pages){
wiki[id].title;
wiki[id].extract;
}
This one should work.
function showResults(data, text) {
results.show();
var query = "https://en.wikipedia.org/wiki/" + text;
for (var id in wiki = data.query.pages) {
var code = "<a href=" + query + " class='results'>" + "<div class='results'>";
code = code + "<strong>" + wiki[id].title + "</strong>";
code = code + "<br>";
code = code + wiki[id].extract;
code = code + "</div></a>"
$(code).appendTo(results);
}
}

JavaScript jquery.ajax in success after loop nothing working

I need to pass some values to other function in Javascript. I have got the values from another PHP file but I can not pass it to any other Javascript Function. Nothing is working in SUCCESS after FOR LOOP. Need Help?
url1 = 'http://localhost:81/Dashboard/admin/inc/dashboard.php';
$.ajax({
url: url1,
type: "POST",
dataType: "json",
success: function(data)
{
for(var i = 0; i <= 11; i++)
{
Month = data[i].Month;
Sales = data[i].Sales;
if (i == 0) global_ij = "[" + Month + "," + Sales + "]";
else global_ij = global_ij + "," + "[" + Month + "," + Sales + "]";
}
alert ("hello"); // this alert is also not working
}
});

looks like your php is returning 8 elements and in your success method your loop iterates over 11 items, causing error.
I separated the success function and tried it with the data you posted and replaced the 11 in the loop with data.length. take a look at the following codepen:
http://codepen.io/anon/pen/OyXzGb?editors=011
note that I added
var Month;
var Sales;
to keep those temporary variables inside the scope of the function.
You might need to check Data to see if it is a proper array, to catch errors. before this line:
for(var i = 0; i < data.length; i++)
final output and something to try out:
var global_ij="";
function processData(data) {
var Month;
var Sales;
for(var i = 0; i < data.length; i++)
{
Month = data[i].Month;
Sales = data[i].Sales;
if (i == 0) global_ij = "[" + Month + "," + Sales + "]";
else global_ij = global_ij + "," + "[" + Month + "," + Sales + "]";
console.log(global_ij);
}
return global_ij;
}
try out this function without the ajax first:
processData([{"Month":"1","Year":"2015","Sales":"19746.81"},
{"Month":"2","Year":"2015","Sales":"17902.26"},{"Month":"3","Year":"2015","Sales":"19223.84"},{"Month":"4","Year":"2015","Sales":"18840.88"},{"Month":"5","Year":"2015","Sales":"19889.97"},{"Month":"6","Year":"2015","Sales":"18509.85"},{"Month":"7","Year":"2015","Sales":"1886.81"},{"Month":"8","Year":"2015","Sales":"1740.34"}]);
you might want to use .done()

That's because you are performing an asynchronous AJAX operation. In other words, the assignments on variables Month, Sale, global_ij that you are making are only available in that particular success function's scope and NOT outside of it.
One workaround for you is to add async: false to your AJAX call which will force it out of asynchronous behavior, therefore allowing you to make the values assigned to those variables available to all the remaining block of code:
$.ajax({
url: url1,
async: false,
type: "POST",
dataType: "json",
success: function(data)
{
for(var i = 0; i <= 11; i++)
{
Month = data[i].Month;
Sales = data[i].Sales;
if (i == 0) global_ij = "[" + Month + "," + Sales + "]";
else global_ij = global_ij + "," + "[" + Month + "," + Sales + "]";
}
}
});
jQuery's AJAX calls return promise objects which enforce methods such as .done(), .fail(), etc.
On the other hand, you could also get a promise from the AJAX call (which you can pass around anywhere in your Javascript code) and when the promise gets resolved invoke it's .done() handler.
var promise = $.ajax({/* settings */});
/* --- */
// promise passed to some other block of code
promise.done(function(){
//execute the block of code after the promise was resolved
});
Read more about this here.

The response from the PHP file is:
[
{"Month":"1","Year":"2015","Sales":"19746.81"}, // 1
{"Month":"2","Year":"2015","Sale‌​s":"17902.26"}, // 2
{"Month":"3","Year":"2015","Sales":"19223.84"}, // 3
{"Month":"4","Year"‌​:"2015","Sales":"18840.88"}, // 4
{"Month":"5","Year":"2015","Sales":"19889.97"}, // 5
{"Mont‌​h":"6","Year":"2015","Sales":"18509.85"}, // 6
{"Month":"7","Year":"2015","Sales":"1886‌​.81"}, // 7
{"Month":"8","Year":"2015","Sales":"1740.34"} // 8
]
Yet you are looping
for(var i = 0; i <= 11; i++)
So when i >= 8, data[i].Month will throw an "data[i] is undefined" error.
Simply use the .length property instead:
for(var i = 0; i < data.length; i++)
Example Fiddle

Modify your code to declare the gloabla_ij variable outside the loop. somehting like below..
var global_ij='0';
url1 = 'http://localhost:81/Dashboard/admin/inc/dashboard.php';
$.ajax({
url: url1,
type: "POST",
dataType: "json",
success: function(data)
{
for(var i = 0; i <= 11; i++)
{
Month = data[i].Month;
Sales = data[i].Sales;
if (i == 0) global_ij = "[" + Month + "," + Sales + "]";
else global_ij = global_ij + "," + "[" + Month + "," + Sales + "]";
}
}
});

If you declare the var at the top of the file, it can be used by any function within the file:
var global_ij; // declare variable in global scope of module/file
$.ajax({
url: 'http://localhost:81/Dashboard/admin/inc/dashboard.php',
type: "POST",
dataType: "json",
success: function(data) {
var i, month, sales, len = data.length;
for(i=0; i<=len; i++) {
month = data[i].Month;
sales = data[i].Sales;
if (i===0) global_ij = "[" + month + "," + sales + "]";
else global_ij = global_ij + "," + "[" + month + "," + sales + "]";
}
doSomething(); // can now call function after loop finished
}
});
func doSomething() {
// global_ij is now populated
}

JS Alert or append is not working on DOM

Please look at this code on https://jsfiddle.net/safron6/9g98j68g/embedded/result/
I am trying to get the calculated result from the list of APIS and JSON code that is generated to show the precipIntensity. At the end of the code there is an alert and the code works in firebug but nothing is showing up. What may be the reason why the alert does not pop up?
var listAPIs = "";
$.each(threeDayAPITimes, function(i, time) {
var darkForecastAPI= "https://api.forecast.io/forecast/" + currentAPIKey + "/" + locations + "," + time +"?callback=?";
$.getJSON(darkForecastAPI, {
tags: "WxAPI[" + i + "]", //Is this tag the name of each JSON page? I tried to index it incase this is how to refer to the JSON formatted code from the APIs.
tagmode: "any",
format: "json"
}, function(result) {
// Process the result object
var eachPrecipSum = 0;
if(result.currently.precipIntensity >=0 && result.currently.precipType == "rain")
{
$.each(result, function() {
eachPrecipSum += (result.currently.precipIntensity);
totalPrecipSinceDate += eachPrecipSum ; ///Write mean precip
alert(eachPrecipSum );
$("body").append("p").text(eachPrecipSum)
});
}
});

totalPrecipSinceDate did not declared.

I can't access your hosted data source.
Replacing your current $.getJSON call with an $.ajax call should work:
$.each(threeDayAPITimes, function(i, time) {
var darkForecastAPI= "https://api.forecast.io/forecast/" + currentAPIKey + "/" + locations + "," + time +"?callback=?";
$.ajax({
type: 'GET',
url: darkForecastAPI,
async: false,
jsonpCallback: 'jsonCallback',
contentType: 'application/json',
dataType: 'jsonp',
success: function(result) {
var eachPrecipSum = 0;
if(result.currently.precipIntensity >=0 && result.currently.precipType == "rain") {
$.each(result, function() {
eachPrecipSum += (result.currently.precipIntensity);
totalPrecipSinceDate += eachPrecipSum ; ///Write mean precip
alert(eachPrecipSum );
$("body").append("p").text(eachPrecipSum)
});
}
},
error: function(){
alert('failure');
}
});
});

Help passing variables between functions in ajax callbacks

OK I am building something that makes an ajax request to one server where it determines the url it needs to then make a new ajax request to another place. Everything is progressing thanks to all the help at SO =) .. however I am stuck again. I am struggling with getting the variables to return to the different functions as I need. The second (jsonp) request returns a json function which looks like :
jsonResponse(
{"it.exists":"1"},"");
and my code...
var img = "null";
var z = "null";
$(document).ready(function()
{
$.ajax({
type: "GET",
url: "connect.php",
dataType: "xml",
success: function parseXml(data)
{
$(data).find("ITEM").each(function()
{
query = $("SKU", this).text();
query = 'http://domain.com/' + query + '?req=exists,json';
img = $("SKU", this).text();
img = '<img src="http://domain.com/' + img + '">';
var date =$("LAST_SCAN" , this).text();
$.ajax({
url: query,
dataType: 'jsonp'
});
$("table").append('<tr>'+'<td>' + (date) + '</td>' + '<td>' + (z) + '</td>');
});
}
});
});
// function required to interpret jsonp
function jsonResponse(response){
var x = response["it.exists"];
// console.log(x);
if (x == 0) {
console.log("NO");
var z = "NO IMG";
}
if (x == 1) {
console.log(img);
//this only returns the first image path from the loop of the parseXml function over and over
var z = (img);
}
return z;
}
So I guess my problem is a two parter.. one how do I get the img variable to loop into that if statement and then once that works how can I return that z variable to be used in the first xml parser?

Try this synchronous approach:
var itemQueue = [];
$(document).ready(function ()
{
$.ajax({
type: "GET",
url: "connect.php",
dataType: "xml",
success: function parseXml(data)
{
itemQueue= $(data).find("ITEM").map(function ()
{
return {
sku: $("SKU", this).text(),
date: $("LAST_SCAN", this).text()
};
}).get();
getNextItem();
}
});
});
function getNextItem()
{
var item = itemQueue[0];
var query = "http://domain.com/" + item.sku + "?req=exists,json";
$.ajax({
url: query,
dataType: 'jsonp'
});
}
function jsonResponse(response)
{
var item = itemQueue.shift();
if (itemQueue.length)
{
getNextItem();
}
var x = response["it.exists"];
var z = x == "0" ? "NO IMG" : "<img src=\"http://domain.com/" + item.sku + "\">";
$("table").append("<tr><td>" + item.date + "</td><td>" + z + "</td>");
}

Store 'date' in a global variable, and move the logic to append HTML elements into the jsonResponse function. You cannot return control flow from jsonResponse because it's called asynchronously, but you can continue doing anything you'd like from that function.

Merging JSON api Response using Javascript

I am trying get paged json responses from Topsy (http://code.google.com/p/otterapi/) and am having problems merging the objects. I want to do this in browser as the api rate limit is per ip/user and to low to do things server side.
Here is my code. Is there a better way? Of course there is because this doesn't work. I guess I want to get this working, but also to understand if there is a safer, and/or more efficient way.
The error message I get is ...
TypeError: Result of expression 'window.holdtweetslist.prototype' [undefined] is not an object.
Thanks in advance.
Cheers
Stephen
$("#gettweets").live('click', function(event){
event.preventDefault();
getTweets('stephenbaugh');
});
function getTweets(name) {
var MAX_TWEETS = 500;
var TWEETSPERPAGE = 50;
var BASE = 'http://otter.topsy.com/search.json?type=tweet&perpage=' + TWEETSPERPAGE + '&window=a&nohidden=0&q=#' + name + '&page=1';
var currentpage = 1;
alert(BASE);
$.ajax({
dataType: "json",
url: BASE,
success: function(data) {
window.responcesreceived = 1;
var response=data.response;
alert(response.total);
window.totalweets = response.total;
window.pagestoget = Math.ceil(window.totalweets/window.TWEETSPERPAGE);
window.holdtweetslist = response.list;
window.holdtweetslist.prototype.Merge = (function (ob) {var o = this;var i = 0;for (var z in ob) {if (ob.hasOwnProperty(z)) {o[z] = ob[z];}}return o;});
// alert(data);
;; gotTweets(data);
var loopcounter = 1;
do
{
currentpage = currentpage + 1;
pausecomp(1500);
var BASE = 'http://otter.topsy.com/search.json?type=tweet&perpage=' + TWEETSPERPAGE + '&window=a&nohidden=0&q=#' + name + '&page=' + currentpage;
alert(BASE);
$.ajax({dataType: "json", url: BASE, success: gotTweets(data)});
}
while (currentpage<pagestoget);
}
});
};
function gotTweets(data)
{
window.responcesreceived = window.responcesreceived + 1;
var response = data.response;
alert(response.total);
window.holdtweetslist.Merge(response.list);
window.tweetsfound = window.tweetsfound + response.total;
if (window.responcesreceived == window.pagestoget) {
// sendforprocessingsendtweetlist();
alert(window.tweetsfound);
}
}

You are calling Merge as an static method, but declared it as an "instance" method (for the prototype reserved word).
Remove prototype from Merge declaration, so you'll have:
window.holdtweetslist.Merge = (function(ob)...
This will fix the javascript error.

This is Vipul from Topsy. Would you share the literal JSON you are receiving? I want to ensure you are not receiving a broken response.

THanks to Edgar and Vipul for there help. Unfortunately they were able to answer my questions. I have managed to work out that the issue was a combination of jquery not parsing the json properly and needing to use jsonp with topsy.
Here is a little test I created that works.
Create a doc with this object on it ....
RUN TEST
You will need JQUERY
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
And put the following in a script too. The is cycle through the required number of tweets from Topsy.
Thanks again everyone.
$("#gettweets").live('click', function(event){
event.preventDefault();
getTweets('stephenbaugh');
});
var MAX_TWEETS = 500;
var TWEETSPERPAGE = 50;
var BASE = 'http://otter.topsy.com/search.json';
var currentpage;
var responcesreceived;
var totalweets;
var pagestoget;
var totalweets;
var TWEETSPERPAGE;
var holdtweetslist = [];
var requestssent;
var responcesreceived;
var tweetsfound;
var nametoget;
function getTweets(name) {
nametoget=name;
currentpage = 1;
responcesreceived = 0;
pagestoget = 0;
var BASE = 'http://otter.topsy.com/search.js?type=tweet&perpage=' + TWEETSPERPAGE + '&window=a&nohidden=0&q=#' + nametoget + '&page=1';
$('#gettweets').html(BASE);
$.ajax({url: BASE,
dataType: 'jsonp',
success : function(data) {
getalltweets(data);
}
});
};
function getalltweets(data) {
totalweets = data.response.total;
$('#gettweets').append('<p>'+"total tweets " + totalweets+'</p>');
$('#gettweets').append('<p>'+"max tweets " + MAX_TWEETS+'</p>');
if (MAX_TWEETS < totalweets) {
totalweets = 500
}
$('#gettweets').append('<p>'+"new total tweets " + totalweets+'</p>');
gotTweets(data);
pagestoget = Math.ceil(totalweets/TWEETSPERPAGE);
var getpagesint = self.setInterval(function() {
currentpage = ++currentpage;
var BASE = 'http://otter.topsy.com/search.js?type=tweet&perpage=' + TWEETSPERPAGE + '&window=a&nohidden=0&q=#' + nametoget + '&page=' + currentpage;
$.ajax({url: BASE,
dataType: 'jsonp',
success : function(data) {
gotTweets(data);
}
});
if (currentpage == pagestoget) {
$('#gettweets').append('<p>'+"finished sending " + currentpage+ ' of ' + pagestoget + '</p>');
clearInterval(getpagesint);
};
}, 2000);
};
function gotTweets(data)
{
responcesreceived = responcesreceived + 1;
holdlist = data.response.list;
for (x in holdlist)
{
holdtweetslist.push(holdlist[x]);
}
// var family = parents.concat(children);
$('#gettweets').append('<p>receipt # ' + responcesreceived+' - is page : ' +data.response.page+ ' array length = ' + holdtweetslist.length +'</p>');
// holdtweetslist.Merge(response.list);
tweetsfound = tweetsfound + data.response.total;
if (responcesreceived == pagestoget) {
// sendforprocessingsendtweetlist();
$('#gettweets').append('<p>'+"finished receiving " + responcesreceived + ' of ' + pagestoget + '</p>');
}
}