What is the best way to retrieve a unique identifier from multiple arrays and store it in one shared variable?

I have an array stored locally and I need to retrieve the "name" ID from all of them. How can I achieve this using AngularJS or JavaScript?

[{"email":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="85cfeaedebc5e4abe6eae8">[email protected]</a>","pass":"Doe","name":"John" },
{"email":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0d4c63636c4d6c236e6260">[email protected]</a>","pass":"Smith","name":"Smith"},
{"email":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="80d0e5f4e5f2c0e1aee3efed">[email protected]</a>","pass":"Jones","name":"Jones"}]


 var app = angular.module('app',['ngStorage']);
        app.controller('ctrl',function($scope){

            $scope.complete=function(){
                debugger
                localStorage["data"] = localStorage.getItem('person');
                $scope.obj = JSON.parse(localStorage["data"]);
                console.log($scope.obj['0'].name);
                $( "#tags" ).autocomplete({
                    source:  $scope.obj['0'].name
                });
            }
        });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

javascriptarraysangularjsmultidimensional-arraylocal-storage

Answer №1

This solution does not pertain specifically to Angular. Instead, you can utilize Array.prototype.map:

var data = [{"email":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5d173235331d3c733e3230">[email protected]</a>","pass":"Doe","name":"John" },
{"email":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="beffd0d0dffedf90ddd1d3">[email protected]</a>","pass":"Smith","name":"Smith"},
{"email":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="03536677667143622d606c6e">[email protected]</a>","pass":"Jones","name":"Jones"}];

var names = data.map(function(user) {
    return user.name;
});

document.write(JSON.stringify(names, null, 4))

However, for a more Angular-friendly approach, it's advisable to steer clear of using $( "#tags" ).autocomplete directly in the controller. Instead, consider creating a custom directive specifically for handling DOM manipulation tasks like this. Keeping controllers clean and focused on business logic is best practice.

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

Looking to organize data based on duplicate values within an array using Javascript in the Vue framework

Can anyone provide assistance? Data = [{"name":A,"val":20}, {"name":B,"val":7}, {"name":C,"val":20}, {"name":D,"val":8}, {"name":E,"val":5}] SortedValue ...

javascriptvue.js

Using Javascript arrays to assign values to a Json object in CanvasXpress

I'm seeking advice on the best source for assistance with CanvasXpress. I haven't found any relevant threads in the forum yet. Currently, I'm using CanvasXpress to showcase dynamic data and I know that it accepts json objects. My issue arise ...

javascriptjson

What sets apart express.Router() from using multiple express() objects?

When utilizing the latest express 4 router, it becomes possible to organize various route paths into separate files like the following example: // Inside cars.js const router = express.Router(); router.get('/brands', function(req, res) { ... } ...

javascriptnode.jsexpress

Switch the URL to render the view using Express 4

I am facing an issue with a post request where the views are rendering to /link/123 instead of /anotherlink. Although I could use res.redirect('/anotherlink'), I need to render different data. app.post('/link/:id',function (req, res, n ...

javascriptnode.jsexpress

Observing exceptional inquiries

Can I check what requests Protractor is waiting for? I'm working on fixing inconsistent state testing, but it's difficult to determine if a button didn't initiate a response or if Protractor simply didn't wait. In short: How do I see t ...

javascriptangularjsseleniumprotractore2e-testing

What is the best way to transfer JSON data from one file to another file in JSON format?

A unique json file is at my disposal, revealing an intriguing look: *{ "_id": "5f70aa5c04d7a034fc19e8969b000599", "contributors": null, "coordinates": null, "created_at": "Wed May 06 09:32:46 +0000 2020", ...

arraysnode.jsjson

"Can you tell me the method for obtaining an array within an Angular

Within the realm of PHP, there exist certain elements within an array: $this->data['messages']['ms'][] = 'Line1'; $this->data['messages']['ms'][] = 'Line2'; along with a method that return ...

javascriptphpangularjs

Encountering an issue with gulp and grunt concatenation in an Angular project

I've encountered an issue while trying to concatenate files. This problem occurs whether I'm using Grunt, Gulp, or the "Bundler and Minifier Extension" for Visual Studio. Unfortunately, I'm clueless as to what might be causing this problem. ...

angularjsgrunt-contrib-concatgulp-concat

Developing a RESTful API with Discord.js integrated into Express

Currently, I am faced with the challenge of integrating the Discord.js library into an Express RESTful API. The main issue at hand is how to effectively share the client instance between multiple controllers. The asynchronous initialization process complic ...

javascriptnode.jsrestexpressdiscord.js

Problems arise when a controller within an ng-repeat needs to pass data to another controller, based on the specific ng-repeat element that was clicked

My goal is to achieve the following: I am working with two controllers that communicate with each other through a service (Check out my code on jsFiddle: http://jsfiddle.net/GeorgiAngelov/a9WLr/1/). The concept: The concept here is to have changes made ...

angularjsangularjs-ng-repeatangularjs-service

Adding additional rows to an Array Object in JavaScript based on a certain condition

I am faced with a scenario where I have an array object structured as follows [ { id: 123, startdate: '2022-06-05', enddate: '2023-04-05' },{ id: 123, startdate: '2021-06-05', enddate: '2021-04-05' } ] The task at h ...

javascriptarraysobject

Differentiating Between Arrays and Objects in AngularJS ng-repeat

When using ng-repeat to display data in a View from an endpoint in the form of an atom feed, I encountered an issue. The endpoint returns JSON if the Accept header is 'application/json', but when there is only one entry in the atom response, the ...

angularjsarraysangularjs-ng-repeatjson

Searching for subarrays within subarrays in MongoDB queries

Looking to extract a specific unitHouse sub array from my document which is nested within another sub array. Here is the data: { "_id" : ObjectId("5a17d305c438324308bffb19"), "floorRow" : [ { "floorRowNo" : "F1", "floorRowInfo" : "B ...

arraysnode.jsmongodb

Locating the highest even and odd numbers within an array

My goal is to determine the maximum even and odd values within a given array. For example, I want the console to display that the maximum even value is 8 and the maximum odd value is 11. I had to revise this question due to the cooldown period for asking ...

javaarrays

Issues with Content-Security-Policy Implementation in Next JS and AMP Technology

While developing an AMP application with Next JS, everything seems to work perfectly in localhost. However, upon moving to the production environment, I encountered errors related to AMP not being allowed to load its workers. The initial error message is: ...

javascriptnext.jsamp-htmlcontent-security-policy

What is the best approach for encoding text inputs automatically?

In order to prevent my application from crashing due to the error "A potentially dangerous Request.Form value was detected...", I initially disabled page validation. However, I am now reassessing this approach and aiming to resolve it properly. Is there a ...

c#javascript.netasp.net.net-3.5

After the build process, Nextjs Sitemap is eliminating the /en/ from all newly generated web links

Utilizing Strapi to pull data in JSON format. For instance, a typical website link appears as follows: https:/ /www.some-site.com/some-link What happens to the links once the post build is completed on my Nextjs project: <url><loc>https://web ...

javascriptreactjsnext.jssitemapstrapi

Adding data into an array without specifying the position

I am currently working on extracting the value E from various .out files and plotting these values against theta and r in a 3D surface plot. The theta and r values are part of the file names, structured as follows: H2O.r{}theta{}.out, where r is denoted by ...

pythonarraysnumpy

javascript for accessing JSON data both forwards and backwards

I am attempting to implement Next/Previous buttons for a json array, but I am encountering difficulties in making it work. Here is my latest attempt: <div id="text"></div> <button name="prev">go to previous div</button> <but ...

javascriptjqueryarraysjson

Discover the name of a color using its HEX code or RGB values

Is there a way to retrieve the color name from RBG or HEX code using JavaScript or JQuery? Take for instance: Color Name RGB black #000000 white #FFFFFF red #FF0000 green #008000 ...

javascriptjquerycsscolors