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

Question

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?

Try ng-modal="myMessage.vin". If it doesn't work make a fiddle with your code. — Nagarjuna Reddy
– Nagarjuna Reddy, Commented Nov 30, 2016 at 9:40

Sravan · Accepted Answer · 2016-11-30 09:49:56Z

1

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

edited Nov 30, 2016 at 9:49

answered Nov 30, 2016 at 9:40

Sravan

18.7k3 gold badges34 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ryan Pereira Over a year ago

its not working even if i use myMessage.make or myMessage.vin

Sravan Over a year ago

change ng-modal to ng-model

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related