CODEWITHSUNDEEP
javascriptjqueryjsonajax
nian
nian

Reputation: 55

how to use ajax to get a json file in github

I want to use ajax to get a json file in github, I wrote this code:

$.ajax({
   url: "https://rawgit.com/nianyuyu/play_javascript/master/1.json",
    type:"get",
    dataType:'json',  
    success: function(data){
      console.log(data);
    },
    error:function() {
      console.log("err");
    }
});

but I always get "err" and I check the network , it gets the data enter image description here

How can I solve this problem, thank you!

Upvotes: 0

Views: 1808

Answers (5)

H77
H77

Reputation: 5967

Based on the error, parsererror, the url doesn't seem to return valid JSON, while the call expects it to be JSON (dataType: 'json')

You can tell jQuery to parse it as text (using dataType: 'text') and then convert it to JSON manually using JSON.parse.

You'll have to trim out the last ; before you parse.

On a side note, you can use the parameter passed into the error callback to print out the error.

Fixed code:

$.ajax({
  url: "https://rawgit.com/nianyuyu/play_javascript/master/1.json",
  type: "get",
  dataType: 'text',
  success: function(response) {
    if (!response)
      return;

    response = response.slice(0, -1); // trim ";" at the end
    var data = JSON.parse(response); // convert to object
    console.log(data);
  },
  error: function(err) {
    console.log(err);
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Upvotes: 1

Shiladitya
Shiladitya

Reputation: 12181

You are receiving the data in error because you are expecting a JSON response where as the actual response is not a valid JSON.

It has semicolon at the end, it makes a invalid JSON.

Try dataType as text. Here you go with the example https://jsfiddle.net/sfjxsdsx/1/

$.ajax({
   url: "https://rawgit.com/nianyuyu/play_javascript/master/1.json",
    type:"get",
    dataType:'text',  
    success: function(data){
      console.log(data);
    },
    error:function() {
      console.log("err");
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Upvotes: 1

harshpatel991
harshpatel991

Reputation: 481

Since you have included dataType:'json', in your request, jQuery will validate the returned JSON. In this case, the returned JSON has a semi-colon at the end of the body which is not valid JSON.

 {
"name":"Bill Gates",
"street":"Fifth Avenue New York 666",
"age":56,
"phone":"555 1234567"
};

Remove the semi-colon to prevent the error handler from being called.

Upvotes: 2

Abdul Aleem Khan
Abdul Aleem Khan

Reputation: 83

1.json file is incorrect. At the end there is a semi colon. Remove that semi colon and it will work fine.

if you dont have access to that file then you can use the following code.

$.ajax({
   url: "https://rawgit.com/nianyuyu/play_javascript/master/1.json",
    type:"get",
    dataType:'text',  
    success: function(data){
      console.log(JSON.parse(data.substring(0, data.length - 1)));
    },
    error:function() {
      console.log("err");
    }
});

Here I basically get the string and trim its last character and then parse the string back to JSON object.

Upvotes: 1

gusaindpk
gusaindpk

Reputation: 1243

I think you are getting a parse error which is causing the issue, you can fix the json response or you can remove data type json from you request. You will get parse error, if your json response is not valid and you are using dataType: 'json'. you can change it dataType: 'text'

        $.ajax({
       url: "https://rawgit.com/nianyuyu/play_javascript/master/1.json",
        type:"get",
        dataType: 'text',  
        error: function(data){
        //debugger;
          alert('err');
        },
        success:function(data) {
          alert(data);
        }
    });

Reference: jQuery returning "parsererror" for ajax request

Upvotes: 1

Related Questions