We Keep Coding

Unable to query API and use API response reference 'swell.components[].height' due to syntax error from the brackets in 'swell.components[].height'

Here is a link to their API documentation: http://magicseaweed.com/developer/forecast-api
I want to use the 'swell.components[].height' in a javascript function. See swell.components[].height in line 4 of my code. Getting a syntax error because of the brackets: 'Unexpected token ]':
function xyz(data) {
var $media = $('#media');
$.each(data, function(i, moreData) {
$media.append('<table><tr><td>time: ' + moreData.localTimestamp +'</td><td>Wind: ' + moreData.wind.direction + '</td><td>Wind Speed: ' + moreData.wind.speed + '</td><td>Temperature: ' + moreData.condition.temperature + '</td><td>Wave height: ' + swell.components[].height + '</td></tr></table>');
});
}
$(document).ready(function() {
$.ajax({
type: 'GET',
url: "http://magicseaweed.com/api/myapikey/forecast/?spot_id=1134&fields=localTimestamp,wind.speed,wind.direction,condition.temperature,swell.components[].height&callback=xyz",
// The name of the callback parameter
jsonp: "xyz",
// Tell jQuery we're expecting JSONP
dataType: "jsonp",
});
});

Looking at the example response you probably need to use
moreData.swell.components[x].height
where x is a string that is either "combined" or "primary" or "secondary" or "tertiary"
Without the quotes can use it like this:
moreData.swell.components.combined.height

Combine data from different URLs in ajax

I have one ajax request which i use to extract data from API, and create a table from the extracted data. Now i need to do the same, but to extract the data from two different URLs and merge is to the same table (retTable).
Here is my current code (one ajax request):
$.ajax(
{
url : '/url/status',
type: "GET",
success:function(data, textStatus, jqXHR)
{
theRows = extract_status_data(data)
},
error: function(jqXHR, textStatus, errorThrown)
{
alert('error')
}
});
}
function extract_status_data(jsonDataRaw){
jsonResultSect = jsonDataRaw['result']
retTable = ""
for( key in jsonResultSect){
statusParam = jsonResultSect[key]
a = statusParam['a']
b = statusParam['b']
c = statusParam['c']
d = statusParam['d']
e = statusParam['e']
retTable += "<tr><td>" + dropDownList(key) + "</td><td>" + key + "</td><td>" + a + "</td><td>" + b + "</td><td>" + c + "</td><td>" + d + "</td><td>" + e + "</td></tr>"
}
return retTable
}
How would be correct to combine the data from two different URLs? Please advise.

I can't hammer out a really robust solution right now, but here is what I came up with: https://jsfiddle.net/heejse8h/
Basically the principal is that you place all the URLs in an array and keep a flag variable incrementing for every url you pull from. This might look like this:
urls = [
'/url/status',
'/url/status2'
];
var i = 0;
Then when you execute the AJAX, you'll want to store that in some array
var result = [];
For my AJAX call in the jsfiddle, I used this basic structure
$.ajax({
url : urls[i],
type: "GET",
success: function(data) {
// simplified example of storing the results
// the example code from the fiddle is more
// involved.
result[key].push(data);
if(urls[++i] !== undefined){
// if there is another URL, use the same
// ajax object (using `this`), extend it,
// changing only the URL, and call it.
// the important part is that the `this`
// object has a reference to the currently
// executing `success` method.
$.ajax($.extend(this, {url: urls[i]}));
} else {
// otherwise, we're at the end of our URLs
// and we can focus on final formatting and
// display of the data.
for( key in result ){
$('#mytable').append("<tr><td>" + dropDownList(key) + "</td><td>" + key + "</td>" + result[key].join('') + "</tr>");
}
}
}
});
In the end I would have liked to flesh this out and use the DOM API to actually create nodes rather than constant concatenation, but this solution already diverges from the original code quite a bit. You might want to consider creating a function that parses an object rather than relies on concatenation.

pass two parameters DDL in JavaScript / jQuery

This function works fine but passes only one parameter from one DropDownList to the controller. How to make the transfer of two parameters of an (two DDL)?
$(function () {
$('#DDL_1_ID').change(function () {
var URL = $('#FormID').data('someAction');
$.getJSON(URL + '/' + $('#DDL_1_ID').val(), function (data) {
$.each(data, function (i, format) { });
});
});
});

You could continue appending query string parameters as you've done with ddl_1_tc...
$.getJSON(URL + '/' + $('#DDL_1_ID').val() + '&myotherparam=' + yourotherinput
Your url appears to be malformed though. I believe you're missing the name of the first value...
$.getJSON(URL + '?nameforfirstparam=' + $('#DDL_1_ID').val() + '&nameforsecondparam=' + yoursecondinput

javascript embedded function and embedded variable scope

I am writing a small app that will use the jQuery ajax call to make SOAP calls to a third party API. I want to make the following function "generic" but am running into variable scoping issues in the innermost function in the "done()" ajax method. That function is where the good stuff is returned. I want the key, value pairs to be placed in the "result" object that is passed into the APICall function but i don't know how to reference it down there.
I don't think I can modify the function parameter list in the "done" section can I? I just tried adding the passed in "result" to the "done" functions and there were no syntax issues but it is not working.
Ideas?
function APICall(method, username, password, payload, result) {
var wsUrl = "https://localhost.my.company.org/API/Service.asmx";
var soapRequest = "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n"
+ "<soap:Envelope \n"
+ " soap:encodingStyle=\"http://schemas.xmlsoap.org/soap/encoding/\" \n"
+ " xmlns:soap=\"http://schemas.xmlsoap.org/soap/envelope/\" \n"
+ " xmlns:soapenc=\"http://schemas.xmlsoap.org/soap/encoding/\" \n"
+ " xmlns:xsd=\"http://www.w3.org/2001/XMLSchema\" \n"
+ " xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance\"> \n"
+ " <soap:Body> \n"
+ " <__METHOD__ xmlns=\"http://THIRD-PARTY.API.Web.Service/\"> \n"
+ " <UserName>__USERNAME__</UserName> \n"
+ " <Password>__PASSWORD__</Password> \n"
+ " __PAYLOAD__ \n" + " </__METHOD__> \n"
+ " </soap:Body> \n" + "</soap:Envelope>\n";
soapRequest = soapRequest.replace(/__METHOD__/g, method);
soapRequest = soapRequest.replace(/__USERNAME__/g, username);
soapRequest = soapRequest.replace(/__PASSWORD__/g, password);
soapRequest = soapRequest.replace(/__PAYLOAD__/g, payload);
$.ajax({
type : "POST",
headers : {
SOAPAction : '"http://THIRD-PARTY.API.Web.Service/' + method + '"'
},
url : wsUrl,
contentType : "text/xml",
dataType : "xml",
data : soapRequest,
error : processAJAXError
}).done(
function(data, textStatus, jqXHR) {
$($.parseXML($(data).find(method + 'Result').text())).find(
'Data').each(
function(key, val) {
result[$(val).find('Room').text()] = $(val).find(
'ID').text();
console.log($(val).find('Room').text() + ' => '
+ $(val).find('ID').text());
});
});
}

Try bind();
.done(
function(data, textStatus, jqXHR) {
.
.
.
}.bind(result));

Trying to add variables to twitter json url

I'm trying to create a function which uses a combination of jquery, json and javascript to retrieve a twitter feed using the $.getJSON() method.
I have the function working with a static url like so:
$.getJSON("http://twitter.com/status/user_timeline/owzzz.json?count=1&callback=?", function(data) {
What I'm trying to do is replace where you see the username owzzz and count with values passed into the function.
the function looks something like this:
var twitterFeed = function(username, count){
$.getJSON("http://twitter.com/status/user_timeline/owzzz.json?count=1&callback=?", function(data) {
$.each(data, function(i) {
var timestamp = new Date(this.created_at);
var text = this.text;
$("#twitter").html(text +'<a href="http://twitter.com/' + username + '/" class="timestamp">' + username + ' <span>' + timestamp.toDateString() + '<\/span><\/div>' ).click(function(e) {
window.location = 'http://twitter.com/' + username;
e.preventDefault();
});
});
}); } twitterFeed('owzzz',1);
I can add the passed value username in the .html() but not inside the getJSON();
Any idea how I would go about this?

Do the same as you do in the html function: String concatenation.
$.getJSON("http://twitter.com/status/user_timeline/" + username + ".json?count=" + count + "&callback=?", ...)

string concatenation.
$.getJSON(
'http://twitter.com/status/user_timeline/' + username + '.json' +
'?count=' + count + '&callback=?'
);