current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 6.4 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 0 down vote favorite

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?

share|improve this question
    
Try ng-modal="myMessage.vin". If it doesn't work make a fiddle with your code. – NNR 18 hours ago
    
use ng-repeat for parts – Sharath Bangera 18 hours ago
    
jsfiddle.net/u4obssd3/104 – NNR 18 hours ago
    
For parts you can use ng-repeat. – NNR 18 hours ago
    
how do i post this data now – ryan pereira 18 hours ago
up vote 1 down vote accepted

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

share|improve this answer
    
its not working even if i use myMessage.make or myMessage.vin – ryan pereira 18 hours ago
    
change ng-modal to ng-model – Sravan 18 hours ago
    
please run the aboce snippet, or check the demo link provided in my answer. – Sravan 18 hours ago
    
ahh thanks :P typo :D – ryan pereira 18 hours ago
    
now How Do i post this data ? – ryan pereira 18 hours ago

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.