current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Sign up ×
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other. Join them; it only takes a minute:
up vote 2 down vote favorite

I've seen so many ways to do this, but most are pretty old and I want to make sure I'm doing this correctly. Right now, the way I'm using isn't working and I feel like I'm missing something.

I'm getting the JSON back fine, I just need to get it to display in a table after I click the button.

Here is the JSON. This is how I'm going to get it from our server, I can't add any "var JSON =" or add any scope like "$scope.carrier" to the data, unless there's a way to add it after I've fetched the data.

{
    "carrier": 
    [
        {
        "entity": "carrier",
        "id": 1,
        "parentEntity": "ORMS",
        "value": "Medica"
    }, {
        "entity": "carrier",
        "id": 2,
        "parentEntity": "ORMS",
        "value": "UHG"
    }, {
        "entity": "carrier",
        "id": 3,
        "parentEntity": "ORMS",
        "value": "Optum"
    }, {
        "entity": "carrier",
        "id": 4,
        "parentEntity": "ORMS",
        "value": "Insight"
    }, {
        "entity": "carrier",
        "id": 5,
        "parentEntity": "ORMS",
        "value": "Insight"
    }
    ]
}

Here is the app.js file to bring back the JSON data:

var app = angular.module('myTestApp', []);

app.controller('myController', ['$scope', '$http', function($scope, $http) {
var url = 'test.json';
  $scope.clickButton = function() {
    $http.get(url).success(function(data) {
        console.log(data);
      });
  }
}]);

And then of course the HTML:

<div class="col-lg-12 text-center">
             <button type=button class="btn btn-primary load" ng-click="clickButton()">Click!</button>
         <table class="">
             <tbody ng-repeat="carrier in carriers">
                <tr>
                    <td>
                        <h3 class="">{{ module.entity }}</h3>
                        <h3 class="">{{ module.id }}</h3>
                        <h3 class="">{{ module.parentEntity }}</h3>
                        <h3 class="">{{ module.value }}</h3>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>

I'm also wondering if I can use the ng-grid to put this in a table. I know they just upgraded it to ui grid so I'm not sure if this is still a feasible approach.

Also, I'm not getting errors, the data just won't display in the table right now. All I know is its returning the data properly, just not displaying in the table.

Any help is appreciated.

share|improve this question
2  
Perhaps try changing module.___ to carrier.___. Your ng-repeat block is binding each individual item of the list to a context called carrier. – Michael Tang Mar 10 '15 at 16:15
2  
you don't do anything with the incoming data beside logging it, so it does what you told it (nothing) – dandavis Mar 10 '15 at 16:18
up vote 3 down vote accepted

I looked at your plunker seems like you need to:

  • add angular script
  • wire the app and the controller
  • your variable in the repeater is wrong, I change it

take a look to this fixed plunker:

http://plnkr.co/edit/TAjnUCMOBxQTC6lNJL8j?p=preview

 $scope.clickButton = function() {
     $http.get(url).success(function(returnValue) {
         alert(JSON.stringify(returnValue.carrier));
         $scope.carriers = returnValue.carrier;  
      });
  }
share|improve this answer
up vote 1 down vote

You never assign the value of the returned array to $scope.carriers.

At the line where you say console.log(data); add this:

$scope.carriers = data.data;

Here is the updated clickButton function (with a variable name change to reduce confusion):

$scope.clickButton = function() {
  $http.get(url).success(function(returnValue) {
    $scope.carriers = returnValue.data;
  });
};
share|improve this answer
    
I updated the code. Still no errors, but the data still isn't being displayed. Plunker here – Dade Mar 10 '15 at 17:37
    
Your Plunker is missing a lot...you never load Angular itself, you never mention the app in your HTML, you never mention your controller in your HTML, etc. I'll try to figure out what all you are missing/have wrong...but in the meantime, please review some tutorials and the docs again – Kabb5 Mar 10 '15 at 17:45
    
@jack.the.ripper beat me to it...he fixed up your omissions from the plunker – Kabb5 Mar 10 '15 at 18:07
1  
jack and @Kabb5 Thanks for both of your help! I had been changing the code so frequently, I didn't realize I deleted initializing the app (ng-app = "myTestApp") on the container. Jack's code worked, and yeah, I have to go back and review the docs again. – Dade Mar 10 '15 at 19:45

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.