Getting JSON data using $http

Question

I am trying to get the JSON data using the $http function; I am always getting error for this. Here is my HTML code:

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="customersCtrl"> 

<ul>
   <li ng-repeat="x in code">
     {{ x.code }}
   </li>
</ul>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
   $http.get("data.json")
   .success(function (response) {$scope.code = response;})
   .error(function (response) {alert("Error")})
});
</script>

</body>
</html>

Here is my data.json file:

{
  "code":"#include <stdio.h>

          int main()
          {
             printf('Hello world');
             return 0;
          }"
}

Here is the plunker http://plnkr.co/edit/Q4dsCjHM3ykgp2SaHw35?p=preview

your data is not a proper json

Sajeetharan
– Sajeetharan

2015-08-10 13:27:16 +00:00
Commented Aug 10, 2015 at 13:27 — Sajeetharan
– Sajeetharan, Commented Aug 10, 2015 at 13:27

Pankaj Parkar · Accepted Answer · 2015-08-10 13:41:12Z

2

Do change your data to below.Basically it should be string, use pre tag for line break & then replace enter by \n

{
  "code": "#include <stdio.h>\n int main()\n printf('Hello world');\n return 0;\n}"
}

HTML

<ul>
  <li ng-repeat="x in code">
    <pre>{{ x }}</pre>
  </li>
</ul>

Working Plunkr

edited Aug 10, 2015 at 13:41

answered Aug 10, 2015 at 13:27

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Ramana Uday Over a year ago

How can I include line breaks can u help me

Ramana Uday Over a year ago

Where should I include the pre tag . Can i include in json file.

Pankaj Parkar Over a year ago

@RamanaUday it should be html check my html in answer, it should be inside li tag <pre>{{ x }}</pre>

alaney · Accepted Answer · 2015-08-10 13:27:50Z

2

Your JSON is poorly formatted. The string line of code should be on one line e.g.,

{
    "code": "#include <stdio.h> int main() ...."
}

You can always validate your JSON at jsonlint.com

answered Aug 10, 2015 at 13:27

alaney

6235 silver badges12 bronze badges

Comments

Pankaj Parkar · Accepted Answer · 2015-08-10 13:38:57Z

0

Your JSON is not well formated.

JSON

{
  "code":"#include <stdio.h>int main(){printf('Hello world');return 0;}"
}

Then, you can access to the code field in your request :

Controller

$http.get("data.json")
  .success(function (response) {
    $scope.code = response.code;
})
.error(function (response) {
    alert("Error");
});

edited Aug 10, 2015 at 13:38

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

answered Aug 10, 2015 at 13:30

Paul Boutes

3,3152 gold badges21 silver badges22 bronze badges

3 Comments

Pankaj Parkar Over a year ago

why you need response.data?

Paul Boutes Over a year ago

Why ? Yes no need of response.data, just saying response.code to retrieve the data of the field code into the JSON

Pankaj Parkar Over a year ago

because you already have data in your first option..if you used .then then only you will need to say reponse.data, though response.code is correct.I'm removing my downvote. Thanks :)

Collectives™ on Stack Overflow

Getting JSON data using $http

3 Answers 3

3 Comments

Comments

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

3 Comments

Related