CODEWITHSUNDEEP
javascripthttpangularjsinstagram
user2562496
user2562496

Reputation: 1

Trying to use AngularJS + $http.get to access the Instagram API

Can anyone point out any errors? I'm new to basically all of this and I've just been using the angularJS tutorial, and the API and a few other resources to try and piece this all together with not much luck. Ignore the part about hashtag, it doesn't do anything yet. What the code SHOULD do is respond to input in the first input tag. Whatever is typed in there (nameQuery) is concatenated into the string used to access the API, and then I take that information and store it in $scope.userID, then I use the userID to get the userData and the list of images so that I can print them. It's not working though and I've been poring though it for a while and don't really have any leads. Hopefully you more experienced programmers can help me out!

HTML file:

<!doctype html>
<html ng-app>

    <head>
        <meta charset="utf-8" />
        <title>Insta-Visualizer</title>
        <link rel="stylesheet" type="text/css" href="style.css"/>
         <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
         <script src="script.js"></script>

    </head>

    <body ng-controller="ImageCtrl">

        <div id="wrapper">

            <div id="header">
            <span class="title">Instagram Visualizer</span>
            </div>

            <div id="body">

                <div class="border">

                    <div id="search1">
                        Username <input ng-model="nameQuery">
                    </div>

                    <div id="search2">
                        Hashtag <input ng-model="hashtagQuery">
                    </div>

                </div>

                <div class="border">
                    <ul class="images">
                        <li ng-repeat="picData in imageList">
                            <img ng-src="{{picData.images.low_resolution}}"/>
                        </li>
                    </ul>
                </div>

            </div>

        </div>
    </body>
</html>

script:

var token = '1502600.bcf60cd.2ddf423a61534720beafdae05c4cf26f';

function ImageCtrl($scope, $http){

    var searchURL = 'https://api.instagram.com/v1/users/search?q=' + nameQuery
               + '&access_token=' + token;

    $http.get(searchURL).success(function(data) {
        $scope.userID = data.data.id;
    });

    var userDataURL = 'https://api.instagram.com/v1/users/' + $scope.userID
                      + '/media/recent/?access_token=' + token;

    $http.get(userDataURL).success(function(data) {
        $scope.userData = data;
        $scope.imageList = $scope.userData.data;
    });            

};

Upvotes: 0

Views: 4333

Answers (2)

pasine
pasine

Reputation: 11543

Noticeable errors:

  1. nameQuery is not bound to the $scope.
  2. You are making two requests without having all the information you need.
  3. You are doing a cross-domain request without using jsonp method.

Did you read the tutorial about consuming REST services in AngularJS?

Upvotes: 2

James Morris
James Morris

Reputation: 27

I would recommend starting with something simpler such as the iTunes API. Here is a great, simple example/article on how to make asynchronous http requests with Angular JS that I came across on Hacker News.

Upvotes: 0

Related Questions