Return the URL of an image via JSON

Asked

Viewed 517 times

1

I’m communicating my website with API of Behance 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 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>
<script src="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 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 the.cover.404 project for example, the angular shows syntax error. What I can do?

javascript angularjs json

1 answer

1


Change the code:

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

Reference: https://docs.angularjs.org/api/ng/directive/ngSrc

Because javascript does not accept numeric object property.

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: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Property_Accessors

  • Thanks! It worked, but the console returns this error: GET http://localhost/Luan.digital/%7B%7Bprojeto.covers[404]%7D%7D 404 (Not Found)

  • @Luandavi use ng-src, I edited the answer take a look

Browser other questions tagged javascript angularjs json

You are not signed in. Login or sign up in order to post.