bring in the angular JSON object

In my angular 1.x controller, I have a defined object as follows:

notificationTypes: [ { NotificationType: '*', NotificationTitle: 'All notifications' },
                     { NotificationType: '0', NotificationLabel: 'System Alert', NotificationTitle: 'System alerts' },
                     { NotificationType: '1', NotificationLabel: 'Pending Task', NotificationTitle: 'Pending tasks' },
                     { NotificationType: '2', NotificationLabel: 'Update', NotificationTitle: 'Updates' },
                     { NotificationType: '3', NotificationLabel: 'Missed Message', NotificationTitle: 'Missed messages' }
                    ],

This object is currently used to populate various lists on one page. Now, the need has arisen to reuse it on other pages as well. Rather than duplicating this object for each page, I am looking to refactor it so that both controllers can utilize the same list for easier maintenance. I have attempted to declare it within the 'MainApp' module as a constant, factory, and/or directive without success. Can you provide any guidance or insight into what I may be overlooking?

Answer №1

One effective solution for this issue is to utilize a factory. By storing data in factories and services, the information can persist even when transitioning between pages.

angular.module('App', [...])

.factory('NotificationFactory', function () {
    var notificationTypes: [ { NotificationType: '*', NotificationTitle: 'All notifications' },
                 { NotificationType: '0', NotificationLabel: 'System Alert', NotificationTitle: 'System alerts' },
                 { NotificationType: '1', NotificationLabel: 'Pending Task', NotificationTitle: 'Pending tasks' },
                 { NotificationType: '2', NotificationLabel: 'Update', NotificationTitle: 'Updates' },
                 { NotificationType: '3', NotificationLabel: 'Missed Message', NotificationTitle: 'Missed messages' }
                ];

    return notificationTypes;
})

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

When using Angular's ng-repeat with a JSON data source retrieved through $http AJAX, the resulting list

My goal is to showcase a list of elements by name and id using ng-repeat from a JSON file with a very basic AJAX request. var form = $("#loadAllServiceEngineForm"); var url = form.attr("action"); var App = angular.module('AdamApp', ...

Exploring Google with Angular.js

When designing my website, I incorporated Angular in a specific section rather than the entire site. However, I have learned that Google encounters difficulties when indexing Angular content. To ensure optimum visibility for both search engines and users ...

A guide on activating dropdown buttons individually using AngularJS (Cascading dropdowns)

When it comes to cascading dropdowns (for example: with 3 dropdowns), the challenge is to disable the 2nd and 3rd dropdown initially. Only when a user selects an option in the 1st dropdown, should the 2nd dropdown be enabled. Similarly, once an option is s ...

Refresh the image following the ajax request

I seem to be encountering some difficulties. Whenever I click to rotate an image using ajax and save the new image, it does so without refreshing the page. However, the issue arises when the old image is not updated with the new one that is refreshed. Fu ...

Are there any drawbacks to encapsulating socket.io within a callback function within an AngularJs Service?

I have developed a service in angular.js that allows me to incorporate socket.io into my controllers as if it were a callback function. The emitter and listener are contained within the same function in my service, which I then utilize in my controllers li ...

Adjusting the slide display in angular-slick based on the window's width automatically

I am new to working with Angular and I'm trying to create a responsive slideshow using angular-slick. Here is an example of my code: <slick infinite="true" slides-to-show="4" slides-to-scroll="1" prev-arrow=".slick-prev" next-arrow=".slick-next"&g ...

The function CKEDITOR.replace() is not defined

I'm currently utilizing backbone-forms and I am looking to swap out my textArea with CKEDITOR. However, when I try to implement the code, I keep encountering an error message: Uncaught TypeError: undefined is not a function (for CKEDITOR line) defin ...

Sign up with identical username and email on WordPress

I'm currently facing a challenge with implementing http://jsfiddle.net/67BUG/2/ in wordpress registration, but I have experimented with various approaches without success. Within the wp-login.php file, you can find the code here - http://pastebin.com ...

Employing the forEach method on an array to search for a specific string and subsequently retrieve a function

I'm currently working on implementing a discount code system using AngularJS. I've defined a function called $scope.pricetotal that represents a specific value, an input field to capture a string, and an array. Here's the main objective: I w ...

Exploring the interactive doughnut graph using SVG and Vue.js

Looking to create a unique dynamic donut chart using SVG and Vue. I want it to mirror the exact SVG format found on this webpage: (To see the animated chart, select a dish and click on ingredients) This might not have been the best approach, but it was ...

The console is throwing an error: ReferenceError: The variable $ has not been defined

I am having issues when trying to dynamically add a div upon selecting a checkbox in a Django template. The error message Uncaught ReferenceError: $ is not defined keeps appearing in the console. Here is the template code: {% extends 'base_layout.htm ...

What is causing the delay in making ajax calls with a specified timing?

I have a problem with calling an action on a controller using Ajax in my MVC5 application. I need to make the call 10 times with a 2-second delay between each call. Here is the code snippet that I've implemented: $(document).ready(function () { ...

The Angular package functions correctly when tested locally, but encounters issues after deployment

In my Angular application, I have incorporated the ng2-jalali-date-picker and jalali-moment. While the date picker functions properly on my local machine, after building and deploying the application to a server using the command: ng build --prod, I encou ...

Choose a specific "field" from a Firebase array

I am currently working on a project using AngularJS and Firebase, and everything seems to be functioning well. https://i.sstatic.net/ojy2Z.png However, I am facing a challenge of extracting only temperature values into one array and humidity values into ...

Issue with Angular ui-select causing repeated $http requests in ui-select-choices

I'm currently working on integrating ui-select into my project, and this time I need to pass a controller function as options to ui-select-choices. Here's how it's set up: HTML: <ui-select ng-model="selectedItem" theme="selectize" ng-di ...

Creating interactive form fields using React

How can I update nested fields in react forms? First, create a new item using handleAddShareholder. Next, delete an existing item with handleRemoveShareholder. To change details of an item, use handleShareholderNameChange. You can then add a new array ...

Tips for transferring information between two distinct ports within a single application

I have been utilizing the expressjs library for my project. It functions as a server on localhost:8000 and I am displaying static pages through it. However, my application operates on localhost:4200. Despite attempting to share the same cookie or localSt ...

Locate a specific text within a complex array of objects and retrieve the objects that contain the match as

I have an array of objects named input as shown below. Each object in the array contains a property vertical of type string, an array called platformList, and a nested object named radar_metadata. I am looking to implement a search functionality where I c ...

How can conditional types be implemented with React Select?

I am working on enhancing a wrapper for React-select by adding the capability to select multiple options My onChange prop is defined as: onChange: ( newValue: SingleValue<Option>, actionMeta: ActionMeta<Option>, ) => void Howev ...

Leverage the function's argument to serve as the key and

Presented is a function that accepts key, value, and callback as arguments. The function has been designed with the principles of DRY (Don't Repeat Yourself) in mind. Its main purpose is to perform a lookup to an Elasticsearch endpoint using the key/v ...