Getting JSON data from an Angular JS controller can be achieved by utilizing the built-in

My user login function includes a method called logincheck, which takes in parameters and sends a request to the server. Upon success, it redirects the user to the dashboard with the member ID.

this.logincheck = function(log) {           
          var parameter ={
                    "mail" :log.mail,
                    "password" :log.passwords
                    }  
            alert(JSON.stringify(parameter));
            $http({
                url: '---------',
               -----------
            }).success(function(data,status) {
            if(data.status=="success")  {   
                var sessionid = data.member.member_id;
                $state.go('dashboardsnewsucc.dashboardefault', {userid: sessionid}); 
            }
            else{
                alert("Invalid Username or Password try again. !!!");
            }
            }); 
    };

In addition to the member ID, I also want the entire member data. To achieve this, the following controller and states are set up:

.state('dashboardsnew', {
            abstract: true,
            url: "/dashboardsnew",
            templateUrl: "views/common/content-empty.html",
        })

        .state('dashboardsnew.dashboardefault', {
            url: "/dashboardefault",
            templateUrl: "views/userdashboard.html",
            data: { pageTitle: 'Hive Dashboard',specialClass: 'loginscreen-gray-bg' },           
        })

The JSON data received from the web service after a successful login contains details about the member and society:

{
  "member": {
    "member_id": 51,
    "first_name": "Deepak",
    "last_name": "Verma",
    "phone": 6886438910,
    "password": "sushil",
    "role": [
      {
        "role_id": 2,
        "name": "Society Admin"
      }
    ],
    "associated": []
  },
  "society": {
    "society_id": 10,
    "society_name": "Green Velley"
  },
  "status": "success",
  "message": "member data details !"
}

To display the above JSON data on the login home page using AngularJS, the following code snippet can be used:

$http.get('http://192.168.1.7:8080/apartment//member/details/' + myParamtr).then(function(response) {
        $scope.myData = response.data.member;
}

Finally, in the front end, the member's username can be displayed by using the following syntax:

{{myData.user_name}} 

Answer №1

If you find yourself in a situation where you need to transfer data between states, I recommend utilizing an angular service for seamless communication: https://docs.angularjs.org/guide/services

You can establish a memberService, store the member information within the service, guide the user to the next state, and easily retrieve the member details from the service in your subsequent controller.

Answer №2

path : the path to your JSON file relative to your main index file.
 $http.get(path).success(function(result) { 
       $scope.data = result.people; // Data for people
       $scope.firstName = result.people.first_name; // First name of people
});

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

Create a curve using two distinct colors in JavaScript

I am currently experimenting with a canvas and I have a specific challenge in mind. My goal is to draw an arc using two different colors, where the first half of the arc will be green and the second half red. Check out the code snippet below: // CANVAS co ...

A Node.js middleware that logs a message just once

My nodejs express app serves a file that requires and loads css files, js files, etc. I have implemented a logging middleware that retrieves the client's IP address and logs it (after cross-checking with a JSON file containing malicious IPs). Due to t ...

Switching background images with Javascript through hovering

I am currently working on implementing a background changer feature from removed after edits into my personal blog, which is only stored on my local computer and not uploaded to the internet. However, I am unsure of what JavaScript code I need to achieve t ...

Creating an MP3 Text to Speech file with IBM Watson

I have been referring to the documentation for implementing the IBM Watson Text-to-Speech API using Node.JS. My goal is to generate output files in MP3 format. The documentation suggests modifying the base code, but I'm struggling with this. The resu ...

Exploring the Power of Ajax Integration with Mongodb

I have been trying to figure this out for a while now, but I'm lost. I am attempting to use Ajax to retrieve information from a collection named 'reizen' in MongoDB. My goal is to cycle through all elements within the collection and extract ...

Utilizing logic classes in conjunction with styled components

I am seeking a way to utilize this logic in order to assign the appropriate class to an element: <ul onClick={handleClick} className={click ? 'dropdown-menu clicked' : 'dropdown-menu'}> However, as I am employing styled component ...

Reducing Image Size in JavaScript Made Easy

I need help with a project where I want the image to shrink every time it's clicked until it disappears completely. I'm struggling to achieve this, can someone assist me? Here is the HTML code I have: <html lang="en" dir="l ...

Modifying the $scope within a controller

I need to update the $scope within the controller based on the object that is being clicked. The current code looks like this: var blogApp = angular.module('blogApp', ['ngSanitize', 'ngRoute']); blogApp.controller('blog ...

Connecting UserIDs with Embedded Documents in Mongoose

My goal is to connect individuals with each other by embedding a Match document in the user's matches array. This is my User Model: const mongoose = require('mongoose'); const Schema = mongoose.Schema; const Match = new Schema({ with: ...

The CORS Policy error message "The 'Access-Control-Allow-Origin' header is missing on the requested resource" in Next.js

Encountered an issue with CORS Policy error while attempting to redirect to a different domain outside of the project. For example, trying to navigate to https://www.google.com through a button click or before certain pages load. The redirection was handl ...

Why Changing the Width of a Flexbox Container Doesn't Impact Its Children?

Attempting to use TweenLite to animate the width of the blue sidebar down to zero, however facing an issue where the content breaks outside the parent's bounds. https://i.stack.imgur.com/4rEVr.png It is unusual for this to happen with Flexbox, given ...

Discovering the process of mapping transitions in MUI

I'm struggling with mapping my products in mui and placing each one in Grow. However, I keep getting this error message: "Warning: Failed prop type: Invalid prop children of type array supplied to ForwardRef(Grow), expect a single ReactElement". Can a ...

Enhancing AngularJS: Tailored iterations and data manipulations for more advanced grouping beyond basic ng-repeat limitations

Although I found the answer to this issue on Angular.js more complex conditional loops satisfactory and accepted it, I feel there is more to discuss. Let me provide further details that were not included in my initial inquiry. My goal is to transform the ...

exit out of React Dialog using a button

I have a scenario where I want to automatically open a dialog when the screen is visited, so I set the default state to true. To close the dialog, I created a custom button that, when clicked, should change the state to false. However, the dialog does no ...

"The power of Node JS in handling JSON data and gracefully

I'm having trouble extracting a specific part of a JSON object in Node JS. When I print the response body, the entire object is displayed correctly. However, when I try to access object.subsonic-response, it returns NaN. I've spent a lot of time ...

Struggling to display a collection of items in React

Below is the code snippet : import React, { Component } from 'react'; import axios from 'axios'; import _ from 'lodash'; import Loader from './Loader'; export default class Main extends Component { constructor(p ...

Expanding an array in JavaScript

I need assistance with... let a = ['a', 2, 3]; a += function(){return 'abc'}; console.log(a[3]); Therefore, I am looking for a shorthand method to push() in array with the above content. Does anyone know of an operator that can help ...

React TypeScript with ForwardRef feature is causing an error: Property 'ref' is not found in type 'IntrinsicAttributes'

After spending a considerable amount of time grappling with typings and forwardRefs in React and TypeScript, I am really hoping someone can help clarify things for me. I am currently working on a DataList component that consists of three main parts: A Co ...

Linking an intricate property in ExtJS to a text field

Here is an example of JSON data: { name: { firstname: 'First Name', lastname: 'Last Name' } } How do I go about loading this data into a form field in ExtJS? First Name: [ First Name ] Last Name: [ Last Name ] UPDATE: After imp ...

Enhance User Experience by Dynamically Updating Google Maps Markers with Custom Icons Using Django and JSON

Hey StackOverflow Community! I've been working on creating a web interface to showcase the communication statuses of different network elements. I'm almost done with the challenging part that I had been procrastinating. To add an awesome touch, ...