Jnewbie Jnewbie - 1 month ago 10
Javascript Question

Print json data from an api url

im having problems to parse a json object to text. Can anyone help me?

This is my code:

<script>
$.ajax({
url: 'https://randomuser.me/api/',
dataType: 'json',
success: function(data) {
var jsonString = data;
var myJsonObject = JSON.parse(jsonString);
alert(myJsonObject);
}
});
</script>


This is my response:

{
"results": [
{
"gender": "male",
"name": {
"title": "mr",
"first": "noah",
"last": "chan"
},
"location": {
"street": "5316 brock rd",
"city": "lafontaine",
"state": "new brunswick",
"postcode": 88811
},
"email": "noah.chan@example.com",
"login": {
"username": "silverlion343",
"password": "pacific",
"salt": "YQfKuRwc",
"md5": "72faf6fd29f245b028655fc423919b5b",
"sha1": "5f9c0106ac18b7ea4a15ad53667dc49fc644aa1c",
"sha256": "42465b6f63942f01c96149dd7e725f5b0e5b6836e0ce0a66b62559ff8a8e706a"
},
"dob": "1962-05-21 10:51:27",
"registered": "2004-12-24 02:34:01",
"phone": "655-165-7871",
"cell": "548-005-8204",
"id": {
"name": "",
"value": null
},
"picture": {
"large": "https://randomuser.me/api/portraits/men/27.jpg",
"medium": "https://randomuser.me/api/portraits/med/men/27.jpg",
"thumbnail": "https://randomuser.me/api/portraits/thumb/men/27.jpg"
},
"nat": "CA"
}
],
"info": {
"seed": "bc96983e110ad6ea",
"results": 1,
"page": 1,
"version": "1.1"
}
}


And this is my console log:


SyntaxError: JSON.parse: unexpected character at line 1 column 2 of the JSON data

var myJsonObject = JSON.parse(jsonString);


Seems like im missing something obvious....
Thanks in advance

Answer

The response has already been deserialised for you as you provided a dataType. Remove the JSON.parse() line and use data as an object directly and your code should work.

Also note that you should use console.log() or console.dir() for debugging - not alert().

$.ajax({
  url: 'https://randomuser.me/api/',
  dataType: 'json',
  success: function(data) {
    console.log(data);
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>