Data is successfully being stored in an array in AngularJS, however, it is not appearing in the user interface

Having an issue with displaying updated data on my UI. I am successfully pushing data into the database and an array using Angular 2-way binding. The data is being pushed as confirmed by the console, but it's not showing up on the user interface.

Controller


contacts.getall().then(function(response){
   vm.people = response.data;
});


vm.toggleSidenav = function(){
  $mdSidenav('left').open();
};


vm.saveit = function(info){
     vm.people.push(vm.xyz); 
     contacts.add(vm.xyz);
     console.log(vm.people);

My list


   <md-list>
  <md-list-item  ng-repeat="person in vm.people | filter:vm.searchText | orderBy:'name'" ng-click="showDialog($event, person)">
  <img alt="{{ person.name }}" ng-src="https://lh3.googleusercontent.com/-nR0PNFb3p4k/AAAAAAAAAAI/AAAAAAAAAAA/NVt2CqCrCis/photo.jpg" class="md-avatar" />
   <p>{{ person.name }}</p>
   <p class="phn">{{ person.phone }}</p> 

<md-icon ng-click="vm.showConfirm($event, person)"aria-label="Open Chat" class="md-secondary md-hue-3" ng-class="">delete</md-icon>
 </md-list-item>

  </md-list>

For console


  vm.people.push(vm.xyz); 
  contacts.add(vm.xyz);
  console.log(vm.people);

Answer №1

--------------------------------------------------------- Updated Information-------------------------------------------------------

Alright, in Angular, one simple rule for passing a value from one controller to another is to use a Factory. However, since we are not utilizing a second controller in this scenario, we will opt out of using a factory.

You have initialized var vm.people = []; as an array.

But here, you are pushing an OBJECT within an ARRAY

vm.people.push({
  name: vm.info.name,
  phone: vm.info.phone,
  email: vm.info.email
});

This approach is incorrect, which is why the scope was not updating properly.

What you should do is create a JSON object and then update your $scope.showData

vm.people = { "name": vm.info.name, "phone": vm.info.phone, "email": vm.info.email};

This will update the current scope and save the data simultaneously. The storage factory used in the plunker was only for testing purposes; you can remove it if needed. If you decide to keep it, now you know how to pass and store data in the factory and retrieve it later on.

Please refer to the updated version on Plunker

Check out the animated GIF:

https://i.sstatic.net/KTcLj.gif

----------------------------------------------------------- Previous Response---------------------------------------------------------- Hello there! I have created a functional plunker based on your code. The vm.people array that you defined at the beginning and then populated with data in the vm.saveit function is working perfectly fine. It contains an object with three properties. Is there something specific that seems to be causing an issue?

[Object]
0
:

email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c7a3b2aab787a0aaa6aeabe9a4a8aa">[email protected]</a>"
name: "waqas"
phone: "4245345343"

To view the working plunker, visit Form Data is not getting pushed in array in angularjs

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

Connecting an HTML box to a JavaScript function for the desired outcome: How to do it?

My goal is to connect the input box with id="b" (located inside the div with id="but1") with a JavaScript function that calculates values within an array. Although my junior logic review didn't detect any issues in the code, what mistakes could I have ...

Unable to move cursor in contenteditable section

I am currently working on developing a rich text editor in React, but I have encountered an issue that has me stuck. The problem I am facing is that as I type each character, the insertion point does not update accordingly, causing the cursor to remain stu ...

The property fetchPriority is not a valid attribute for HTMLLinkElement

The HTMLLinkElement model has a property mentioned above (as shown in the image), yet the compiler is indicating that the property does not exist. Interestingly, there is one reference visible (the reference I have included in my component). https://i.sst ...

Firebase Functions: Your functions are missing a definition

I have the following code in index.js: exports.makeUppercase = functions.database.ref('/messages/{pushId}/original').onCreate((snapshot, context) => { // Fetch the current value written to the Realtime Database. const original = snapshot. ...

Exporting Axios.create in Typescript can be accomplished by following a few simple

My code was initially working fine: export default axios.create({ baseURL: 'sample', headers: { 'Content-Type': 'application/json', }, transformRequest: [ (data) => { return JSON.stringify(data); } ...

What is the best way to send data from a header component to a separate container component?

Utilizing React-router-dom, I am able to seamlessly switch between components in the following setup: <Router> <div> <Header /> <NavigationBar /> <Switch> <Route exact path ...

Encrypt JavaScript for a jade layout

I need to find a way to successfully pass a .js file to a jade template in order for it to display correctly within an ACE editor. However, I am encountering errors when attempting to render certain files that may contain regex and escaped characters. How ...

The v-for directive is causing issues with loading the array

Currently, I am attempting to iterate through a group of users sourced from the jsonplaceholder API. Below is the code for my Vue component: new Vue({ el: "#vue-app", data: { name: "dani", thumbnail: '', users: [] }, beforeM ...

Grabbing elements from the inner array in php

Here is the array in question: outerarray{ "id": "20154", "from": { "name": "xyz", "id": "10004" }} I am now wondering how I can retrieve the value of the 'name' element? ...

Implement a counter in PHP to differentiate names if they already exist within an array

I have a complex array, and I'm trying to iterate through it. Whenever there is a duplicate name, I need to add a counter to differentiate them. [1] => Array ( [0] => Array ( [clientName] => John Smith ...

When I clicked on the event in Javascript, the result was not what I expected

I am currently working on a web project centered around cooking recipes. In order for users to add ingredients to their recipes, they must input them one by one into a dynamic list that I am attempting to code using jQuery (AJAX). My issue arises when a u ...

Tips for concealing a tab within Angular Bootstrap UI using ng-show/ng-hide

Angular Bootstrap UI is being utilized to display a tabset. The necessary script, ui-bootstrap-tpls-0.6.0.min.js, and some HTML template files are included in the setup. Check out the following markup: <tabset> <tab ng-hide="!hideme"> ...

Using multi-dimensional JSON arrays for posting requests through Ajax

Is it possible to serialize HTML fields in a multi-dimensional array format for AJAX post transmission? I tried using serializeArray but it only formats the first level of the array. The data I need to serialize includes name/value pairs like: name="cus ...

"Learn to easily create a button within a table using the powerful functionality of the dataTable

I need to add a button to each row in a table. I managed to achieve this with the code below, but there's a problem - every time I switch between pages, the button keeps getting added again and again. It seems like the button is generated multiple tim ...

Incorporating data retrieved through AJAX requests into a Python function

The Flask application described below continuously makes Ajax calls to a backend index function that queries a database and injects the results into a template. However, the injected data is not being refreshed after the Ajax calls are completed, leading ...

How to dynamically insert elements into the HTML page using Angular

When my page first loads, it looks like this <body> <div class="col-md-12" id="dataPanes"> <div class="row dataPane"> Chunk of html elements </div> </div> <div class"col-md-12 text-right"> <input type="butt ...

Next.js - utilizing dynamic API routes within nested folders

Currently, I am working on developing a basic API that reads a local JSON file. My goal is to create a dynamic API that can adjust based on the specific calls it receives. Within my API folder structure, I have: api --book ---[id].js ----content -----[id ...

Can someone provide guidance on how to send serialized data using a jQuery.getScript() request?

Is it feasible to make a request for an external JS file while simultaneously sending serialized data in that same request? I want to provide some values to validate the request, but without including those values in the request URL. Upon receiving the po ...

Tips for redirecting a page in React by forcing a route

Attempting to implement the guidance from this Stack Overflow solution on how to "go back home" after closing a Modal... import React, { Suspense, useState } from 'react'; import { BrowserRouter, Route, Switch, useHistory } from "react-route ...

What is the best way to implement a fade animation with nganimate when transitioning between routes in Angular ui-router?

.ng-leave { transition: 1s linear all; opacity: 1; } .ng-leave-active { opacity: 0; } The code above specifies a fade animation whenever the router changes routes from one page (page1.html) to another (page2.html). However, if you want to hav ...