Search code examples
htmlangularjsjsonangularjs-ng-repeatangular-ngmodel

Display data from JSON to TextView in AngularJS


I have a json file with this values:

[
  {
    "id": "3",
    "name": "abacus",
    "type": "math device",

  },
  {
    "id": "4",
    "name": "beaker",
    "type": "science device",
  }
]

What I want is to display these values in my html file I'm thinking of how can I use the ng-repeat but I can't seem to find out how can I do it. Can you please help me? Any help would be appreciated. This is my html section on where i want to display the json:

<div class="form-group" >
        <label class="col-md-4 control-label">
            ID:
        </label>                                                  
        <div class="col-md-8">                                           
            <input type="text" name="regular" class="form-control" ng-model="id">
        </div>
        <label class="col-md-4 control-label">
            Name:
        </label>                                                  
        <div class="col-md-8">                                           
            <input type="text" name="regular" class="form-control" ng-model="name">
        </div>
        <label class="col-md-4 control-label">
            Type:
        </label>                                                  
        <div class="col-md-8">                                           
            <input type="text" name="regular" class="form-control" ng-model="type">
        </div>
            <br><br>
</div>  

Solution

  • Perhaps this is what you're looking for? jsfiddle.

    HTML

    <div class="form-group" ng-repeat="item in data">
      <label class="col-md-4 control-label">
        ID:
      </label>                                                  
      <div class="col-md-8">                                           
        <input type="text" name="regular" class="form-control" ng-model="item.id">
      </div>
      <label class="col-md-4 control-label">
        Name:
      </label>                                                  
      <div class="col-md-8">                                           
        <input type="text" name="regular" class="form-control" ng-model="item.name">
      </div>
      <label class="col-md-4 control-label">
        Type:
      </label>                                                  
      <div class="col-md-8">                                           
        <input type="text" name="regular" class="form-control" ng-model="item.type">
      </div>
      <br><br>
    </div>  
    

    Controller

      $scope.data = [
        { "id": "3", "name": "abacus", "type": "math device" },
        { "id": "4", "name": "beaker", "type": "science device" }
      ];