0

get_student_details.json

{
    "student": [
       {
           "studentname": "MANNAT SACHDEVA",
           "Class": "3",
           "percentage": "96",
           "student_answer": [
                {
                    "1": "C",
                    "2": "A"
                }
           ],
            "correct_answer": [
                {
                    "1": "C",
                    "2": "A"
                }
            ]
       }
   ]
}

index.php

<html>
    <head>
        <link href="css/style.css" rel="stylesheet">
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
        <script>
            function studentController($scope, $http) {
                var url = "http://localhost/olm/get_student_details.json";
                $http.get(url).success(function (response) {
                    $scope.student_details = response;
                });
            }
        </script>
    </head>
<body>
    <div class="container" id="whole-page">
        <div class="col-lg-12" id="box">
            <div ng-app="" ng-controller="studentController">
                <div ng-repeat="detail in student_details">
                    <table>
                        <tr>
                            <td>
                                <h3>Student Name</h3>
                                <h1 style="color: rgb(19, 191, 255);">{{ detail.studentname }}</h1>
                            </td>
                            <td>
                                <h3>Class</h3>
                                <h1>{{ detail.class }}</h1>
                            </td>
                        </tr>
                    </table>
                    <table>
                        <tr>
                            <td>
                                <h3 id="left" style="margin-top:60px;">PERCENTAGE</h3>
                                <div id="right">
                                    <h2 id="percent">{{ detail.percent }}%</h2>
                                </div>
                            </td>
                        </tr>
                    </table>
                    <table style="margin-top:15px;">
                        <tr>
                            <td>
                                <ol id = "limheight">
                                    <li>1 - {{ detail.student_answer }} <span id="ans">{{ detail.correct_answer }}</span></li>
                                </ol> 
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

I am new in angular js and I want to display json file data i.e. get_student_details.json into index.html file. Now I have create a funtion to insert json data into index.html after that when I reload index.php nothing happen it remain same I don't know where I am doing wrong. So, How can I fix this issue ?Please help me.

Thank You

omkara
  • 974
  • 5
  • 24
  • 50
  • you firstly need to parse API as per Key value params you require in two way binding in Angular View HTML – Mayur Baldha Jan 11 '18 at 13:04
  • Are you getting any data in console.log from the AP? I recommend using relative paths to your file... function studentController($scope, $http) { var url = "olm/get_student_details.json"; $http.get(url).success(function (response) { $scope.student_details = response; }); } – Josh Lavely Jan 11 '18 at 13:05
  • nothing are showing @JoshLavely – omkara Jan 11 '18 at 13:11
  • Suggest you learn how to register controllers properly. The angular version you are using is very old and you are going to run into problems due to more current approaches used See https://stackoverflow.com/questions/25111831/controller-not-a-function-got-undefined-while-defining-controllers-globally – charlietfl Jan 11 '18 at 13:12
  • Also suggest you go through the tutorial on the documentation site https://docs.angularjs.org/tutorial – charlietfl Jan 11 '18 at 13:13
  • 2
    And you want to iterate the array which is in your `student` property `ng-repeat="detail in student_details.student"` – charlietfl Jan 11 '18 at 13:15

0 Answers0