没有API的AJAX调用

In the moment I click on new collection list item all the cars that I have saved in my JSON comes on the webpage.

HTML code

<a href="javascript:void(0)" class="dropbtn" onclick="myFunction()">NEWST</a>
      <div class="dropdown-content" id="myDropdown">
      <ul>
        <li>  <a href="#">New collection</a></li>
          <li><a href="#">Gifts and sales</a></li>
          <li><a href="#">Service centers</a></li>
          </ul>
      </div>
   </li>
   </ul>
      <!--<button onclick="addimage();"> Click</button>-->
    </div>

I wanted to make it dynamic but for it I need an API from which i could fetch the information by giving the URL of it. But right now I just saved the data in JSON and called it through AJAX.

AJAX code :

var clickedLi = $(this);
$.ajax({
    type: "GET",
    url: "http://localhost:8000/scripts/car.json",
    dataType: "json",
    async: false,
    success: function(result) {
        BuildNewList(result,clickedLi);
    },
    error: function(err) {

    }
});

function BuildNewList(jsonData,liTag){ 
    liTag.empty(); 
    var data = JSON.parse(jsonData);
    liTag.append('New Collection<ul></ul>');

    {
        for (var make in data.cars) {
            for (var i = 0; i < data.cars[make].length; i++) {
                var model = data.cars[make][i].model;
                liTag.find('ul').append('<li>' + make + ' - ' + model + '</li>')
            }
        }
}

JSON :

var anotherData = '{"cars":
    {"Honda":[
        {"model":"Figo"},
        {"model":"City"}
        ],
    "Audi":[
    {"model":"A6"},
    {"model":"A8"}
        ]
    }
}';

But it is not getting populate and not getting shown on the screen.

Why is it not giving me any output? And whether the Success: part in ajax is wrong or JSON object is having haul? I'm getting this errors:

Where am I wrong and how can i resolve it? AND one more thing is that I am confused whether my json file URL which I have given in AJAX is correct or not?

Any help would be appreciated.