CODEWITHSUNDEEP
javascriptjqueryhtmljsonangularjs
Loretta V
Loretta V

Reputation: 71

display text into my html text box from json data

Here is my html text for my text-box :

<div class="row">
    <div class="col-md-2">
        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
        <div class="alert alert-info alert-dismissable">
            <textarea class="form-control3" rows="3" placeholder="Clue 1"></textarea>
            <textarea class="form-control4" rows="3" placeholder="Answer"></textarea>
            <input type="text" class="form-control1" placeholder="10">
            <input type="text" class="form-control2" placeholder="Rejected">
            <div>
                <img src="images/up.png" width="13px" ;height="13px">&nbsp;
                <div class="blank"></div>
                <span class="badge badge-danger">100</span>
                <img src="images/down.png" width="13px" ;height="13px">&nbsp;
                <div class="blank"></div>
                <span class="badge badge-danger">50</span>
                <img src="images/eye.png" width="20px" ;height="20px">
                <div class="blank"></div>
                <span class="badge badge-danger">120</span>

            </div>
        </div>
    </div>

Here is my json code: (This is my .html file)

    <html ng-app="myClues">

    <head>
        <script data-require="[email protected]" data-semver="1.3.9" src="https://code.angularjs.org/1.3.9/angular.js"></script>
        <link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css" />
        <script src="//code.jquery.com/jquery-1.10.2.js"></script>
        <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
        <script type="text/javascript">
        var app = angular.module("myClues", []);
        app.controller("MyController", function($scope, $http) {
            $http.get("new1.json").success(function(result) {
                $scope.Details = result.records;
            });
        });
        </script>
    </head>

    <body ng-controller="MyController">
        <div>
            <ul>
                <li ng-repeat="x in Details">
                    {{x.Name + ',' + x.City +',' + x.Country}}
                </li>
            </ul>
        </div>
    </body>

    </html>

(Below is my .json file)

{
  "records": [{
    "Name": "CLUE 1",
    "City": "Answer to clue 1",
    "Country": "10 users rejected"
  }, {
    "Name": "CLUE 2",
    "City": "Answer to clue 2",
    "Country": "5 users rejected"
  }]
}

When I run the page I want to display the JSON data in my HTML text boxes which I have created. How do I do that? Is my JSON code correct?

Upvotes: 1

Views: 2802

Answers (1)

Jeremy Thille
Jeremy Thille

Reputation: 26370

The problem is simply that you're looping over Details instead of Details.records :

<ul>
      <li ng-repeat="x in Details.records">
             {{x.Name + ',' + x.City +',' + x.Country}}
      </li>
 </ul>

Upvotes: 1

Related Questions