I'm a beginner with Angularjs and I attempted to populate multiple JSON values, but unfortunately, it didn't work as expected

Question

I'm a beginner with Angularjs and I attempted to populate multiple JSON values, but unfortunately, it didn't work as expected

        <div ng-controller="studentController" ng-repeat = "student in students | unique = 'RollNo' " > 
        <table  class="profile-info">
        <tr>
        <th>Enrollment Number</th>
        <td>{{ student.RollNo }}</td>              
        </tr>
        <tr>
        <th>Grade</th>
        <td>{{ student.Class }}</td>              
        </tr>  
        <tr>
        <th>Division</th>
        <td>{{ student.Section }}</td>              
        </tr>   
        <tr>
        <th>Favorite Sport</th>
        <td>{{ student.Sports }}</td>              
        </tr>  
        <tr>
        <th>Hobbies</th>
        <td>{{ student.otherInterests }}</td>              
        </tr>                  
        </table>
        </div>

    <---- Angular Part---->
// Unable to Load JSON Data using the Following Script // 

    <script>
    function studentController($scope,$http) {
    var url = "aboutme.json";
    $http.get(url).success( function(response) {
    $scope.students = response.data;
    });
    }
    </script>

<--- JSON PART --- >
[
   {
      "Grade" : 1,
      "Enrollment No" : 1,
      "Division" : "A",
      "Favorite Sport" : "Football",
      "Hobbies" : "Music",
   },

  {
      "Grade" : 12,
      "Enrollment No" : 2,
      "Division" : "B",
      "Favorite Sport" : "Counter-Strike",
      "Hobbies" : "Music",
   }
]

javascript angularjs json mean-stack

Answer 1

Answer №1

Check out this code for a helpful example

function displayData($scope) {
    $scope.students = [{ "Class" : 1, "RollNo" : 1, "Section" : "A", "Sports" : "Football", "otherInterests" : "Music", },

{ "Class" : 12, "RollNo" : 2, "Section" : "B", "Sports" : "Counter-Strike", "otherInterests" : "Music", } ]
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />


<div ng-app ng-controller="displayData">
        
        <table  class="table table-striped table-bordered">
          <tr>
            <th>Class</th>
            <th>Roll Number</th>
            <th>Section</th>
            <th>Sports</th>
            <th>Other Interests</th>
          <tr>
          <tr ng-repeat="student in students">
            <td>{{student.Class}}</td>
            <td>{{student.RollNo}}</td>
            <td>{{student.Section}}</td>
            <td>{{student.Sports}}</td>
            <td>{{student.otherInterests}}</td>
          </tr>
                       
        </table>
        

</div>

Answer 2

Check out this code for a helpful example

function displayData($scope) {
    $scope.students = [{ "Class" : 1, "RollNo" : 1, "Section" : "A", "Sports" : "Football", "otherInterests" : "Music", },

{ "Class" : 12, "RollNo" : 2, "Section" : "B", "Sports" : "Counter-Strike", "otherInterests" : "Music", } ]
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />


<div ng-app ng-controller="displayData">
        
        <table  class="table table-striped table-bordered">
          <tr>
            <th>Class</th>
            <th>Roll Number</th>
            <th>Section</th>
            <th>Sports</th>
            <th>Other Interests</th>
          <tr>
          <tr ng-repeat="student in students">
            <td>{{student.Class}}</td>
            <td>{{student.RollNo}}</td>
            <td>{{student.Section}}</td>
            <td>{{student.Sports}}</td>
            <td>{{student.otherInterests}}</td>
          </tr>
                       
        </table>
        

</div>

Answer 3

Answer №2

Ensure the proper functioning of ng-repeat in your HTML by following these minor adjustments:

Apply ng-repeat on tr within td instead of wrapping it around the entire div.
Confirm that the $scope.students object contains the same structure as specified in the provided JSON part.

See a working demonstration below:

var myApp = angular.module('myApp',[]);

myApp.controller('studentController',function($scope) {
  $scope.students = [
   {
      "Class" : 1,
      "RollNo" : 1,
      "Section" : "A",
      "Sports" : "Football",
      "otherInterests" : "Music"
   },
  {
      "Class" : 12,
      "RollNo" : 2,
      "Section" : "B",
      "Sports" : "Counter-Strike",
      "otherInterests" : "Music"
   }
];
})

table,th,td {
  border:1px solid black;
  }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="studentController"> 
<table class="profile-info">
    <tr>
        <th>Roll No</th>
        <th>Class</th>
        <th>Section</th>
        <th>Sports</th>
        <th>other Interests</th>
    </tr>
    <tr ng-repeat="student in students">
        <td>{{ student.RollNo }}</td>              
        <td>{{ student.Class }}</td>   
        <td>{{ student.Section }}</td>   
        <td>{{ student.Sports }}</td>  
        <td>{{ student.otherInterests }}</td>
    </tr>                  
</table>
</div>

Answer 4

Ensure the proper functioning of ng-repeat in your HTML by following these minor adjustments:

Apply ng-repeat on tr within td instead of wrapping it around the entire div.
Confirm that the $scope.students object contains the same structure as specified in the provided JSON part.

See a working demonstration below:

var myApp = angular.module('myApp',[]);

myApp.controller('studentController',function($scope) {
  $scope.students = [
   {
      "Class" : 1,
      "RollNo" : 1,
      "Section" : "A",
      "Sports" : "Football",
      "otherInterests" : "Music"
   },
  {
      "Class" : 12,
      "RollNo" : 2,
      "Section" : "B",
      "Sports" : "Counter-Strike",
      "otherInterests" : "Music"
   }
];
})

table,th,td {
  border:1px solid black;
  }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="studentController"> 
<table class="profile-info">
    <tr>
        <th>Roll No</th>
        <th>Class</th>
        <th>Section</th>
        <th>Sports</th>
        <th>other Interests</th>
    </tr>
    <tr ng-repeat="student in students">
        <td>{{ student.RollNo }}</td>              
        <td>{{ student.Class }}</td>   
        <td>{{ student.Section }}</td>   
        <td>{{ student.Sports }}</td>  
        <td>{{ student.otherInterests }}</td>
    </tr>                  
</table>
</div>

Answer 5

Answer №3

<div ng-controller="studentController" ng-repeat="student in students | unique = 'RollNo'" >

Change To

<div ng-controller="studentController" ng-repeat="student in students | unique = 'RollNo'" >

Or And

{ "Class": 1, "RollNo": 1, "Section": "A", "Sports": "Football", "otherInterests": "Music"},
{ "Class": 12, "RollNo": 2, "Section": "B", "Sports": "Counter-Strike", "otherInterests": "Music"}]

Change To

{ "Class": 1, "RollNo": 1, "Section": "A", "Sports": "Football", "otherInterests": "Music"},
{ "Class": 12, "RollNo": 2, "Section": "B", "Sports": "Counter-Strike", "otherInterests": "Music"}]

Answer 6

<div ng-controller="studentController" ng-repeat="student in students | unique = 'RollNo'" >

Change To

<div ng-controller="studentController" ng-repeat="student in students | unique = 'RollNo'" >

Or And

{ "Class": 1, "RollNo": 1, "Section": "A", "Sports": "Football", "otherInterests": "Music"},
{ "Class": 12, "RollNo": 2, "Section": "B", "Sports": "Counter-Strike", "otherInterests": "Music"}]

Change To

{ "Class": 1, "RollNo": 1, "Section": "A", "Sports": "Football", "otherInterests": "Music"},
{ "Class": 12, "RollNo": 2, "Section": "B", "Sports": "Counter-Strike", "otherInterests": "Music"}]

Answer 7

Answer №4

Utilize ng-repeat for the tr instead of div

<div ng-controller="studentController"  > 
        <table  class="profile-info">
        <tr><th>Roll No</th>
            <th>Class</th>
            <th>Section</th> 
            <th>Sports</th>  
            <th>other Interests</th>
        </tr>
        <tr ng-repeat = "student in students | unique = 'RollNo' ">      
            <td>{{ student.RollNo }}</td>              
            <td>{{ student.Class }}</td>              
            <td>{{ student.Section }}</td>              
            <td>{{ student.Sports }}</td>              
            <td>{{ student.otherInterests }}</td>              
        </tr>                  
        </table>
        </div>

Answer 8

Utilize ng-repeat for the tr instead of div

<div ng-controller="studentController"  > 
        <table  class="profile-info">
        <tr><th>Roll No</th>
            <th>Class</th>
            <th>Section</th> 
            <th>Sports</th>  
            <th>other Interests</th>
        </tr>
        <tr ng-repeat = "student in students | unique = 'RollNo' ">      
            <td>{{ student.RollNo }}</td>              
            <td>{{ student.Class }}</td>              
            <td>{{ student.Section }}</td>              
            <td>{{ student.Sports }}</td>              
            <td>{{ student.otherInterests }}</td>              
        </tr>                  
        </table>
        </div>

Answer 9

Answer №5

To view the errors, open your DevTools by pressing F12. It is likely that the issue is simply a typo in your JSON File.

[{ "Class" : 1, "RollNo" : 1, "Section" : "A", "Sports" : "Football", "otherInterests" : "Music"},
{ "Class" : 12, "RollNo" : 2, "Section" : "B", "Sports" : "Counter-Strike", "otherInterests" : "Music", }]

Answer 10

To view the errors, open your DevTools by pressing F12. It is likely that the issue is simply a typo in your JSON File.

[{ "Class" : 1, "RollNo" : 1, "Section" : "A", "Sports" : "Football", "otherInterests" : "Music"},
{ "Class" : 12, "RollNo" : 2, "Section" : "B", "Sports" : "Counter-Strike", "otherInterests" : "Music", }]

Answer 11

Answer №6

There are a couple of issues with your code. First, the ng-repeat should be on a tr tag instead of a div.

Secondly, you're using $http.get(...).success when you should be using $http.get(...).then

Answer 12

There are a couple of issues with your code. First, the ng-repeat should be on a tr tag instead of a div.

Secondly, you're using $http.get(...).success when you should be using $http.get(...).then

I'm a beginner with Angularjs and I attempted to populate multiple JSON values, but unfortunately, it didn't work as expected

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

Manipulate SVG elements by dragging them along the boundary of the path

Struggling to retrieve data from a JSON array structure in CodeIgniter

Methods for concealing the title and date when printing web content using JavaScript

How can I save files to the ~/Documents directory using Node.js on my Mac computer?

Implementing a function in ReactJS that is activated by multiple buttons

Converting a PHP variable to JSON in an AJAX call

Display contents from a JSON file

Utilize moment.js to format a datetime and display the corresponding timezone

Having trouble utilizing Reactjs Pagination to navigate through the data

Tips for dynamically passing parameters to functions in JavaScript?

Strip ï»¿ symbol out of json output

Ways to conceal a grid item in Material UI framework

Manipulating a textarea in jQuery by inserting a string and selecting a specific portion of it

The method of altering a menu link in WordPress using jQuery varies according to whether the user is logged in or not

Need some assistance with Javascript Ajax? Specifically, dealing with multiple values?

What is the best way to extract a particular key value from a JSON object?

Prevent users from adding or removing any letters

"Error message: Antd datepicker is throwing an error stating that date.clone/date.load is not a

Jenkins encountered an issue where script execution was blocked on <URL> due to the document's frame being sandboxed without the 'allow-scripts' permission set

JavaScript parameter not found