Angular movie database using an API from an apiary

I'm struggling to create a link on movie posters that will lead to detailed movie information based on the movie ID. I have been going through their documentation, but I can't seem to get the api configuration to function properly. Every time I try, I keep seeing a 404 error in the console log.

Here is how I am attempting to call the API to generate image URLs. Can anyone provide insight into how to correct this portion?

(function() {
  'use strict';

  angular
    .module('app.core')
    .factory('posterService', posterService)

  posterService.$inject = ['$q', '$http'];

  function posterService($q, $http) {

    var service = {
      getPoster: _getPoster,
    };

    return service;

    function _getPoster(id) {
      var params = {
              id: id,
              key: 'xxx'
          }

      return $http({
        method: 'GET',
        url: 'https://api.themoviedb.org/3/movie/' + id + '/images/api_key=' + key,
      });
    }

  }

})();

Answer №1

Ensure that the API key is not included in the route but passed as a query string instead. Remember to access your ID and key from the params object using params.id and params.key.

(function() {
  'use strict';

  angular
    .module('app.core')
    .factory('posterService', posterService)

  posterService.$inject = ['$q', '$http'];

  function posterService($q, $http) {

    var service = {
      getPoster: _getPoster,
    };

    return service;

    function _getPoster(id) {
      var params = {
              id: id,
              key: 'xxx'
          }

      return $http({
        method: 'GET',
        url: 'https://api.themoviedb.org/3/movie/' + params.id + '/images?api_key=' + params.key,
      });
    }

  }

})();

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Master the art of utilizing angular-filter

Encountering some challenges while attempting to utilize angular-filter: The following links have been imported into the HTML file: <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script> <script src=" ...

What is the best way to retrieve text from the p tag and input it into the text field?

Looking to resolve a situation where two identical IDs exist and need to implement some JQuery. The objective is for the input value to automatically update itself based on changes in the text of the p tag. $(document).ready(function(){ ...

"Exclusive Mui sx styles will be applied only when a specific breakpoint

As I update my old mui styling to utilize the sx attribute, I've noticed the ability to specify styles for different breakpoints using sx = {{ someCssProp: { xs: ..., md: ... and so on. Prior to this, I had been using theme.breakpoints.only for some ...

Is each individual character displayed on the web page twice when using a controlled component?

Currently, I am diving into the extensive React documentation. A particular section caught my attention - controlled components. It delves into how form elements, such as an <input>, manage their own internal state. The recommendation is to utilize c ...

I am trying to set up an AJAX call in my index.html to connect to a React endpoint, but instead of accessing the intended page, I am getting

I am attempting to execute an AJAX call in my static file index.html to a React endpoint, but instead of the desired response, I am seeing the React homepage. Here is the code snippet from my index.html: <div id="data"></div> <scr ...

discovering a new type of mutation through the use of Vuex

Vue Component computed: { score () { this.$store.commit('fetchCoordinates'); console.log(this.$store.getters.cordinate); } } store.js export default { state: { lat:'ok', }, getters:{ cordinate(state){ r ...

Can a single file in NextJS 13 contain both client and server components?

I have a component in one of my page.tsx files in my NextJS 13 app that can be almost fully rendered on the server. The only client interactivity required is a button that calls useRouter.pop() when clicked. It seems like I have to create a new file with ...

Comparing Angular 2 Components and AngularJS Directives: What Sets

Are there any parallels or distinctions between an angular2 component and an AngularJS directive? It seems that these two share similar functionalities in the angular2 component and AngularJS directive. Additionally, angular2 also incorporates a directive ...

IE10 has a problem with the height being set to 100%, but it seems to work fine in Quirks mode in IE and all

Check out this page for reference: I've noticed an issue with scrolling in Internet Explorer, while other browsers seem to be fine. Can you help me understand why IE is causing the scroll and how I can fix it? Thank you, Judson Here's the cod ...

Event listener for clicking on a custom overlay in Google Maps

Incorporating Google Maps into an Ionic project, I have successfully added a custom overlay to display the address of a marker location on top of the map. By adding a click event listener to the map, I can detect clicks and update the marker for new locat ...

Integrate Form.io with a SQL Server database

I'm looking for guidance on connecting SQL Server data with form.io. I've already created a basic form in the form.io application and embedded it into my project. Now, I'd like to store the submitted data in an SQL Server database. Any assis ...

A combination of Tor Browser, Selenium, and Javascript for

I have been attempting to use selenium with Tor, but unfortunately it is not functioning correctly. I have come across a library that allows for this functionality, however, it appears to only work with Python. Is there a way to accomplish this using Jav ...

AngularJS document object model selector

My custom directives use jQuery for animation effects because I find angular's built-in ngShow/ngHide to be functional but not visually appealing. I vaguely remember reading in the documentation that Angular has its own DOM selector, something like an ...

Obtain the value of the dropped item in AngularJS FullCalendar drag and drop feature

I'm integrating an external object into angular-ui-calendar using angular-dragdrop. The external object is sourced from this list: <div class="fc-event" data-drag="true" jqyoui-draggable="{animate:true}" ng-model="test_object" ng-r ...

Utilize $resource to send information through a POST request

DEMO: http://jsfiddle.net/rob_balfre/7QUUf/ What is the best way to send POST data (across domains) using $resource in AngularJS? An example of successfully writing to the API using curl: curl --dump-header - -H "Content-Type: application/json" -X POST ...

What is the best way to make an HTML table with a static header and a scrollable body?

Is there a way to keep the table header fixed while allowing the table body to scroll in an HTML table? Any advice on how to achieve this would be greatly appreciated. Thanks in advance! ...

How can I navigate through a webpage using Selenium WebDriver and JavaScript?

Currently, I am utilizing the JavaScript API for selenium-webdriver and my goal is to scroll/move down a page in a gradual manner to facilitate visual inspection. Although I am aware that the code below will direct me immediately to a link at the end of t ...

I am encountering an error when trying to implement ui-grid in my Angular JS project

let application = angular.module("financeApp", ["ui.grid"]); application.controller( "financeController", function($scope, $http) { $http.get("url", "data") .then(function(response) { $scope.resultData = response.data; }, funct ...

Sending post parameters from Angular and receiving JSON data from PHP using $http

Exploring the world of Angular and delving into the realm of $http, I find myself faced with a perplexing challenge: How to post parameters using $http (necessary for PHP to execute the call) Retrieve a JSON response from that call Here's what I&ap ...

Error: Unable to establish connection with local host (::1) on port 50106

I am currently in the process of developing a Discord bot using Node.js and erela.js. However, I encountered an error when attempting to retrieve the server that handles erela: A node error occurred: connect ECONNREFUSED ::1:50106 2020-05-01T21:23:19.367 ...