Adding information to JSON array in AngularJS

I've encountered a challenging scenario where I need to transfer data from one controller to another.

My application functions in the following way:

View 1 -> retrieves users from a JSON array and displays them in a table.

Upon clicking "add user" in View 1, I am directed to View 2.

View 2 -> consists of 2 input fields and a button (for adding a new user).

However, when I return to View 1, the newly added user does not appear as expected.

To simplify things, I have provided a demonstration here - http://plnkr.co/edit/yz6mpplZGh4q5bPDO2bc?p=preview

Any assistance would be greatly appreciated.

javascriptjsonangularjs

Answer №1

Make sure to avoid overwriting the 'users' content when working with the list controller.

Update your controller code to:


...
controller('UserController', function($scope, UserService){

if (!$scope.users)
{
  UserService.getUsers().then(function(data){
    $scope.users = data;
  })            
}
...

Don't forget to include the following line in your addUserController:

 
$scope.users.push($scope.user)

This will ensure proper handling of user data without overwriting existing content.

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

Navigator Access - Handlebars

I'm currently making changes to the Ghost blog in order to support multiple languages. To achieve this, I am creating a Handlebars helper: hbs.registerHelper("language", function () { var lang = (navigator.language) ? navigator.language : nav ...

javascriptnode.jsexpresshandlebars.jsghost-blog

JavaScript can be utilized to eliminate bootstrap tooltip attributes

Having trouble with adding and removing bootstrap tooltip attributes using JavaScript. The tooltip is added on mouseover, but not removed on mouseleave. The script adds the tooltip attributes on mouseover and should remove them on mouseleave. 'use s ...

javascriptbootstrap-5

Dynamic Menu Highlight Styling

I'm having trouble highlighting the current menu item when clicked using CSS. Here is the code I have: #sub-header ul li:hover{ background-color: #000;} #sub-header ul li:hover a{ color: #fff; } #sub-header ul li.active{ background-color: #000; } #su ...

javascripthtmljquerycss

Issues with data loading from server persist with JSON in JQuery Datatables on IE7, IE8, and IE9

I have successfully implemented Jquery Datatables on a client's admin panel. After testing it on Chrome, Firefox, and Opera, everything seemed to be working perfectly. However, when I attempted to load it on IE7, IE8, or IE9, the system just stuck on ...

jqueryjsoninternet-explorerdatatables

Pressing the escape key on the keyboard will act as a shortcut to go

Is there a way to use Javascript in a browser to make the escape key on the keyboard go back? For instance, when visiting this page and clicking the "Fullscreen" link, it would be great to simply press the escape key and return to the previous page. What ...

javascriptbrowserkeyboardback

Obtaining a value from an input field in Vue.js

Just starting out with Vue and could use a hand extracting a value from an input field: Here's what I have in my form: <input type="hidden" id="groupId" value="1"> If I were using jQuery, I would do the following: ...

javascriptvue.js

Removing values in javascript for checkboxes that are not selected

Here is the JavaScript Code : var clinicalStat; var id; var val; var clinicalVals; $(":checkbox").click(function() { //alert(" you checked"); if ($(this).is(':checked')) { var checked1 = $(this).val(); //Inital value of check ...

javascriptjquerycheckbox

Function generator within a component

I have a class-based component and I need to declare a generator function for an API call inside it without using fetch.then. Below is the code snippet: class SearchField extends React.Component { componentWillUnmount() { this.props.clearSearchStat ...

javascriptreactjscomponentsgenerator

Tips for creating a smooth scrolling header menu on a standard header

<script> $(document).ready(function(){ $(".nav-menu").click(function(e){ e.preventDefault(); id = $(this).data('id'); $('html, body').animate({ scrollTop: $("#"+id).o ...

javascripthtmljquery

Is it possible to apply styles to javascript elements without relying on img class? Additionally, how can I incorporate an onclick button while maintaining a fully functional navigation bar?

My current project involves creating an interactive collage where users can click around and have pictures pop up at the clicked location. The functionality works as intended, but now I'm facing issues with the navigation bar not being clickable. Addi ...

javascripthtmlcss

Received an error during the module.exports = client process

In my commands folder, I have multiple files that contain slash commands. I am trying to import the client instance from index.js to another file, but when I use module.exports = client;, it ends up executing the entire index.js script unintentionally. I ...

javascriptnode.jsmodulediscord.jsclient

How to Use Jquery to Retrieve the Selected Option Value and Append a Parameter

I am attempting to expand the value by adding "&fullpage=true" <select name="navMenu" onchange="go(this.options[this.selectedIndex].value)"> <option value="-">Choose</option> <option value="page.html&amp;nyo=0" class="ccbnLnk" ...

javascriptjquery

Exploring the Scope of HTTP Requests

Is it possible to have the variable `pass_or_fail` assigned within the `.then` clause and have that assignment reflected outside of the `.then` clause? this.$http.post('http://localhost:3000/signup?username='+this.username+'&password=&a ...

javascripthttpvue.js

Tips for Adding Items to an Infinite Loop

Could you please review This Demo and advise me on how to continuously load items into the ul list in an endless manner? Currently, I have this code set up to display the list but I want it to keep adding new items to the end every time. var item = $(". ...

javascriptjquery

Preventing ng-swipe in Angular on child elements

Is there a way to prevent the default action on a child element? I have a content element: <div id="content" class="full" ng-swipe-right="openSwipeNav(allowSwipe); swiping = true" ng-swipe-left="closeSwipeNav(allowSwipe); swiping = true" ng-mouseup="c ...

angularjsswipechildren

In Swift, when parsing a JSON array, you may encounter instances where elements are

Following the suggestion of OOPer, I have created a separate question for this issue. This problem is an extension of the one discussed here: JSONserialization error I am encountering an issue while trying to extract elements from a large json array gener ...

iosjsonswift

What mistakes am I making in this PHP code as I try to work with the select option?

Currently, I am developing a form that involves selecting values. If the user chooses 'yes', I want to display a text box section. However, the code below is not functioning as expected. <select id="gap" name="gap" onclick="gap_textbox();"> ...

javascriptphpjqueryajax

The text color remains the same even after the method has returned a value

I have a vuex query that returns a list of books. I want to display each book with a specific color based on its status. I tried using a method to determine the color name for each book and bind it to the v-icon, but it's not working as expected - no ...

javascriptvue.js

Exploring the concepts of AngularJS directives and resources

I've been experimenting with angularjs and rest service calls to display specific data sets, but I'm encountering challenges with custom directives and resources. Currently, I have a custom directive that loads a list of comments in an applicati ...

javascriptangularjs

Verify if ui-state contains a subsequent ui-state after it

I have a question that seems simple, but I couldn't find the answer on Google. I'm using Angular 1.5 and ui-router 1.5. How can I determine if the current ui-view state has a next ui-state? This is important because I need to know if the current ...

angularjsionic-frameworkangular-ui-router