AngularJS - how to display values from API at the frontend

Question

(function(angular, undefined) {
    'use strict';
    angular
        .module('erste.cafe-erstecb', ['angular-nicescroll', 'truncate'])
        .factory('CafeErstecb', function($resource, urls) {
            return $resource(urls.articlesApi, {
                size: '10',
                lang: 'cs',
                tags: 'Inovace'
            }, {
                query: {
                    isArray: false
                }
            });
        })
        .directive('gridCafeErstecb', function(flash, CafeErstecb) {
            return {
                restrict: 'E',
                replace: true,
                link: function(scope) {
                    CafeErstecb.query(function(response) {
                        console.log(response);
                        //$scope.result = response;
                    });
                },
                templateUrl: 'app/cafe-erstecb/grid-cafe-erstecb.tpl.html'
            };
        });
})(window.angular);

I have problem to display my values from API at the frontend. Im using factory. Full API:
http://www.erstecorporatebanking.cz/api/v1/content/?size=20&lang=cs&tags=Inovace

Same origin policy ? Take a look here

Shyju
– Shyju

2015-12-19 16:03:29 +00:00
Commented Dec 19, 2015 at 16:03 — Shyju
– Shyju, Commented Dec 19, 2015 at 16:03
no policy problem here . We solved these via CORS

Markoo08
– Markoo08

2015-12-19 16:22:30 +00:00
Commented Dec 19, 2015 at 16:22 — Markoo08
– Markoo08, Commented Dec 19, 2015 at 16:22

masa · Accepted Answer · 2015-12-21 17:44:14Z

1

This is a wild guess, but are you by any change trying to load the content via a page that runs on HTTPS?

I tried to run your code in jsfiddle.net (see https://jsfiddle.net/masa671/5vesyewz/) and it gives the following error:

Mixed Content: The page at 'https://fiddle.jshell.net/_display/' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://www.erstecorporatebanking.cz/api/v1/content?lang=cs&size=10&tags=Inovace'. This request has been blocked; the content must be served over HTTPS.

AND: the other problem is that you are missing ngResource.

UPDATE:

Here's another example for ng-repeat over the results: http://jsfiddle.net/masa671/bvcr949r/

Note that records is an object instead of an array, so it needs to be translated to an array first:

scope.records = $.map(scope.result.records,
    function(value, index) {
        return [value];
    });

edited Dec 21, 2015 at 17:44

answered Dec 19, 2015 at 18:03

masa

2,8303 gold badges26 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Markoo08 · Accepted Answer · 2015-12-20 15:14:10Z

ok so now i see json structure of API:

    {
"pageNumber": 1,
"pageCount": 5,
"pageSize": 10,
"records": {
"0": {
"id": "ECB_ARTICLE_14461",
"url": "http://www.erstecorporatebanking.cz/aktuality/cr-a-eu-co-chybi-ceske-republice-aby-byla-konkurenceschopnejsi",
"creation_date": "2015-12-18 16:30:37",
"publish_date": "2015-12-18 16:30:00",
"title": "ČR a EU: Co chybí České republice, aby byla konkurenceschopnější?",
"type": "article",
"language": "cs",
"category_token": "token_investment",
"api_url": "http://www.erstecorporatebanking.cz/api/v1/content/ECB_ARTICLE_14461"
},
"1": {
"id": "ECB_ARTICLE_13307",
"url": "http://www.erstecorporatebanking.cz/aktuality/jan-jedlicka-prorazme-skleneny-strop-vysokoprijmovych-ekonomik",
"creation_date": "2015-11-09 16:00:10",
"publish_date": "2015-11-06 07:00:00",
"title": "Jan Jedlička: Proražme \"skleněný strop\" vysokopříjmových ekonomik",
"type": "article",
"language": "cs",
"category_token": "token_investment",
"api_url": "http://www.erstecorporatebanking.cz/api/v1/content/ECB_ARTICLE_13307"
},
"2": {
"id": "ECB_ARTICLE_13154",
"url": "http://www.erstecorporatebanking.cz/aktuality/sledovali-jsme-zive-inovace-a-byznys-aneb-jak-ma-vypadat-ceska-skola-21-stoleti",
"creation_date": "2015-11-04 11:30:08",
"publish_date": "2015-11-04 11:30:00",
"title": "SLEDOVALI JSME ŽIVĚ: Inovace a byznys aneb Jak má vypadat česká škola 21. století?",
"type": "article",
"language": "cs",
"category_token": "token_investment",
"api_url": "http://www.erstecorporatebanking.cz/api/v1/content/ECB_ARTICLE_13154"
},
"3": {
"id": "ECB_ARTICLE_12851",
"url": "http://www.erstecorporatebanking.cz/aktuality/sledovali-jsme-zive-nejvetsi-inovatori-v-ceskem-financnim-sektoru",
"creation_date": "2015-10-22 10:00:07",
"publish_date": "2015-10-22 15:30:00",
"title": "SLEDOVALI JSME ŽIVĚ: Největší inovátoři v českém finančním sektoru",
"type": "article",
"language": "cs",
"category_token": "token_investment",
"api_url": "http://www.erstecorporatebanking.cz/api/v1/content/ECB_ARTICLE_12851"
},
"4": {
"id": "ECB_ARTICLE_12805",
"url": "http://www.erstecorporatebanking.cz/aktuality/sobotka-barierou-rustu-hdp-by-mohl-byt-nedostatek-pracovni-sily",
"creation_date": "2015-10-20 12:30:07",
"publish_date": "2015-10-20 11:50:17",
"title": "Sobotka: Bariérou růstu HDP by mohl být nedostatek pracovní síly",
"type": "article",
"language": "cs",
"category_token": "token_investment",
"api_url": "http://www.erstecorporatebanking.cz/api/v1/content/ECB_ARTICLE_12805"
},
"5": {
"id": "ECB_ARTICLE_12239",
"url": "http://www.erstecorporatebanking.cz/aktuality/budoucnost-podnikani-a-jak-ji-prezit",
"creation_date": "2015-09-25 07:00:06",
"publish_date": "2015-09-25 07:00:00",
"title": "Budoucnost podnikání a jak ji přežít",
"type": "article",
"language": "cs",
"category_token": "token_investment",
"api_url": "http://www.erstecorporatebanking.cz/api/v1/content/ECB_ARTICLE_12239"
},
"6": {
"id": "ECB_ARTICLE_12034",
"url": "http://www.erstecorporatebanking.cz/aktuality/david-marek-deloitte-toto-je-jeden-z-duvodu-proc-ceska-ekonomika-zaostava-za-globalnimi-li",
"creation_date": "2015-09-16 00:30:05",
"publish_date": "2015-09-15 07:00:00",
"title": "David Marek (Deloitte): Toto je jeden z důvodů, proč česká ekonomika zaostává za globálními lídry",
"type": "article",
"language": "cs",
"category_token": "token_investment",
"api_url": "http://www.erstecorporatebanking.cz/api/v1/content/ECB_ARTICLE_12034"
},
"7": {
"id": "ECB_ARTICLE_9448",
"url": "http://www.erstecorporatebanking.cz/aktuality/nejsilnejsi-laser-na-svete-jako-blyskani-na-lepsi-casy-pro-celou-ceskou-ekonomiku",
"creation_date": "2015-06-05 07:00:05",
"publish_date": "2015-06-05 07:00:00",
"title": "Nejsilnější laser na světě jako blýskání na lepší časy pro celou českou ekonomiku?",
"type": "article",
"language": "cs",
"category_token": "token_investment",
"api_url": "http://www.erstecorporatebanking.cz/api/v1/content/ECB_ARTICLE_9448"
},
"8": {
"id": "ECB_ARTICLE_5939",
"url": "http://www.erstecorporatebanking.cz/aktuality/antonin-rusek-susquehanna-university-evropa-potrebuje-kapitalovou-unii-bez-ni-v-inovacich-",
"creation_date": "2015-01-15 08:00:07",
"publish_date": "2015-01-15 08:00:00",
"title": "Antonín Rusek (Susquehanna University): Evropa potřebuje kapitálovou unii, bez ní v inovacích USA dožene jen těžko",
"type": "article",
"language": "cs",
"category_token": "token_investment",
"api_url": "http://www.erstecorporatebanking.cz/api/v1/content/ECB_ARTICLE_5939"
},
"9": {
"id": "ECB_ARTICLE_5392",
"url": "http://www.erstecorporatebanking.cz/analyzy-a-komentare/inovace-v-evrope-jak-ktera-zeme-uspeje-ve-svetove-hospodarske-soutezi",
"creation_date": "2014-12-22 16:30:08",
"publish_date": "2014-12-22 16:30:00",
"title": "Inovace v Evropě: Jak která země uspěje ve světové hospodářské soutěži?",
"type": "article",
"language": "cs",
"category_token": "token_analysis",
"api_url": "http://www.erstecorporatebanking.cz/api/v1/content/ECB_ARTICLE_5392"
}
},
"total": 13,
"result": "success",
"api-url": "api/v1/content",
"nextPage": 5,
"status": "ok",
"messages": []
}

how to display for example all titles? record[0].title record[1].title ... record[9].title

via ng repeat?

Please append this update to the end of your original question, so that it does not get mixed with the answers.

Collectives™ on Stack Overflow

AngularJS - how to display values from API at the frontend

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related