Return the URL of an image via JSON

1

I am communicating with Behance API and I have the following script written in Angular 1.5.5:

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

app.controller('PortfolioCtrl', function($scope, portfolioFactory) {

  portfolioFactory.getBehance()
  .then(function onFulfilled(data){
    $scope.projetos = data;
    $scope.behanceLoaded = true;
  })
  .catch(function onRejected() {
    console.log('Erro no Factory');
  });

});

app.factory('portfolioFactory', function($http) {  

  var getBehance = function() {
    var user = 'luandavi';
    var apiKey = 'APIKEY';
      return $http.jsonp('https://behance.net/v2/users/'+ user +'/projects?api_key='+ apiKey + '&callback=JSON_CALLBACK')
      .then(function onFulfilled(response) {
        return response.data.projects;
        console.log(response.data.projetcs);
    });
  };

  return { 
    getBehance: getBehance
  };

});

And he here I show them

<body ng-app="PortfolioApp">

    <div ng-controller="PortfolioCtrl" class="grid">
        <div ng-repeat="projeto in projetos" class="item">
            <img src="{{projeto.covers.original}}">
            <h1>{{projeto.name}}</h1>
            <p>{{projeto.stats.views}}</p>
        </ul>
    </div>

<script src="http://code.angularjs.org/1.5.5/angular.js"></script><scriptsrc="main.js"></script>
</body>

The problem is that this "original" is an image with the original size that was sent to Behance, obviously. I wish I could use one of the thumbnails that the platform itself generates, after my project was aired. Of the options that JSON returns, there are the following:

"covers": {
        "115": "https://mir-s3-cdn-cf.behance.net/projects/115/ebf44656341149.Y3JvcCwxMzg0LDEwODMsMzcsMA.jpg",
        "202": "https://mir-s3-cdn-cf.behance.net/projects/202/ebf44656341149.Y3JvcCwxMzg0LDEwODMsMzcsMA.jpg",
        "230": "https://mir-s3-cdn-cf.behance.net/projects/230/ebf44656341149.Y3JvcCwxMzg0LDEwODMsMzcsMA.jpg",
        "404": "https://mir-s3-cdn-cf.behance.net/projects/404/ebf44656341149.Y3JvcCwxMzg0LDEwODMsMzcsMA.jpg",
        "original": "https://mir-s3-cdn-cf.behance.net/projects/original/ebf44656341149.Y3JvcCwxMzg0LDEwODMsMzcsMA.jpg"
      },

But if I use this number in project.cover.404 for example, the angular accuses syntax error. What can I do?

    
asked by anonymous 02.02.2018 / 12:08

1 answer

1

Change the code:

<img  ng-src="{{projeto.covers[404]}}">

Reference: link

Because in javascript, numeric object property is not accepted.

var covers = {
        "115": "https://mir-s3-cdn-cf.behance.net/projects/115/ebf44656341149.Y3JvcCwxMzg0LDEwODMsMzcsMA.jpg",
        "202": "https://mir-s3-cdn-cf.behance.net/projects/202/ebf44656341149.Y3JvcCwxMzg0LDEwODMsMzcsMA.jpg",
        "230": "https://mir-s3-cdn-cf.behance.net/projects/230/ebf44656341149.Y3JvcCwxMzg0LDEwODMsMzcsMA.jpg",
        "404": "https://mir-s3-cdn-cf.behance.net/projects/404/ebf44656341149.Y3JvcCwxMzg0LDEwODMsMzcsMA.jpg",
        "original": "https://mir-s3-cdn-cf.behance.net/projects/original/ebf44656341149.Y3JvcCwxMzg0LDEwODMsMzcsMA.jpg"
      }
      
 console.log(covers[404]);     

Reference: link

    
02.02.2018 / 12:47