Question

I'm getting really frustrated and I know it must be a simple mistake I'm making. So, I'm trying to get some images from my account on Behance and display them on my own site. I'm using AngularJS. With the following code I'm able to get a response:

'use strict';

angular.module('angularApp')
  .controller('BehanceCtrl', function ($scope, $resource) {

    $scope.behance = $resource('http://www.behance.net/v2/users/zachjanice/projects?client_id=xxxxxxxxxx', 
        { q:'', callback: 'JSON_CALLBACK'},
        {get:{method:'JSONP'}}
    );

    $scope.behanceResult = $scope.behance.get();

  });

In Chrome developer tools shows I'm getting a response.

angular.callbacks._0({"projects":[{"id":123456, etc. etc.}] })

My HTML file is showing:

<section ng-controller="BehanceCtrl">
    <div class="container">
        <div class="row">
            <ul>
                <li ng-repeat="behance in behanceResult.results">
                    <img ng-src="{{projects.covers}}">
                    <h1>{{projects.id.name}}</h1>
                </li>
            </ul>
        </div>
    </div>
</section>

What am I leaving out? And how can I display the images and headings for those images.

Any help is appreciated.

Was it helpful?

Solution

<section ng-controller="BehanceCtrl">
<div class="container">
    <div class="row">
        <ul>
            <li ng-repeat="behance in behanceResult.results">
                <img ng-src="{{behance.projects.covers}}">
                <h1>{{behance.projects.id.name}}</h1>
            </li>
        </ul>
    </div>
</div>

OTHER TIPS

The array you should use is behanceResult.projects, so this should work:

<div class="container">
<div class="row">
    <ul>
        <li ng-repeat="project in behanceResult.projects">
            <img ng-src="{{project.covers[202]}}">
            <h1>{{project.name}}</h1>
        </li>
    </ul>
</div>

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top