current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
stack overflow careers
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 0 down vote favorite

I am trying to have an array of 30 recipes shown on my view with data from an API call.

  // app.js
  angular.module('recipeApp', [])
  .controller('RecipesCtrl', ['$scope', '$http', function ($scope, $http) {
    $scope.mainview = [];

  $http.get('/API')
    .then(function(response) {
      $scope.mainview = response.data;
    });

  // index.html
  <html lang="en" ng-app="recipeApp">
  <body ng-controller="RecipesCtrl">
  {{mainview}} //this outputs the same data shown on the API call.
               // when I try 'ng-repeat' nothing shows up at all

  // data from API call (this is just a sample of the data. there is really an array of 30 objects in "recipes")
  {
  "count": 30,
  "recipes": [
    {
      "publisher": "Closet Cooking",
      "f2f_url": "http://food2fork.com/view/35382",
      "title": "Jalapeno Popper Grilled Cheese Sandwich",
      "source_url": "http://www.closetcooking.com/2011/04/jalapeno-popper-grilled-cheese-sandwich.html",
      "recipe_id": "35382",
      "image_url": "http://static.food2fork.com/Jalapeno2BPopper2BGrilled2BCheese2BSandwich2B12B500fd186186.jpg",
      "social_rank": 100,
      "publisher_url": "http://closetcooking.com"
    },
    {
      "publisher": "The Pioneer Woman",
      "f2f_url": "http://food2fork.com/view/47024",
      "title": "Perfect Iced Coffee",
      "source_url": "http://thepioneerwoman.com/cooking/2011/06/perfect-iced-coffee/",
      "recipe_id": "47024",
      "image_url": "http://static.food2fork.com/icedcoffee5766.jpg",
      "social_rank": 100,
      "publisher_url": "http://thepioneerwoman.com"
    },

When I have {{mainview}} in the html, it shows the same as above, but how can I have it so all 30 recipes are looped in the view? I looked into ng-repeat, but I am very new to Angular and couldn't figure it out. Any information on this would be appreciated.

share|improve this question

3 Answers 3

up vote 0 down vote accepted

you can use ng-repeat like this:

<body ng-controller="RecipesCtrl">
    <ul>
      <li ng-repeat="recipe in mainview.recipes">{{recipe}}</li>
    </ul>
</body>

It will generate a li element for every recipe in your array. You can access the properties of a recipe using . as you would in javascript.

{{recipe.publisher}}

Note: ng-repeat works with any elements, I used ul and li for show purposes only.

share|improve this answer
    
There are no errors and nothing shows up when I use this. – Alex Aug 26 at 19:25
    
you did not post your html code in the question, could you post that? – toskv Aug 26 at 19:27
    
toskv, I just updated the post – Alex Aug 26 at 19:38
    
@Alex It should do the trick – toskv Aug 26 at 19:45
    
I made a quick plunkr with the data, and it works just fine. :) Maybe there's an issue in a part of the code you are not showing us. plnkr.co/edit/1m6MRTXhWfqwOGi8yOrk – toskv Aug 26 at 19:48
up vote 0 down vote

I think you're looking for a view fragment like:

<div data-ng-repeat="item in mainview.recipes">
    <div>
        <label>Publisher</label><span>{{item.publisher}}</span>
    <div>
    <div>
        <label>Title</label><span>{{item.title}}</span>
    <div>
    ...
</div>

where ... is whatever else you want to display in the view. Documentation at: https://docs.angularjs.org/api/ng/directive/ngRepeat (though I know you've read it (: )

share|improve this answer
    
There are no errors and nothing shows up when I use this. – Alex Aug 26 at 19:24
up vote 0 down vote

Something like this may help you:

<ul>
  <li ng-repeat="recipe in mainview.recipes">
    <a href="{{recipe.source_url}}">{{recipe.title}}</a>
    <br />
    - {{recipe.publisher}}
  </li>
</ul>
share|improve this answer
    
There are no errors and nothing shows up when I use this. – Alex Aug 26 at 19:24
    
so, now it depends how you are using the controller in your view. If you are using alias, like ng-controller="ctrl as viewCtrl", you need to make changed in repeater like <li ng-repeat="recipe in ctrl.mainview.recipes">, otherwise youcan use the above code. – Ashish Kumar Aug 26 at 19:32
    
The reason why it wasn't working was because the data that came back from the API was a string. I needed to parse it to JSON. After that, your answer worked. Thank you! – Alex Aug 26 at 22:29

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.