Having trouble creating a table using a JSON object in AngularJS

Question

Having trouble creating a table using a JSON object in AngularJS

Click here to view the converted JSON object

Please pay close attention to my question

Hello, in the code below I am attempting to convert XML data into a JSON object. With this converted JSON object, I am aiming to create a table using AngularJS. The issue arises when trying to load individual attributes of the JSON object such as {{employee.EmpId}}. Upon observation, I noticed that when theconverted JSON object is directly assigned:

$scope.Employees = { "Employee": [ {"EmpId": "4", "Name": "Chris", ...

The output aligns with my expectations. However, when I assign it as follows:

i.e., $scope.Employees = response.data; It does not work as expected. What might be causing this issue? Here, 'response.data' represents the result obtained from the success function.

Click here for the converted JSON object

https://i.sstatic.net/nwZ6a.png https://i.sstatic.net/shkh3.png

javascript angularjs json xml

Answer 1

Answer №1

Take a look at this straightforward example that makes use of the provided json data:

HTML

<html xmlns="http://www.w3.org/1999/xhtml" ng-app="myApp">
<head runat="server">
    <title></title>
</head>
<body ng-controller="myController">
    <div>
        <table>
            <thead>
                <tr>
                    <th>EmpId</th>
                    <th>Name</th>
                    <th>Sex</th>
                    <th>Phone</th>
                    <th>Address</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="employee in json.Employee">
                    <td>{{employee.EmpId}}</td>
                    <td>{{employee.Name}}</td>
                    <td>{{employee.Sex}}</td>
                    <td>{{employee.Phone[0].__text}}</td>
                    <td>{{employee.Address.Street}}</td>
                </tr>
            </tbody>
        </table>
    </div>
    <script src="scripts/angular.js"></script>
    <script src="scripts/app.js"></script>
</body>
</html>

JavaScript

(function () {
    angular.module('myApp', [])

    .controller('myController', function ($scope) {

        $scope.json = { "Employee": [{ "EmpId": "4", "Name": "Chris", "Sex": "Male", "Phone": [{ "_Type": "Home", "__text": "564-555-0122" }, { "_Type": "Work", "__text": "442-555-0154" }], "Address": { "Street": "124 Kutbay", "City": "Montara", "State": "CA", "Zip": "94037", "Country": "USA" } }] };


    })

}());

Answer 2

Take a look at this straightforward example that makes use of the provided json data:

HTML

<html xmlns="http://www.w3.org/1999/xhtml" ng-app="myApp">
<head runat="server">
    <title></title>
</head>
<body ng-controller="myController">
    <div>
        <table>
            <thead>
                <tr>
                    <th>EmpId</th>
                    <th>Name</th>
                    <th>Sex</th>
                    <th>Phone</th>
                    <th>Address</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="employee in json.Employee">
                    <td>{{employee.EmpId}}</td>
                    <td>{{employee.Name}}</td>
                    <td>{{employee.Sex}}</td>
                    <td>{{employee.Phone[0].__text}}</td>
                    <td>{{employee.Address.Street}}</td>
                </tr>
            </tbody>
        </table>
    </div>
    <script src="scripts/angular.js"></script>
    <script src="scripts/app.js"></script>
</body>
</html>

JavaScript

(function () {
    angular.module('myApp', [])

    .controller('myController', function ($scope) {

        $scope.json = { "Employee": [{ "EmpId": "4", "Name": "Chris", "Sex": "Male", "Phone": [{ "_Type": "Home", "__text": "564-555-0122" }, { "_Type": "Work", "__text": "442-555-0154" }], "Address": { "Street": "124 Kutbay", "City": "Montara", "State": "CA", "Zip": "94037", "Country": "USA" } }] };


    })

}());

Answer 3

Answer №2

Make the following adjustments to your code.

<div ng-app><div ng-controller="httpController">
  <div>
    <table>
      <tr ng-repeat="employee in Employees.Employee">
        <td>{{employee.EmpId}}</td>
        <td>{{employee.Name}}</td>
        <td>{{employee.Phone._Type}}</td>
        <td>{{employee.Phone.__text}}</td>
        <td>{{employee.Address.Street}}</td>
        <td>{{employee.Address.State}}</td>
        <td>{{employee.Phone.Zip}}</td>
        <td>{{employee.Phone._text}}</td>
        <td>{{employee.Address.Country}}</td>

      </tr>
    </table>
  </div>

Answer 4

Make the following adjustments to your code.

<div ng-app><div ng-controller="httpController">
  <div>
    <table>
      <tr ng-repeat="employee in Employees.Employee">
        <td>{{employee.EmpId}}</td>
        <td>{{employee.Name}}</td>
        <td>{{employee.Phone._Type}}</td>
        <td>{{employee.Phone.__text}}</td>
        <td>{{employee.Address.Street}}</td>
        <td>{{employee.Address.State}}</td>
        <td>{{employee.Phone.Zip}}</td>
        <td>{{employee.Phone._text}}</td>
        <td>{{employee.Address.Country}}</td>

      </tr>
    </table>
  </div>

Answer 5

Answer №3

Your code has a secondary problem that needs attention. The response data can be found within response.data. Therefore, in addition to verifying the validity of your JSON, you must implement the following statement:

$scope.Workers = response.data

Answer 6

Your code has a secondary problem that needs attention. The response data can be found within response.data. Therefore, in addition to verifying the validity of your JSON, you must implement the following statement:

$scope.Workers = response.data

Answer 7

Answer №4

Additional note following my previous response regarding response.data. I haven't found the correct solution for your JSON object yet, so here is a comprehensive answer:

When using ng-repeat, it requires a list of items to iterate over. You need to remove the surrounding 'Employee' wrapper from your JSON, like this:

$scope.Employees = [
                     {"EmpId": "4", "Name": "Chris", "Sex": "Male", "Phone": [ { "_Type": "Home", "__text": "564-555-0122" }, { "_Type": "Work", "__text": "442-555-0154" } ], "Address": { "Street": "124 Kutbay", "City": "Montara", "State": "CA", "Zip": "94037", "Country": "USA" } },
                     {"EmpId": "5", "Name": "Chris", "Sex": "Male", "Phone": [ { "_Type": "Home", "__text": "564-555-0122" }, { "_Type": "Work", "__text": "442-555-0154" } ], "Address": { "Street": "124 Kutbay", "City": "Montara", "State": "CA", "Zip": "94037", "Country": "USA" } }
                   ]

(I've included an additional Employee with ID 5 in the example above, but even one employee would suffice as long as they are enclosed within a list ([]).

You can utilize the following code with this JSON object:

 <tr ng-repeat="employee in Employees">
     <td>{{ employee.EmpId }}</td>
     <td>{{ employee.Name }}</td>
     <td>etc ...</td>
 </tr>

Ensure that your JSON follows this structure, with comma-separated objects within a list.

Retrieve data in this JSON format from your get request, and remember to extract data from response.data rather than response.

Answer 8

Additional note following my previous response regarding response.data. I haven't found the correct solution for your JSON object yet, so here is a comprehensive answer:

When using ng-repeat, it requires a list of items to iterate over. You need to remove the surrounding 'Employee' wrapper from your JSON, like this:

$scope.Employees = [
                     {"EmpId": "4", "Name": "Chris", "Sex": "Male", "Phone": [ { "_Type": "Home", "__text": "564-555-0122" }, { "_Type": "Work", "__text": "442-555-0154" } ], "Address": { "Street": "124 Kutbay", "City": "Montara", "State": "CA", "Zip": "94037", "Country": "USA" } },
                     {"EmpId": "5", "Name": "Chris", "Sex": "Male", "Phone": [ { "_Type": "Home", "__text": "564-555-0122" }, { "_Type": "Work", "__text": "442-555-0154" } ], "Address": { "Street": "124 Kutbay", "City": "Montara", "State": "CA", "Zip": "94037", "Country": "USA" } }
                   ]

(I've included an additional Employee with ID 5 in the example above, but even one employee would suffice as long as they are enclosed within a list ([]).

You can utilize the following code with this JSON object:

 <tr ng-repeat="employee in Employees">
     <td>{{ employee.EmpId }}</td>
     <td>{{ employee.Name }}</td>
     <td>etc ...</td>
 </tr>

Ensure that your JSON follows this structure, with comma-separated objects within a list.

Retrieve data in this JSON format from your get request, and remember to extract data from response.data rather than response.

Having trouble creating a table using a JSON object in AngularJS

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Tips for querying MongoDB schemas that reference other schemas in the field?

What is the best way to bind a model to a directive in Angular.js?

"How to troubleshoot installation errors when installing Angular on Ubuntu using

Converting XML to JSON with the help of XSLT transformation

The function .then is not compatible with AngularJS

What is the best way to select and link a specific section of a string using Javascript?

Tips for utilizing a variable selector with jQuery's .attr() method

use the fetch api to send a url variable

Encountering an ELIFECYCLE error in Usemin while attempting to target multiple HTML files

Creating a Form Layout with Bootstrap - Organizing Text Boxes and Text Areas

Enhancing your JQuery Select2 plugin by incorporating a Checkbox feature

Guide on transferring Vue form input data to Adonis controller through an http request

Displaying a URL inside a div upon clicking a specified href link in an Angular application

Converting a string to JSON format in the presence of a JSON payload enclosed within another JSON wrapper

Display an assortment of various categories once every other time

What is the best way to centrally align a Card while keeping the text left-aligned?

What is the best way to insert a JsonObject into a JsonArray that I need?

Get the name of the array using JavaScript

What is the method for transforming a string containing the name of an array into a format that can be displayed in a Vue.js template?

"Unlocking the secret to fetching the id of the clicked element within a Highchart context menu