Display data from JSON to TextView in AngularJS

Question

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>

Aᴄʜᴇʀᴏɴғᴀɪʟ · Accepted Answer · 2016-09-23 00:41:35Z

1

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" }
  ];

answered Sep 23, 2016 at 0:41

Aᴄʜᴇʀᴏɴғᴀɪʟ

3,0874 gold badges27 silver badges51 bronze badges

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

6 Comments

bleyk Over a year ago

@CALLODACITY Thanks this solved my question but how about if my json value is inside an array? how will I solve this?

Aᴄʜᴇʀᴏɴғᴀɪʟ Over a year ago

@bleykFaust what do you mean inside an array? Isn't it already inside an array [{ "id": "3", ...}, {...}]?

bleyk Over a year ago

@CALLODACITY, Actually, I got the values of that JSON through an API and then pass the values inside an array. Btw, can we continue this discussion on chat? I greatly appreciates your help

bleyk Over a year ago

@CALLODACITY, When I tried to use this and exchange my code on this the only value that is displayed and repeated is the first one the second one is not being repeated

Aᴄʜᴇʀᴏɴғᴀɪʟ Over a year ago

@bleykFaust did you look at the jsfiddle I linked? that's a fully working angular app. Just re-write your code to resemble that and it will work fine.

|

e-neko · Accepted Answer · 2016-09-23 00:38:04Z

0

Try doing it like this (assuming json is defined on scope and contains your data)

<div class="form-group">
        <label class="col-md-4 control-label" ng-repeat-start="item in json">
            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 ng-repeat-end>
</div>

answered Sep 23, 2016 at 0:38

e-neko

1,2849 silver badges13 bronze badges

2 Comments

bleyk Over a year ago

how can I define that json inside a scope? @e-neko

Kalamarico Over a year ago

Json is not javascript, what you want is transform the json to a javascript object, try JSON.parse(text) where text is a string variable with your json

Collectives™ on Stack Overflow

Display data from JSON to TextView in AngularJS

2 Answers 2

6 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related