Implementing AngularJS JSON Data into SQL Database

Currently, I am in the process of developing an application that utilizes WebAPI and AngularJS for searching data from a SQL table. The retrieved data is then displayed on a webpage where users can select multiple rows to be inserted into a separate JSON array called availableclients. My goal now is to insert this JSON array into a different SQL table. Does anyone have suggestions on the best approach to achieve this? Below is the code snippet I am using to retrieve the data.

Controller.js

var app = angular.module('myApp', []);

app.controller("myController", function ($scope, $http) {

  function getCert(myid) {
    $http.get('api/Cert/Get/', { params: { id : myid } })
      .success(function (data) {
        $scope.selectedclients = data;
      })
  }

  $scope.searchClick = function() {
    getCert($scope.myid);
  }

  $scope.moveItem = function (item, from, to) {
    var idx = from.indexOf(item);
    if (idx != -1) {
      from.splice(idx, 1);
      to.push(item);
    }
  };

  $scope.availableclients = [];
});

HTML

<html data-ng-app="myApp">
  <body data-ng-controller ="myController">    

My_ID: <input type="text" ng-model="my_id" />
    <input type="submit" value="Search" ng-click="searchClick()" />

    <select size="10" multiple ng-model="selected" ng-options="i.unit_id for i in selectedclients" style="width: 400px"></select>
    <div class="btn-group">
      <button title="Remove From List" class="btn btn-default" ng-click="moveItem(available[0], availableclients,selectedclients)"><i class="glyphicon glyphicon-chevron-left"></i></button>
      <button title="Add To List" class="btn btn-default" ng-click="moveItem(selected[0], selectedclients,availableclients)"><i class="glyphicon glyphicon-chevron-right"></i></button>
    </div>
    <select size="10" multiple ng-model="available" ng-options="i.unit_id for i in availableclients" style="width: 400px"></select>
  </body>
</html>

The current code works well, but I am struggling with how to insert the availableclients JSON array into my SQL table. I've searched extensively, but haven't found the solution I'm looking for. Any advice would be greatly appreciated. Thank you!

EDIT 1: Following a suggestion in the comments, I am including the Controller I used for the Web API retrieval. Once again, thank you for any assistance!

public class CertController : ApiController
{

    CertEntities objapi = new CertEntities();


    [HttpGet]
    public IEnumerable<AngularCoCSelect_Result> Get(int id)
    {

        return objapi.AngularCoCSelect(id).AsEnumerable();
    }

}

Answer №1

This question covers a broad spectrum of topics, especially since you are only showcasing the client code and not providing any insight into the backend that will ultimately store the data (assuming based on the presence of the asp.net tag).

One possible solution is to utilize Entity Framework for storing your data in a database. There are numerous resources available online that discuss how to implement this method effectively.

Answer №2

Here is a helpful solution for you:

To create a seamless experience for your clients in ASP.NET or PHP, you will need a back-end API that can accept an array of objects (JSON).

In Angular, make sure to add a function within your controller that allows the client data to be submitted to the server using either $http.put or $http.post.

$scope.submitClientData = function(){
    $http.post('webapi/clients' , { clients:$scope.availableclients })
}

You can trigger this function by adding a submit button with the following code:

<button ng-click='submitClientData()'>Save</button>

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

Locate within an HTML table (inside a specific td child tag) and conceal the row

I am trying to search for content within the H3 tag only, not the TD tag. If a result is found in the table, I want the corresponding TR to be hidden. -H3 is a child tag under TD. For example: <tr> <td> <h3>Example</h3> & ...

Controlling the ASP.NET Web Service Source Code

I am in the process of developing a series of ASP.NET (2.0) web services to be integrated into a single web application within IIS7. These services will be implemented gradually over the course of a year or longer by multiple developers. What is the best w ...

What could be causing Gson to struggle with parsing my document that contains a nested escaped JSON string?

I've encountered a frustrating issue with GSON. For some reason, I can't seem to parse this document: [{"id":0,"assetId":2414775,"shipId":717,"assetType":"0","document":"{\"ratios\":[{\"points\":{\"x1\":0,\"y1 ...

The issue of CharAt not functioning correctly arises when used inside a table and input element within the

The Objective: Extract the first character from the input field and display it beside the input box in order to facilitate sorting. I am facing issues with jQuery data tables and am in search of an alternative solution. Potential Resolution: Use the charA ...

Exploring the use of v-model in Vue3 child components

After some exploration, I recently discovered that in Vue3, the v-model functionality does not work responsively or reactively with child Component. The following code snippet showcases how the username data gets updated: <template> <div> ...

JavaScript: Transforming a key-value pair collection into an array of objects

I'm looking to convert a dictionary into a list of dictionaries using JavaScript. Can someone help me with that? var dict = { "apple" : 10, "banana" : 20, "orange" : 30 } var data = [ {"apple" : 10}, {"ban ...

Comparison between the sluggishness of radio buttons in Internet Explorer 10 versus Chrome when using jQuery

When using IE 10, Chrome, and jquery 1.10.2 with the standard template from Visual Studio 2013 (.Net 4.5), I encounter an issue with radio buttons. Upon clicking a radio button, two actions are supposed to occur: 1. Recreation of all the radio buttons. 2 ...

Encountering an issue: Why am I receiving an error stating that the column count does not match the value count at row 1?

I'm currently working on a form page that allows users to upload parameter lists using radio buttons. Despite being careful not to miss any numbers, I keep encountering the error message: "Column count doesn't match value count at row 1." What co ...

Resizing and scrollable div element with the ability to adjust size from the left

My goal is to create a navigation bar on the left and content on the right. The current setup works well, but there is an issue with the scrollbar on the navbar pushing the resize icon inward by about 7 pixels. I am looking for a solution where the content ...

Unable to create account using PHP

Every time I attempt to create an account, the data I receive is always problematic. The username must be between 3 and 15 characters I find it frustrating that the account creation never goes through successfully. What baffles me even more is that af ...

Manipulate MySQL data in Node.js by storing it in a variable

Struggling to grasp the concepts of nodeJS/typescript and how to effectively save database query results into variables for return. Seeking assistance to solve the problem faced: Here is a method snippet that needs help: public getAllProducts(): ProductA ...

The mysterious plugin "transform-runtime" has been detected in the ".babelrc" file located in "UsersPhpstormProjectseasy-essay"

After downloading a GitHub repository, I came across a file named .babelrc.json with the following contents: { "presets": [ "es2015", "stage-0" ], "plugins": [ "transform-runtime", "add-module-exports", "transform-decorators-lega ...

Top Tip for Preventing Angular Version Compatibility Issues

Here is an illustration that delves into my inquiry ----> Version Conflict The dilemma arises when my product has a dependency on a node package, which in turn relies on a specific version of Angular, denoted as version #y. However, my product itself ...

Reading Json file and sending the value using the Dashing Meter

How can I successfully send a value to a Dashing meter from a JSON file using Ruby? require 'json' file = File.open('/mnt/json/process1.json') contents = file.read SCHEDULER.every '2s' do contents["poolused"] = { label ...

Surprising behavior witnessed in Postgres query when using the results of an UPDATE within a Common Table Expression (CTE

WITH deleted_items AS ( SELECT name FROM items WHERE id = $1 ), updated_records AS ( UPDATE records r SET details = JSONB_SET(details, '{items}', (SELECT jsonb_agg(elem) ...

The functionality of async.series and async.each is not behaving as anticipated

I am currently working on developing a web scraping tool using nodeJS to extract image URLs from a website's HTML, store them in a cache, and then identify the largest image based on file size. However, I'm facing an issue where the function de ...

WCF REST: How should the XML format be structured in requests?

Within my WCF service, I have a method structured as below: [OperationContract] [WebInvoke(Method = "POST", BodyStyle = WebMessageBodyStyle.Bare, ResponseFormat = WebMessageFormat.Xml, RequestFormat = WebMessageFormat.Xml)] public int GetOne(string param1 ...

Deconstruct the JSON object to extract values from both sides

When using volley to fetch API response, the data received is in the form of STATE_ID:STATE_NAME pairs (i.e. value:value pair). I need to extract and store both sides of the pair in separate Strings. These values are then intended to be placed in a spinner ...

Encountering a 404 error page when attempting to deploy a React app on Netlify

After successful deployment, the platform shows that there are no pages to display even though all the necessary data is included in the generated zip file. https://i.sstatic.net/nHQU0.png I have connected my Netlify account with the correct Git reposito ...

Obtain the order of items selected in a listbox control using C#

I am working with the list box control in ASP.NET using C#. It contains a collection of integers as items: 100, 200, 300, 400, 500, 600, 700. Do you follow so far? During runtime, I randomly select items from the list, such as: 200, 500, 100, 300. Makin ...