How to retrieve the present value from an array using AngularJS

Struggling to assign the current user from my list

Here is my array after submitting the form

[{"name":"Erich","surname":"Josh","email":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="096c67497a7a276a6664">[email protected]</a>","age":"22","tel":"32423432432"}]

Function for setting the current user

$scope.currentUser = null;

    $scope.setCurrentUser = function(name) {
        $scope.currentUser = $scope.users[name];
    };

I am trying to click on a name and then display all information about that user, but I am having trouble selecting the current user.

What mistake am I making?

javascriptangularjs

Answer №1

The outcome of the action you are performing is 

$scope.currentUser = $scope.users[name];

It will result in 

$scope.currentUser = "Erich";

This is because you are retrieving the value associated with the key (name in this case)

To address this, start by initializing an array of users

var users = [{"name":"Erich","surname":"Josh","email":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="adc8c3eddede83cec2c0">[email protected]</a>","age":"22","tel":"32423432432"},{"name":"Another","surname":"Josh","email":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4b2e250b383865282426">[email protected]</a>","age":"22","tel":"32423432432"}];

Next, redefine the setCurrentUser function

$scope.setCurrentUser = function(name) {
  for(var i = 0; i < users.length; i++)
    if(users[i].name == name){
      $scope.currentUser = users[i];
      break;
    } 
}

Now the $scope.currentUser contains all relevant information

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

How can we transmit a list of data from an AngularJS application to a web service

Currently, I am developing an app in the Ionic 1 platform using AngularJS. I am facing a challenge where I need to pass a list of objects to a web service. Can someone guide me on how to achieve this? I attempted to do it but was unsuccessful in sending a ...

angularjsweb-servicesionic-frameworkcross-platform

Tips for managing modal states in functional React components in React Native using React hooks

Utilizing React hooks to manage modal opening and closing, I encountered an issue with my code. The function 'handleAddClick' is supposed to open the modal when used on TouchableOpacity, while the function 'handleClose' should close the ...

javascriptreactjsreact-nativereact-hooks

What are the security benefits of using Res.cookie compared to document.cookie?

When it comes to setting cookies to save data of signed in members, I faced a dilemma between two options. On one hand, there's res.cookie which utilizes the Express framework to set/read cookies on the server-side. On the other hand, there's d ...

javascriptnode.jssecurityexpresscookies

Is there a way to get Axios to display CSS on the page?

While working on a Web Viewer project with axios for web scraping practice, I encountered an issue where the CSS wasn't loading properly. Here is the code snippet I used: console.log("Tribble-Webviewer is starting!") const express = requir ...

javascriptcssexpressaxios

"Implementing conditional rendering to hide the Footer component on specific pages in a React application

Is there a way to conceal the footer component on specific pages? app.js <div className="App"> <Header setShowMenu={setShowMenu} /> {showMenu ? <Menu navigateTo={navigateTo} setShowMenu={setShowMenu} /> : null} <Main na ...

javascriptreactjsreact-hooksreact-routercomponents

Step-by-step guide on inserting a variable into .doc() to create a new table

Recently, I created a SignIn page that uses variables to store data fetched with document.getElementByClassName. Now, I am facing an issue while trying to create a new document on Firebase using the person's name stored in a variable. Struggling with ...

javascriptnode.jsfirebasegoogle-cloud-firestore

What is the best approach to gather both the intersection and the complements of two arrays in a single operation?

Comparing Arrays - const source = [1, 1, 1, 3, 4]; const target = [1, 2, 4, 5, 6]; Initializing Arrays - const matches1 = []; const matches2 = []; const unmatches1 = []; Array Matching Process - for (const line of source) { const line2Match = target.fi ...

javascriptarraysintersectionarray-differencecomplement

Utilizing a dynamically created Stripe checkout button

Currently, I am attempting to integrate a checkout button from the Stripe Dashboard into my VueJS Project. I have a feeling that I might not be approaching this in the correct manner, so if you have any advice, I would greatly appreciate it. In order to ...

javascriptvue.jsstripe-paymentswebstormclient-side

`Generating an ever-changing masonry layout on a website using live data`

I'm currently working on a new web project and I want to incorporate a masonry view for the images on the homepage. The plan is to host this project on Azure, using blob storage for all the images. My idea is to organize the images for the masonry vi ...

javascripthtmlcss

Using jQuery to save PHP form output into an Excel spreadsheet

I have a PHP-enabled form on my website for collecting Address details. Currently, the output is sent to my email inbox. However, I would like the output data to be saved in an external Excel file named "address.xls" using jQuery/JSON. The input fields of ...

javascriptjqueryjson

Complex React context information stored in sessionStorage

Within my React app, I am currently utilizing a context object to store user information. export const SessionContext = createContext(null); export const SessionContextProvider = ({ children }) => { console.debug("RTS Break SessionContextProvide ...

javascriptreactjsreact-contextsession-storage

The second asynchronous function relies on the completion of the first

Despite dedicating two days to exploring async/await and promises, I am still unable to make it work correctly. The challenge lies in the fact that the second await for b relies on the result of the first a. It seems no matter what approach I take, b keep ...

javascriptnode.js

What is causing the CSS transition to fail in the updated DOM?

When attempting to apply a CSS transition as shown in the following code snippet: https://jsfiddle.net/sunyuu/e58sfeva/17/ var Main = { data () { return { isActive: false, childStyle: {} }; }, methods: { sho ...

javascripthtmlcssvue.js

Sharing server object in expressJS with another file through module.exports

As I work on my expressJS app, I encountered a situation where I needed to share the server object with another file. To achieve this, I decided to create the server in my app.js file and then expose it to one of my routes. var server = http.createServer( ...

javascriptexpressrequire

Seeking assistance with producing results

Is there someone who can provide an answer? What will be the output of the code snippet below when logged to the console and why? (function(){ var a = b = 3; })(); console.log("Is 'a' defined? " + (typeof a !== 'u ...

javascripttypescript

Why won't the button's color change when I try clicking on it?

I am currently learning vue and facing some challenges. The code I have is supposed to change the button color when clicked, but it's not working as expected. Any advice on how to fix this issue would be greatly appreciated. Thank you! let app = ...

javascriptvue.js

Issue with Node/Express: Middleware addition to router does not function as expected

Here is the configuration of my router: app.get('/getReport', (req, res) => { res.send("This is the report"); }); Initially, this router functions properly and successfully displays the message This is the report in the browser However, ...

javascriptnode.jsecmascript-6

Which shortcuts or techniques in jQuery/JavaScript can I implement to simplify this code further?

I've written a script to handle responsive design for smaller devices and display a toggle menu instead of a full-width menu. The current script works, but I find it messy. How can I make this code more minimalistic and efficient? Is it good practice ...

javascriptjquerycssjquery-events

Combining Flask with Ajax: AttributeError - WSGIRequestHandler does not have the attribute 'environ'

Currently, I am working on using ajax to trigger the execution of a Python file that continuously monitors changes in a text file. If any changes are detected, it will communicate back to ajax for further actions. The Python script must start running as so ...

javascriptjqueryajaxpython-2.7flask

Guide to changing the border color in a Material-UI TextField component styled with an outline design

To complete the task, utilize the Material UI outlined input field (TextField component from "@material-ui/core": "^4.12.2",) and apply a custom blue color style to it. Here is the outcome of my work: Current theme override for InputL ...

javascriptcssreactjsmaterial-ui