JSON response via http not working in Angular

Question

Currently working on Angular. I am trying to get the data from JSON file and I am showing the result in Ul format. When I searched in Stack Overflow, I found this link. I am trying to do the same but still I am not solving it.

This is what I am trying here in the controller:

'use strict';  
 var app = angular.module('myApp', []);

 app.controller('MyController', function($scope, $http){
   $http.get('sample.json').then(function (response){
    $scope.items = response.data.countries;
   });
 });

HTML code:

<body ng-app="myApp">
    <div ng-controller="MyController">
        <ul>
            <li ng-repeat="(key, value) in items" {{key}}>
                
            </li>
        </ul>
    </div>
</body>

Here is my plunker. What am I doing wrong here?

you write {{ key }} as attribute inside li tag

aseferov
– aseferov

2016-05-08 17:22:54 +00:00
Commented May 8, 2016 at 17:22 — aseferov
– aseferov, Commented May 8, 2016 at 17:22

Sajeetharan · Accepted Answer · 2016-05-08 17:16:44Z

1

There are three issues,

(i)You do not need to declare the module twice , once in script.js and other one in controller.js.

(ii) You were refering to angular 2.0 version ,and coded using angular 1.4 version.

(iii)If you want to show all states from json, it should not have a duplicate key, which you could see from the plunker itself

{ "countries": { "State": [ "TamilNadu" ], "State": [ <-- Error: duplicate key! "Karnataka" ] } }

Here is the working Application

edited May 8, 2016 at 17:16

answered May 8, 2016 at 17:10

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

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

7 Comments

Mr.M Over a year ago

Hi Thanks for the response I want to show all states is that possible can you please explain

Sajeetharan Over a year ago

Yes, its possible for that you should not have duplicates key in your json

Mr.M Over a year ago

Can you please help me how to create a simple json which countries

Mr.M Over a year ago

but when i try to validate my json it shows correct json i am getting confused

Mr.M Over a year ago

Thank you so much I am getting the values but how to remove curly brackets and square brackets and can you please explain me how you did it

|

paulsm4 · Accepted Answer · 2016-05-08 17:13:41Z

1

One other problem: your JSON is incorrect:

{
  "countries": {
    "State": [
      "TamilNadu"
    ],
    "State": [  <-- Error: duplicate key!
        "Karnataka"
    ]
  }
}

Here is an alternative:

{
  "countries": [
    { "USA": [
      {"State": "California"},
      {"State": "Nevada"} ]},
    { "India": [
      {"State": "TamilNadu"},
      {"State": "Karnataka"} ]}
] }

answered May 8, 2016 at 17:13

paulsm4

123k23 gold badges175 silver badges245 bronze badges

1 Comment

Mr.M Over a year ago

Hi when I try to put your Json I am just getting only dot not the value why

Collectives™ on Stack Overflow

JSON response via http not working in Angular

2 Answers 2

7 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related