0

I am attempting to make calls to the Mockaroo API.

This example they use in the docs works when I make the same call from my angular app (this probably goes without saying - but I did replace the api key here with my own api key - the same is true for the attempts below as well)

Working Example (using $.ajax)

var fields = [{
    name: "yearsEmployed",
    type: "Number",
    min: 1,
    max: 30,
    decimals: 0
}, {
    name: "department",
    type: "Custom List",
    values: ["R+D", "Marketing", "HR"]
}, {
    name: "dob",
    type: "Date",
    min: "1/1/1950",
    max: "1/1/2000",
    format: "%m/%d/%Y"
}];

var url = 'http://www.mockaroo.com/api/generate.json?key=abcd1234' +
  '&fields=' + encodeURIComponent(JSON.stringify(fields));

$.ajax(url, {
    dataType: 'jsonp',
    contentType: 'application/json',
    success: function(data) {
        console.log('yearsEmployed', data.yearsEmployed);
        console.log('department', data.department);
        console.log('dob', data.dob);
    }
});

However, I would like to use an angular $resource, but when I try replacing the $.ajax portion of the example above using any of these methods, I get errors. What is the correct method to accomplish this?.

Attempt #1

// using fields variable from above example

var url = 'http://www.mockaroo.com/api/generate.json?key=:key' +
    '&fields=:fields';

var params = {
  key: 'abcd1234',
  fields: fields
}

return $resource(url, params, {
  all: {method:'JSONP', isArray: false }
});

Attempt #1 error:

GET http://www.mockaroo.com/api/generate.json?key=abcd1234&fields=%5Bobject%20Object%5D,%5Bobject%20Object%5D,%5Bobject%20Object%5D

Attempt #2

// using fields variable from above example

var url = 'http://www.mockaroo.com/api/generate.json?key=:key' +
    '&fields=:fields';

var params = {
  key: 'abcd1234',
  fields: fields
}

return $resource(url, params, {
  all: {method:'POST', isArray: false }
});

Attempt #2 error:

XMLHttpRequest cannot load http://www.mockaroo.com/api/generate.json?key=abcd1234&fields=%5Bobject%20Object%5D,%5Bobject%20Object%5D,%5Bobject%20Object%5D. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8100' is therefore not allowed access. The response had HTTP status code 400.

Attempt #3:

// using fields AND url variables from example above
return $resource(url, {}, {
    all: {method:'POST', isArray: false }
  });

Attempt #3 error

XMLHttpRequest cannot load http://www.mockaroo.com/api/generate.json?key=abcd1234&fields=%5B%7B%22name…ax%22%3A%221%2F1%2F2000%22%2C%22format%22%3A%22%25m%2F%25d%2F%25Y%22%7D%5D. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8100' is therefore not allowed access.

Attempt #4:

// using fields AND url variables from example above
return $resource(url, {}, {
    all: {method:'JSONP', isArray: false }
  });

Attempt #4 error:

Refused to execute script from 'http://www.mockaroo.com/api/generate.json?key=abc31234&fields=%5B%7B%22name…ax%22%3A%221%2F1%2F2000%22%2C%22format%22%3A%22%25m%2F%25d%2F%25Y%22%7D%5D' because its MIME type ('application/json') is not executable, and strict MIME type checking is enabled.

Edit #1

Updated Attempt #1

var params = {
  key: 'abcd1234',
  fields: JSON.stringify(fields)
}

Updated Attempt #1 Error:

Refused to execute script from 'http://www.mockaroo.com/api/generate.json?key=abcd1234&fields=%5B%7B%22name…2,%22max%22:%221%2F1%2F2000%22,%22format%22:%22%25m%2F%25d%2F%25Y%22%7D%5D' because its MIME type ('application/json') is not executable, and strict MIME type checking is enabled.
drewwyatt
  • 5,989
  • 15
  • 60
  • 106
  • looking at attempt 1, it should work if you JSON.stringify the fields parameter or params because it will try and insert an object if you don't. Your back end should expect a stringified json object though. – SoluableNonagon Mar 31 '15 at 16:27
  • In attempt 2 you are not really POSTing any data, you're still trying to put it in the URL using resource while it should be sent as data in the headers, this is most easily fixed with $http.post – SoluableNonagon Mar 31 '15 at 16:32
  • Attempt 2 and 3 both seem to be cross origin calls, so your client needs to either generate headers for access or the server needs to accept connections from your client. – SoluableNonagon Mar 31 '15 at 16:33
  • @SoluableNonagon - I added an update that shows you what #1 yields with JSONStringify added. – drewwyatt Mar 31 '15 at 16:45
  • @SoluableNonagon also - keep in mind I have tested the example (above attempt #1), and it works. If you know how to convert that into a resource it does not have to follow the style of my attempts. – drewwyatt Mar 31 '15 at 16:47
  • Is this really JSONP? Looking at [this question](http://stackoverflow.com/questions/24528211), it seems like the answer might be to set `all: {method:'GET', isArray: false}`. – Austin Mullins Mar 31 '15 at 16:57

0 Answers0