Ways to store push data as json from a controller component

I am new to Angular and looking for guidance on how to save JSON changes upon clicking the save button. I have implemented a save button and count variable in the controller to restrict adding more than 3 rows. How can I add a save controller to capture all three rows' data together and post it to JSON at once?

var app = angular.module("myapp", []);

app.controller("ListController", ['$scope', function($scope) {
  $scope.employeeCount = 2;
  $scope.personalDetails = [];

  $scope.addNew = function(personalDetails) {


    $scope.personalDetails.push({
      'objtyp': personalDetails.objtyp,
      'activ': personalDetails.activ,
      'comm': personalDetails.comm,
    });

    $scope.PD = {};

  };

  $scope.remove = function() {
    var newDataList = [];
    $scope.selectedAll = false;
    angular.forEach($scope.personalDetails, function(selected) {
      if (!selected.selected) {
        newDataList.push(selected);
      }
    });
    $scope.personalDetails = newDataList;
  };

  $scope.checkAll = function() {
    if (!$scope.selectedAll) {
      $scope.selectedAll = true;
    } else {
      $scope.selectedAll = false;
    }
    angular.forEach($scope.personalDetails, function(personalDetails) {
      personalDetails.selected = $scope.selectedAll;
    });
  };
}]);
x /* USER PROFILE PAGE */

.card {
  margin-top: 20px;
  padding: 30px;
  background-color: rgba(214, 224, 226, 0.2);
  -webkit-border-top-left-radius: 5px;
  -moz-border-top-left-radius: 5px;
  border-top-left-radius: 5px;
  -webkit-border-top-right-radius: 5px;
  -moz-border-top-right-radius: 5px;
  border-top-right-radius: 5px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.card.hovercard {
  background: url(http://o.homedsgn.com/wp-content/uploads/2011/04/NYC-at-Night-54.jpg) no-repeat center center;
  position: relative;
  padding-top: 40px;
  overflow: hidden;
  text-align: center;
  background-color: #fff;
  background-color: rgba(255, 255, 255, 1);
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.card.hovercard .card-background {
  height: 130px;
}

.card-background img {
  -webkit-filter: blur(25px);
  -moz-filter: blur(25px);
  -o-filter: blur(25px);
  -ms-filter: blur(25px);
  filter: blur(25px);
  margin-left: -100px;
  margin-top: -200px;
  min-width: 130%;
}

.card.hovercard .card-info {
  position: absolute;
  bottom: 14px;
  left: 0;
  right: 0;
}

.card.hovercard .card-info h1 {
  background-color: rgba(255, 255, 255, 0.7);
  overflow: hidden;
  text-align: center;
  padding: 10px;
  font-weight: bold;
  font-family: arial;
  font-size: 83px;
  margin: 450px 0px 27px 0px;
}

.card.hovercard .card-info .card-title {
  background: url(http://o.homedsgn.com/wp-content/uploads/2011/04/NYC-at-Night-54.jpg) no-repeat;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  display: block;
  background-position: center -450px;
}

.card.hovercard .bottom {
  padding: 0 20px;
  margin-bottom: 17px;
}

.btn-pref .btn {
  -webkit-border-radius: 0 !important;
}

.btn-primary {
  margin-right: 10px;
}

.container {
  margin: 20px 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>


<div class="container">

  <div class="row">

    <div class="col-md-2 col-sm-2">
      <div class="emp_details">
        <h3><span>Anil Kumar K</span></h3>
        <h3><span>IND1469</span></h3>
        <hr></hr>
        <h2><span>Manager</span></h2>
        <h3><span>Vikram Ranade</span></h3>
      </div>
                       ... [remaining content omitted for brevity]

javascriptangularjsjson

Answer №1

To save json using the $http post API, follow these steps:

$scope.save = function(){
    // Create an array to hold selected items
    $scope.selected = [];
    angular.forEach($scope.personalDetails, function(detail){           
       if(detail.selectd){
          $scope.selectd.push(detail);
       }
    });
    // Send this data to the server using $http
    $http({
     url: '/request-url',
     method: "POST",
     data: { 'data' : $scope.selectd }
    })
    .then(function(response) {
        // Handle success response
    }, 
    function(response) { // Optional
        // Handle failed response
    });
}

Make sure to include the $http dependency in your controller like so - 

app.controller("ListController", ['$scope','$http', function($scope, $http){
     //.....controller logic with save and other functions..
}

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

Is it feasible to bypass the dialog box on beforeunload?

Currently, I am utilizing jQuery's bind method like so: $(window).bind('beforeunload', function() { //my code return ""; } In Mozilla Firefox and IE8, everything works smoothly without including the "return "";" statement. No pesk ...

javascriptjquery

Convert JSON into HTML and update the content

Upon form submission, I am directed to a page displaying JSON data: error: {"status":0,"message":"Error message goes here"} or success: {"status":1,"message":"You have successfully signed up!"} I want the content of a span element to be dynamically up ...

jsonajax

Dealing with hierarchical JSON data for a ListView display

I am currently seeking a way to retrieve deeply nested JSON data from a firebase database in order to utilize it within a listView. This approach has been successfully implemented throughout my application, but I am facing challenges when attempting to acc ...

javascriptjsonfirebaseqmlv-play

What is the best way to organize and sort mysql data without disrupting operations?

I've been searching for information on this topic but haven't been able to find a tutorial that explains exactly what program to use. I have a MySQL database with expenses data. What I need is for the system to automatically categorize a new ex ...

javascriptphpjquerymysqlajax

Unable to access marker windows using markers tag on angular-google-maps

Objective Display various random markers on a map and open an information window upon clicking on them. I attempted to implement this using an example from the API page (markers) and included the necessary code for the window and click handler method. Unfo ...

angularjsangular-google-maps

Choose an image depending on the title, but only if a specific condition is met

var no_images2 = $j("img[title^='Click to enlarge image no_photo']").parent(); $j(no_images2).css('pointer-events','none'); var no_images3 = $j("img[title^='Click to enlarge image no_photo']").parent(); $j(no_images ...

javascriptjquery

What is the best way to eliminate a white border that appears only on my ThreeJS website when viewed on a mobile device?

I initially suspected a potential issue with resizing the window, so I created a JavaScript function to handle it. However, that did not resolve the problem. Any other ideas on how to troubleshoot this? // If the user resizes the window, update camera a ...

javascripthtmlcssthree.js

The initial call to the method results in an undefined return value

In my code, there is a function that retrieves distinct values from a database. Here's how it looks: function getUniqueCategories(res, req) { query = `SELECT DISTINCT name FROM product_category;`; connection.query(query, function (err, rows) { ...

javascriptmysqlnode.jsexpress

Is Next.js Dynamic Routing Failing You?

Recently, I attempted to implement Dynamic routing for a recipe app but encountered an issue where the page was not found. This problem has left me puzzled as I am fairly inexperienced with TypeScript, although not with React. // pages/recipes/[recipeId].t ...

javascriptreactjsnext.js

Adding the page number to the URL when paginating in AngularJS

I am currently developing an application that involves pagination through records by making API calls to the server like random/api/endpoint?page=1/2/3 As I paginate, I need to append the requested page number to the URL like http://www.paginate.com/some ...

angularjspaginationangular-routing

Is it possible to send array data in a jQuery AJAX call using the GET method?

Is there a way to pass a JavaScript array as a parameter in an AJAX GET request? I am currently dealing with an API call and have a method that requires three parameters, with the third one being an array. ...

javascriptjqueryajax

Using a function as a parameter in Typescript: Anticipated no arguments, received 1.ts

I'm encountering an issue when trying to pass the doSomething function into performAction. The error message I'm receiving is Expected 0 arguments, but got 1 interface SomeInterface { name: string, id: string } function doSomethingFunction( ...

javascripttypescript

Backbone - NestedModels - Issues with nested sets not triggering 'change' event

I have incorporated the Backbone nested plugin into my project. The way I set up my binding is as follows : var view = Backbone.View.extend({ initialize: function(params) { this.model.bind('change', _.bind(this.rerender, this)); ...

javascriptjsonbackbone.jsnestedbackbone-views

What strategies can be utilized to condense code when needing to adjust a className based on various props?

I am looking to condense this code, particularly the [if~else if] block, in order to dynamically change a className based on different props passed. export default function Button(props) { const { name, height, color, bgColor } = props; let className = ...

javascriptreactjsnext.js

Exploring the basics of utilizing React Testing Library to test a component - a beginner's dive into this innovative testing tool

I've been working on learning how to test 2 components using react-testing-library, but I've hit a roadblock. The component in question is NestedLists.js import React from 'react' export const NestedLists = ({filteredData}) => { ...

javascriptreactjsreact-testing-library

Get rid of the delay when using ng-change

I am currently facing a challenge with two select boxes. Specifically, I need to hide the "Canada" selection in one box when it is selected in the other box. To address this issue, I have successfully implemented a solution on JSFiddle: https://jsfiddle.n ...

angularjs

Creating a Related Entry in strapi v4: A Step-by-Step Guide

Whenever I try to add a new record in my Collection-Type, all the field values are successfully added to the new entry except for the value in the field with a Relation type. For instance, in my event Collection-Type, I have fields like name, performers, ...

javascriptnext.jsstrapi

Unable to detect user's location after installing the apk on an Android device

I have developed a mobile app using Ionic AngularJS and ngCordova. I utilized the ngCordova geolocation plugin to retrieve the user's location. The application functions properly when tested on a browser. However, after installing the same app [androi ...

androidangularjsionic-frameworkngcordovagoogle-geolocation

Tips for effectively utilizing Azure mobile service REST api

The latest customized API script offers a wide range of options for customization with any type of connection. Upon my research, I came across a helpful website Custom API in Azure Mobile Services – Client SDKs, which shares insights on custom APIs. va ...

javascripthtmlazureazure-mobile-services

Tips for avoiding python block comments while implementing vscode snippets?

I have recently created a new vscode snippet specifically for a python function definition. I am curious if this method is the most common or preferred way of handling block comments in python code (""" """). global snippets ...

pythonjsonvisual-studio-codevscode-snippets