ryan pereira ryan pereira - 7 days ago 5
HTML Question

How do I get data in input field from a get request in angular JS?

I would like to get JSON data in this format which needs to be displayed on the screen:

{
"make": "Toyota",
"vin": "1234",
"model": "FJ",
"parts": [
{
"name": "wheel",
"desc": "makes it roll"
},
{
"name": "engine",
"desc": "really shiny"
},
{
"name": "Seats",
"desc": "leather seat covers"
}
]
}


How do I populate this data in an input field?

<form>
<div class="form-group">
<label>Make</label>
<input type="text" class="form-control" id="makeid" ng-modal="make">
</div>
<div class="form-group">
<label>Vin</label>
<input type="text" class="form-control" id="vinid" ng-modal="vin">
</div>
<div class="form-group">
<label>Modal</label>
<input type="text" class="form-control" id="modalid" ng-modal="modal">
</div>
<div class="form-group">
<label>Parts</label>
<input type="text" class="form-control" id="partsid" ng-modal="part">
</div>
</form>


How do I make it work using a request?

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
$http.get("http://192.16.1:8080/restproj/v1/dealer/1234/car")
.then(function(response) {
$scope.myMessage = response.data;

});
});
</script>


How do I write the $scope to populate the screen?

Answer

The first mistake in your code is you used ng-modal instead of ng-model

Since you are taking data into a scope variable $scope.myMessage, you should use myMessage in the view.

You assigned the response to $scope.myMessage so, view uses myMessage.make with out scope

Eg: <input type="text" class="form-control" id="makeid" ng-model="myMessage.make">

Since the parts is an array, use ng-repeat

<div class="form-group" ng-repeat="part in myMessage.parts">
                    <label>Parts</label>
                    <input type="text" class="form-control" id="partsid" ng-model="part.name">
</div>

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
   $scope.myMessage = {
  "make": "Toyota",
  "vin": "1234",
  "model": "FJ",
  "parts": [
    {
      "name": "wheel",
      "desc": "makes it roll"
    },
    {
      "name": "engine",
      "desc": "really shiny"
    },
    {
      "name": "Seats",
      "desc": "leather seat covers"
    }
  ]
}
});
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body >

<form ng-app="myApp" ng-controller="myCtrl">
    <div class="form-group">
        <label>Make</label>
        <input type="text" class="form-control" id="makeid"  ng-model="myMessage.make">
        
        </div>
        <div class="form-group">
            <label>Vin</label>
            <input type="text" class="form-control" id="vinid" ng-model="myMessage.vin">
            </div>
            <div class="form-group">
                <label>Modal</label>
                <input type="text" class="form-control" id="modalid" ng-model="myMessage.model">
                </div>
                <div class="form-group" ng-repeat="part in myMessage.parts">
                <label>Parts</label>
                   <input type="text" class="form-control" id="partsid" ng-model="part.name">
              </div>
            </div>    
        </div>
    </div>        
</form>

</body>

</html>

Run the above snippet

Here is the working Demo