AngularJS $http.get request not working as expected

Hi there, I'm currently facing an issue with retrieving data from a webpage for use on my own website.

I'm working with AngularJS and attempting to fetch data from . When checking my page in Chrome, I encountered the following error:

ReferenceError: $http is not defined

This is a snippet of my code:

<!DOCTYPE html> 
<html ng-app> 
    <head> 
        <meta charset="utf-8" />
        <title>AngularJS</title>
    </head> 
    <body> 
        <script src="angular.min.js"></script>
        <script>
            function LibraryController($scope) {
                var urlBase = 'http://irys.wi.pb.edu.pl/bibWS/books';
                $scope.books = $http.get(urlBase);
            } 
        </script>

        <div ng-controller="LibraryController">
            Title: <input type="text" ng-model="searchText" /><br />
            <ul>
                <li ng-repeat="book in books">
                <strong>{{book.title}}</strong> -
                <em>{{book.author_id}}</em></li>
            </ul>
        </div>

    </body>
</html>

Answer №1

In order to utilize the $http service, you need to include it in your controller

function BookController($scope, $http) 

Answer №2

One important step is to include $http in your controller:

function LibraryController($scope, $http)
...

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

Is there a way to prevent the parent template from also appearing on the child state? Seeking solutions for resolving this

I am currently using the Angular UI Router version 0.2.15. On my website, I have a page called /profile and now I want to implement an edit feature for the user's profile. When the user clicks on the edit button, I would like the URL to change to /pro ...

Load images sequentially in a slideshow gallery using JQuery, showing the next five pictures at a time instead of loading all at once

Recently, I've been developing a slideshow for educational materials and images. However, a concern was raised by a colleague regarding the loading time of slideshows with over 50 images. Is there a way to optimize the loading process by only displayi ...

What is the best way to iterate through an array containing multiple objects in order to create a graph?

My API response contains multiple objects organized in an array: [{"symbol":"AAPL","date":"2020-02-27","adj_close":68.24}, {"symbol":"TSLA","date":"2020-02-27","adj_close":133.8}, {"symbol":"TSLA","date":"2020-02-28","adj_close":122.3}, {"symbol":"AAPL" ...

Issue with cookies modification in Next.js 14 server actions

I'm currently facing a challenge while working on a Next.js 14 project where I am trying to make changes to cookies. Despite carefully following the Next.js documentation regarding server actions and cookie manipulation, I keep running into an error w ...

When validated, the Yup.date() function seamlessly converts a date into a string without including the timezone

Currently, I am integrating Yup with react-hook-form and have defined the following schema in Yup: const validationSchema = Yup.object({ installation: Yup.string().nullable().required("Required"), from_date: Yup.date() .max(new Date(), "Can ...

Facing an error response with the Javascript callout policy in Apigee. Any suggestions on fixing this issue?

This is the code snippet I'm using in my JavaScript callout policy var payload = JSON.parse(request.content); var headers = {'Content-Type' : 'application/json'}; var url = 'https://jsonplaceholder.typicode.com/posts'; va ...

Application Layer Capability

I am currently in the process of developing an App that requires authentication. To ensure that the user is authenticated before changing routes and instantiating the route Controller, I need to implement a function that can retrieve the logged-in user fro ...

Blockage preventing text entry in a textarea

To enhance the basic formatting capabilities of a textarea, I implemented a solution where a div overlay with the same monospace font and position is used. This approach allows for displaying the text in the div with different colors and boldness. However ...

Preventing Past Dates from Being Selected in JQuery Date Picker

Need help with a date picker that only allows selection of the 1st and 15th dates of each month. How can I prevent users from selecting previous dates? <link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" ty ...

Ways to transition into a developer role

I'm currently studying Javascript and Dynamic HTML as part of a course, and while I'm not encountering any errors or warnings in Firefox and Chrome, I believe there might be some issues with my code. If anyone would be willing to take a look and ...

Webstorm showcases files with similar content in a distinct manner

In Webstorm, everything is color-coded based on whether it is a function, object, etc. I am working with JavaScript. I have noticed that in two different files, the same line of code looks differently: var Comment = React.createClass({ In file 1: "var" ...

Guidelines for retrieving a class name using jQuery when hovering over a div

I need assistance in fetching the class name by hovering over a div. Both divs have the same id but slightly different class names. Here is an example: <div id="1-someid" class="1-example-class border cz"> ...more elements go here.... </div> ...

What is the best way to convert a 2D PHP array into a JavaScript array?

I have encountered a problem with a PHP array setup as follows: $output = array(array(1,1,1,1),array(2,2,2,2),array(3,3,3,3)); When I encoded the array to JSON, I received this output: $output = {"1":[1,1,1,1],"2":[2,2,2,2],"3":[3,3,3,3]} My goal is to ...

Unexpectedly, optimization causing issues on Angular site without explanation

Currently, I am utilizing Angular to construct a front-end website that searches for and showcases information obtained through API requests. Whenever I compile the project into a file bundle for static deployment using ng build, I notice that the resultin ...

Content in React Router may fail to load when refreshing the page, navigating forward, or manually

I recently started using React and I'm getting familiar with React Router. I divided my application into two main routes because each uses a different style: the Splash path is for when the user first enters, which contains the Splash screen, Login, a ...

Issue with navigation links on HTML website not functioning as expected

I would like the dropdown menu items to be clickable. For example: Menu item: Services Sub items: - branding } These already have working links - marketing } However, when I try to replace '#' with a link for Services, it d ...

Hide elements forever once the form is submitted

I'm seeking help to figure out how to make certain elements disappear after a form submission on my website's dashboard page. Specifically, I need to hide three elements once the user has submitted a form. Elements that need to be hidden: .vc_t ...

Exploring the dynamic duo of Django and DataTables: a guide on incorporating

Have you cautiously attempted to fetch data using AJAX, and displaying it in a datatable works seamlessly, but the issue arises when attempting to search or sort within the table. It seems that upon doing so, the data is lost, necessitating a page reload. ...

Instead of using onload, activate function upon click instead

Upon page load, I have a function that executes: function loadData(page){ showLoading(); $.ajax({ type: "GET", url: "load_data.php", data: "page="+page, success: function(msg) { ...

What is the best way to retrieve variables from child components within a parent component in React?

I'm currently diving into React by working on a form/calculator application. I've come to realize that React follows a unidirectional pattern, and I'm struggling with how to deal with it. My goal is to create a table where users can input i ...