How to dynamically create a http post statement in the controller

Question

I have a problem with sending POST using http as my values in data attribute come from an array which may have different values each time. The array items derives its values from the feilds in a form. It changes for every form.

Here is my controller code,

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

app.controller('myCtrl',function ($scope, $http , $sce, $rootScope,$parse) 
{

  var items=<?php echo json_encode($columnsForArray) ?>;

 //This is what items looks like

console.log(items);/*=> ["ID", "stock", "locstock", "location", 
"con_date", "status", "showafterreturn", "vin", "auto_type", "import", 
"race","street_rod", "special_interest", "other", "car_year", "make", 
"model", "submodel", "special_edition", "body", "doors", "pc_date", 
"return_date"]*/

 $scope.runPHP = function () {

            $http({
                method: 'POST',
                url: 'Connect-carinfo.php',
                data: {
                source: 'from_inside',
                    angular.forEach(items, function (value, key) {
          --------
          |        
          |      });/* Here i need this as a result of the above foreach to 
          |       be like this-
          ------->  selected: $scope.selected,
                    ID: $scope.ID,
                    stock: $scope.stock,
                    locstock: $scope.locstock,
                    location: $scope.location,
                    con_date: $scope.con_date,
                    status: $scope.status,
                    showafterreturn: $scope.showafterreturn,
                    vin: $scope.vin,*/
                    }

            }).then(function (response) {
                $scope.templateURL= $sce.trustAsHtml(response.data);
            })
        };
 });

Here is my view which has the input fields that are attached to the scope. I have all my form feilds in an array called testArr using which the below code works

    public function getDisp($i, $j, $testArr)
    {
        for ($k = 0; $k < sizeof($testArr); $k++)
        {
            if ($testArr[$k][1] == $i && $testArr[$k][2] == $j)
            {
                $this->element = $testArr[$k][0];
                $type = $testArr[$k][4];
                $first = $testArr[0][0];

                echo <<<HTML

    <div>
        <label for="$this->element" class="control-label">
            $this->element:
        </label><br>
  HTML;


                if ($testArr[$k][3] == 'yes')
                {

                    if (substr($testArr[$k][4], 0, 4) == 'enum')
                    {
                        $this->createDrop($testArr[$k][4], $testArr[$k][3]);

                        $this->validation();

                    }

                    else
                    {
                        echo <<<HTML

                     <input type="$type" style="box-sizing: border-box;" class="form-control" name="$this->element" id="$this->element" data-ng-model="$this->element" required/>

  HTML;

                        $this->validation();
                    }
                }

                else
                {
                    if (substr($testArr[$k][4], 0, 4) == 'enum')
                    {
                        $this->createDrop($testArr[$k][4], $testArr[$k][3]);
                    }

                    else
                        echo <<<HTML

            <input type="$type" style="box-sizing: border-box;" class="form- 
control" name="$this->element" id="$this->element" data-ng-model="$this- 
>element" />
HTML;
                }

                echo <<<HTML
    </div>
<br>
HTML;

            }

            else
                continue;
        }
    }

 public function createDrop($item, $validation)
{
    $edit = substr($item, 6, -2);
    $results = explode("','", $edit);
    if($validation === 'yes')
        $drop = "<select style=\"box-sizing: border-box;\" class=\"form- 
 control\" name=\"$this->element\" id=\"$this->element\" data-ng- 
 model=\"$this->element\" required/>";
    else
        $drop = "<select style=\"box-sizing: border-box;\" class=\"form- 
 control\" name=\"$this->element\" id=\"$this->element\" data-ng- 
 model=\"$this->element\"/>";
    $drop .= "<option value=\"\" disabled selected value>Select an 
 option</option>";
    foreach ($results as $result) {

        $drop .= "<option>$result</option>";
    }
    $drop .= "</select>";
    $drop = stripslashes($drop);
    echo <<<HTML
$drop
HTML;

}

Your question isn't very clear, but I think that you might want to look into switch statements to achieve what you want. — Joffutt4, Nov 06 '18 at 20:21
I would like to add the data attribute feilds as mentioned in the comments in the code dynamically. Switch case wouldnt be feasible as there are times when the items may be larger in length. Like right now length of items is 8 and it maybe 70. Writing 70 cases is not feasible. — Srivaishnav Gandhe, Nov 06 '18 at 20:27
You can store and bind the keys and values directly into an object, so I don't understand this question — Alon Eitan, Nov 06 '18 at 20:36
@Alon Eitan I would appreciate if you could give me an example as an answer. — Srivaishnav Gandhe, Nov 06 '18 at 20:48
@SrivaishnavGandhe Can you please [edit] the question and include the view (The only the relevant part where you bind the scope properties to the form inputs) — Alon Eitan, Nov 06 '18 at 20:50
Asking for examples or tutorials is off-topic for Stackoverflow. Start with reading [AngularJS Developer Guide - forms](https://docs.angularjs.org/guide/forms). It explains how to create forms that bind to AngularJS scope. — georgeawg, Nov 06 '18 at 20:52
By default, the $http service JSON encoded the `data` property and sets the `content-type` header to `application/json`. It is not wise to override the `content-type` with something else. — georgeawg, Nov 06 '18 at 21:14
@georgeawg Yeah got that! thank you, but I still dint find the answer about how to pass all the form data. — Srivaishnav Gandhe, Nov 06 '18 at 22:54

score 1 · Answer 1 · answered Nov 06 '18 at 23:50

but I still dint find the answer about how to pass all the form data.

The rule with AngularJS is always have a dot in your ng-models.¹

<input ng-model="items.ID" />
<input ng-model="items.stock" />
<input ng-model="items.vin" />

Then in the controller, simply POST the items object:

$scope.items = {};

$scope.onSubmit = function(items) {
     $http.post(url, items)
}

No matter how many different items there are in the form, the code to POST it remains the same.

How to dynamically create a http post statement in the controller

1 Answers1