Tips for accessing id from $http.get in angular.js

Hello everyone, I'm new to Angular.js and currently learning it. I need help in retrieving data from the following API URL: . I am unsure how to implement this in my controller.js file. Below is the code I have so far, can someone please guide me on how to fetch the data of the business with id=36?

var reControllers = angular.module('reControllers',[]);
reControllers.controller('RecentController', ['$scope','$http' ,function($scope,$http){
    $http.get('http://ba.dev/businesses/businesses').success(function(data){
        $scope.business = data;
     }); 
}]);

reControllers.controller('PageController', ['$scope','$http', '$routeParams' ,function($scope,$http,$routeParams){
    $http.get('http://ba.dev/businesses/businesspage').success(function(data){
        $scope.student = data;
        $scope.whichItem = $routeParams.itemId; 
    }); 
}]);

Below is my app.js file

var myApp = angular.module('myApp',[
    'ngRoute',                                
    'reControllers'                   
]);

myApp.config(['$routeProvider', function($routeProvider){   
    $routeProvider.                      
        when('/main',{               
        templateUrl : 'partials/main.html',
        controller : 'RecentController'
    }).
    when('/page/:itemId',{
        templateUrl : 'partials/page.html',
        controller  : 'PageController'
    }).
    otherwise({                   
        redirectTo: '/main'   
    });
}]);     

Answer №1

Extract the ID from the URL by utilizing the $routeParams function.

$http.get('http://ba.dev/businesses/businesspage/' + $routeParams.itemId)

Next, incorporate server-side logic to retrieve the passed itemId from the URL. Execute necessary operations to fetch data from the database and send it back as a response.

Answer №2

It is suggested to utilize then over success as the latter is deprecated. Therefore, your code should look like this:

$http.get('http://ba.dev/businesses/businesses').then(function(data){
 $scope.business = data;
 }); }]);.....

The AngularJS documentation provides the following example for a simple GET request:

// Simple GET request example:
$http({
  method: 'GET',
  url: '/someUrl'
}).then(function successCallback(response) {
    // this callback will be called asynchronously
    // when the response is available
  }, function errorCallback(response) {
    // called asynchronously if an error occurs
    // or server returns response with an error status.
  });

For more information on route parameters, refer to: AngularJS $routeParams

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

Having trouble getting my Sequelize model to export properly

For my school project, I am developing an e-commerce website and encountering an issue with connecting my GoogleStrategy to my SQLite database. The goal is to store user data in a table, but whenever I try to call the variable in my passport-setup file, an ...

What is the best way to locate the closest points using their positions?

I have a cluster of orbs arranged in the following pattern: https://i.sstatic.net/9FhsQ.png Each orb is evenly spaced from one another. The code I am using for this setup is: geometry = new THREE.SphereGeometry(1.2); material = new THREE.MeshPhongMateri ...

Tips for incorporating material-ui icons into the column component of a data-grid component

I am currently working with the material-ui data-grid and I would like to display Edit icons from material-ui next to each row. Unfortunately, the data-grid does not provide any props specifically for this purpose. Below is the code snippet: import React ...

Enhancing nested mongoose arrays by a particular value for updates

In my mongoose schema, I have an array that contains items and another array. var mongoose = require('mongoose'); var Schema = mongoose.Schema; var CompanySchema = new Schema({ dateCreated: { type: Date, default: Date.now }, ownerId: { typ ...

Intersecting realms document

Currently I am working on a web store using Magento Go. Unfortunately, this platform does not support server side scripting languages such as PHP. Despite this limitation, I still need to save order data post successful checkout and share it with my shippi ...

The undead browser refuses to display a window upon attempting to open using the open function

tools first attempt Darwin 14.3.0 Darwin Kernel Version 14.3.0 io.js v1.8.1 zombie Version 4.0.7 released on April 10, 2015 second attempt Linux ubuntuG5 3.13.0-48-powerpc64-smp node.js v0.10.38 zombie Version 3.1.0 released on March 15, 2015 comman ...

Having trouble bypassing custom points on the reactive gauge speedometer

My current project involves utilizing the npm package react-d3-speedometer to create a custom points-based gauge. The issue I am facing is that while the package works properly with values from 0 to 1000 when passed to the customSegmentValues property, it ...

Animating slides with CSS Keyframes and React, incorporating toggle slide fade out and slide fade (back) in

I am seeking a solution for toggling a box (div) with slide-out animation and then sliding back in animation (in reverse) upon button press. My requirement is to have no animations during the initial page render. While I can successfully slide the box to ...

"Implementing a select value in React.js using option values and mapping through iterations, with the

Currently, I am working on a React application where I encountered an issue with the map method during iteration. I have a select box that needs to be filled with numbers ranging from 0 to a specified value. My expected output should be [{label:0,value:0 ...

Error: JSON key data not present in rendering

Here is a JSON string I am working with: {"{\"nodeName\":\"abc\"}":[{"url":"abc","status":true},{"url":"abc","status":true}]," {\"nodeName\":\"pqr\"}":[{"url":"abc","status":true},{"url":"abc","status":true}]} ...

Is there a way for me to gain access to the ng-repeat scope?

I have a scenario where my ng-repeat generates different elements and I need to perform certain operations, such as creating variables, within the scope of the ng-repeat. Is there a way to access the specific ng-repeat scope? How can I achieve something ...

HtmlWebpackPlugin can cause issues with loading relative path files on websites that are not located in the root directory

I have set up webpack and the HtmlWebpackPlugin to automatically include bundled js and css files in an html template. new HtmlWebpackPlugin({ template: 'client/index.tpl.html', inject: 'body', filename: 'index.html' ...

Retrieve data from an array of JSON objects within a JSON object using ReactJS

Trying to extract data from JSON like this: { "id": 371, "city": "London", "name": "London Station", "trains": [ { "id": 375, "number": "1023", "numberOfCarriages": "21" } ] } Interes ...

In NextJs version 13, you can access parameters from the URL directly within the layout.js file

With the introduction of server components in Next.js 13, accessing parameters from the URL has become seamless. Let's look at an example: app/shop/[tag]/[item]/layout.js /shop/1/2 { tag: '1', item: '2' } When accessing page ...

Issue with Bootstrap 4 Navbar collapsing and not expanding again

Help needed! My navigation bar collapses when the window is resized, but clicking on the hamburger icon does not open it back up. I have included my code below. Can someone please provide guidance on how to expand the collapsed navbar? <html lang=&quo ...

HTML anchor tag failing to redirect to specified link

I need to populate the URI property from an API result into an HTML format. I attempted to achieve this by calling a function and running a loop 3 times in order to display 3 links with the URI property of each object. However, the code is not functioning ...

Toggle the Material UI checkbox based on the value received from an object input

I am facing an issue with an unchecked checkbox in my project. I am attempting to update its value based on data retrieved from an object. The object contains boolean values from an SQL query, either 'T' for true or 'F' for false. My in ...

Struggling with serving static content on NodeJS using Express.js

I set up a basic NodeJS and Express server on my development machine running Windows 10. var express = require('express'); var app = express(); app.use(express.static('app')); app.use('/bower_components', express.static(&apo ...

Verify if there is a cookie available; then execute the load() function. If the cookie matches, it is necessary to

$(document).ready(function() { var hrefs = { "en": ["includes/test1.html", "includes/test2.html"], "es": ["includes/test3.html", "includes/test4.html"] } $(function() { var cookie = Cookies.get('langCookie'); if (cookie) { ...

Enhance the size of dynamically generated svg elements by scrolling the mouse wheel in and out

In my ASP.NET application, I have a view page where SVG elements are dynamically generated. Now, I want to implement zoom functionality for all the created SVG elements. Zooming in should occur when scrolling up and zooming out when scrolling down. <sv ...