Consuming API in javascript without using Node.js

Question

i am leveraging CamFind's API for image recognition in my windows phone 8 app. On their site they have given an example for how to use the API with Node.js.. however i am writing a PhoneGap Windows Phone app and dont have this availble.

I would like to use just plain jquery/javascript to use this API.

Here's the example provided on their site:

var Request = unirest.post("https://camfind.p.mashape.com/image_requests")
  .headers({ 
    "X-Mashape-Authorization": "Z**********************"
  })
  .send({ 
    "image_request[locale]": "en_US",
    "image_request[language]": "en",
    "image_request[device_id]": "<image_request[device_id]>",
    "image_request[latitude]": "35.8714220766008",
    "image_request[longitude]": "14.3583203002251",
    "image_request[altitude]": "27.912109375",
    "focus[x]": "480",
    "focus[y]": "640",
    "image_request[image]": "/tmp/file.path"
  })
  .end(function (response) {
    console.log(response);
  });

Here's how i am trying to do the same using jquery/ 'plain' javascript

$.ajax({
    url: 'https://camfind.p.mashape.com/image_requests', // The URL to the API. You can get this by clicking on "Show CURL example" from an API profile
    type: 'POST', // The HTTP Method
    data: {
    "image_request[locale]": "en_US",
    "image_request[language]": "en",
    "image_request[device_id]": "<image_request[device_id]>",
    "image_request[latitude]": "35.8714220766008",
    "image_request[longitude]": "14.3583203002251",
    "image_request[altitude]": "27.912109375",
    "focus[x]": "480",
    "focus[y]": "640",
    "image_request[image]": "http://exelens.com/blog/wp-content/uploads/2013/03/bmw-car-2013.jpg"

}, // Additional parameters here
    datatype: 'json',
    success: function(data) { alert(JSON.stringify(data)); },
    error: function(err) { alert(err); },
    beforeSend: function(xhr) {
    xhr.setRequestHeader("X-Mashape-Authorization", "Z**********************");
    }
});

Issue/Question:

• When i do it through javascript/jquery - it seems to be complaining about missing image_request[image] attribute. It never hits the success block.
• Am i doing something wrong in terms of how i transformed the Node.js API request example (1st block of code above) provided by CamFind VS. how i am doing trying to consumer the API through plain through Javascript (2nd block of code above)?

Thanks!!

Fyi, references i am using:

• Consume an API in javacstipt: https://www.mashape.com/imagesearcher/camfind#!endpoint-1-Image-Request CamFind API usage: https://www.mashape.com/imagesearcher/camfind#!endpoint-1-Image-Request

Answer 1

I know this is an old question but having stumbled across it whilst trying to solve it myself I thought I should answer it for the future.

The issue is this line:

"image_request[image]": "http://exelens.com/blog/wp-content/uploads/2013/03/bmw-car-2013.jpg"

It should be:

"image_request[remote_image_url]": "http://exelens.com/blog/wp-content/uploads/2013/03/bmw-car-2013.jpg"

So the complete code is:

$.ajax({
      url: 'https://camfind.p.mashape.com/image_requests', // The URL to the API. You can get this by clicking on "Show CURL example" from an API profile
      type: 'POST', // The HTTP Method
      data: {
      "image_request[locale]": "en_US",
      "image_request[language]": "en",
      "image_request[device_id]": "<image_request[device_id]>",
      "image_request[latitude]": "35.8714220766008",
      "image_request[longitude]": "14.3583203002251",
      "image_request[altitude]": "27.912109375",
      "focus[x]": "480",
      "focus[y]": "640",
      "image_request[remote_image_url]": "http://exelens.com/blog/wp-content/uploads/2013/03/bmw-car-2013.jpg"

      }, // Additional parameters here
          datatype: 'json',
          success: function(data) { nowDoSomethingFun(data); },
          error: function(err) { alert(err); },
          beforeSend: function(xhr) {
          xhr.setRequestHeader("X-Mashape-Key", "YOURKEY")
          }
      });
  }

Answer 2

I am not familiar with this API but you might try formatting your data parameter like this:

data: {
    image_request: {
        locale: 'en_US',
        language: 'en',
        device_id: '<image_request[device_id]>',
        latitude: '35.8714220766008',
        longitude: '14.3583203002251',
        altitude: '27.912109375',
        image: 'http://exelens.com/blog/wp-content/uploads/2013/03/bmw-car-2013.jpg'
    },
    focus: {
         x: '480',
         y: '640'
    }
}