JSON Not grabbed by $.getJSON

Final solution: There was something wrong with the formatting of my .json file deeper down than the snippet I included in the question. Everything is working now. Big thanks to everyone in the comments and I'm marking @TWLATL's answer as correct because it's a nicely formatted function solution I can use in projects later.

I'm trying to access my data.json file from script.js (both in the root directory) and it doesn't seem to be running at all. Before I put in error handling, I was getting no indication the function ran. Thanks to comments, I replaced .error with .fail, but I still can't figure out why it's failing.

index.html

<body>
    <h1>JSON Render</h1>
    <div id="fileViewer"></div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="script.js"></script>
</body>

script.js

$.getJSON('data.json', function(data) {
    console.log('json grabbed')
    console.log(data);
})
.fail(function(data) {
    console.log("GetJSON Error!");
    console.log(data);
});

$.ajax({
    url: 'data.json',
    dataType: 'json',
    success: function( data ) {
        console.log( "SUCCESS: " );
        console.log( data );
    },
    error: function( data ) {
        console.log( "AJAX ERROR: " );
        console.log( data );
    }
});

data.json (sample)

{
    "children": [
      {
        "name": "Main Folder",
        "type": "folder"
      },
      {
        "name": "Private folder",
        "type": "folder"
      }
    ]
}

I've been looking around on Stack Overflow and no solutions I've found seem to solve my problem. Help!

Edit: Added jQuery CDN to my index.html. It was there. I just forgot to put it in the question.

Edit 2: Updated script.js to reflect the code that is returning the screenshots below. (screenshot cut off in the middle of the object. I can include more if the context of the object is actually relevant.)

Edit 3: New AJAX Error handling: The new ajax function:

$.ajax({
    url: 'data.json',
    dataType: 'json',
    success: function( data ) {
        console.log( "SUCCESS: " );
        console.log( data );
    },
    error: function(data, textStatus, errorThrown) {
        console.log("textStatus: ",textStatus);
        console.log("errorThrown: ",errorThrown);
    }
});

And I am now wonderfully getting this console output:

回答1:

Using a slightly modified version of your code, I have it returning the JSON just fine:

http://plnkr.co/edit/DMLyJa1Quj7ofszn5Y7o?p=info

$(document).ready(function() {
  console.log("ready!");

  var items;

  $.getJSON('data.json', function(data) {
      console.log('json grabbed');
    })
    .done(function(data) {
      items = data.children;
      console.log(items);
    })
    .fail(function(data) {
      console.log("Error!");
    });

}); // close document.ready

Jquery uses .done now for the success method. In that block just assign your data.children item to a variable and you are good to go.

回答2:

Thanks to everyone in the comments I was able to sort out the issue. It was actually a JSON formatting issue. I used this site to find where the problem was: https://jsonformatter.curiousconcept.com/