CODEWITHSUNDEEP
angularjs
Corey Ogburn
Corey Ogburn

Reputation: 24769

$http only calls error when making simple ajax request?

I feel like I'm missing something small. Here's my index.html:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="ImageViewerApp">
<head>
    <title></title>
    <script type="text/javascript" src="/scripts/angular.js"></script>
    <script type="text/javascript" src="/scripts/Controller.js"></script>
</head>
<body ng-controller="ImageViewerCtrl">
    <p>{{Value}}</p>
</body>
</html>

My Controller.js:

var ImageViewer = angular.module('ImageViewerApp', []);

ImageViewer.controller('ImageViewerCtrl', [ '$scope', '$http', ImageViewerCtrl ]);

function ImageViewerCtrl($scope, $http) {
    $scope.Value = 'Test';
    $http.get('data/job.json').success(function (data) {
        $scope.Value = data.Test;
    }).error(function (data, status, headers, config) {
        data = data;
    });
}

My job.json:

{
  Test: 'Hello, World!'
}

And my Web.config:

<?xml version="1.0"?>
<configuration>
  <system.web>
    <compilation debug="true" targetFramework="4.5" />
    <httpRuntime targetFramework="4.5" />
  </system.web>
  <system.webServer>
    <staticContent>
      <mimeMap fileExtension=".json" mimeType="application/json"/>
    </staticContent>
  </system.webServer>
</configuration>

I'm working in VS 2012 and I've made a simple blank website. Debugging the site runs it in IIS Express and IE 10. Other browsers might work, but the eventual project this will be used in will be an internal web app running on only IE 10.

I'm trying to do something similar to how the Angular Tutorial makes an AJAX request to a .json file in order to simulate a web request. I was first running into some issues about not having a handler defined for the .json file type, but I added a mimeMap to the Web.config and now fiddler reports that the request for /data/job.json is coming back as either a 200 or a 304 (Not Modified) but the error part of the promise is the only one that ever gets called.

data = data; is there simply so I can place a breakpoint in Visual Studio. data, status, and headers are all undefined and config doesn't seem to say anything useful, but here's the result of JSON.stringify(config) if it helps:

{"method":"GET","transformRequest":[null],"transformResponse":[null],"url":"/data/job.json","headers":{"Accept":"application/json, text/plain, */*"}}

What am I doing wrong that sets off error instead of calling success?

EDIT: Wandering through the call stack and looking at the state inside angular.js, I've found that somewhere in the bowels of angular it does have the response I expect for requesting job.json, but later in the stack there's an error (that isn't successfully passed to my error callback) that simply says Invalid Character. I don't know what character it could be hanging up on. This hasn't helped me figure out what's going wrong, but maybe it'll help get an answer here.

Upvotes: 0

Views: 297

Answers (1)

nowk
nowk

Reputation: 33181

{Test: "value"}

It isn't valid JSON when returning it in it's RAW form. You will need to add the appropriate " (Quotes) around the key. 

{"Test": "value"}

Upvotes: 1

Related Questions