No content rendered on the webpage using Angular, as the data in the array is not being clearly displayed

Feeling lost as to why my web page isn't displaying anything using ng-repeat with template.

Take a look at this image showcasing the data

Here is a snapshot of my console.log output featuring an array of objects

Can't figure out why it's not showing up on the webpage!

Devices:  Array[17] 
  0 : Object
    Aid :  "....."
    ...
  1 : Object 

Angular controller with function

(function () {
  'use strict';

  angular.module('app').controller('DeviceController', DeviceController);

        function DeviceController($http){
            var vm = this;
            var dataService = $http;
            //dataService.get("/api/Product")

            vm.devices = [];

        deviceList();

        function deviceList() {
            dataService.get("http://localhost:42822/api/device")
            .then(function (result) {
                vm.devices = result.data;
                //debugger;
                console.log(vm.devices);
            },
            function (error) {
                handleException(error);
            });
        }


        function handleException(error) {
            alert(error.data.ExceptionMessage);
        }

  }



 })(); 

HTML

<html>

<head> </head>

<body>
    <div ng-app="app" ng-controller="DeviceController as vm">
            <div>test</div><br>

        <table>
            <tbody>
                <tr ng-repeat="device in vm.devices">
                    <td>{{device.Aid}}</td>
                    <td>{{device.DeviceId}}</td>
                </tr>
            </tbody>
        </table>


    </div>
</body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>

<!--<script src="~/Scripts/angular.min.js"></script>-->
<script src="./app/app.module.js"></script>
<script src="./app/device.controller.js"></script>



</html>

Still puzzled as to why the content won't display on the webpage!

Answer №1

Since the data is located inside the Devices object of the response, it's necessary to adjust the assignment in the ajax resolve function as shown below.

vm.devices = result.data.Devices;

It would be recommended to modify the server response so that instead of sending the Devices collection within a Devices object, it should be directly included in the response.


Alternatively, you can also make changes directly in the HTML, although this may not be the most efficient approach.

<tr ng-repeat="device in vm.devices.Devices">
    <td>{{device.Aid}}</td>
    <td>{{device.DeviceId}}</td>
</tr>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Struggling to incorporate AJAX functionality into my Django forum application for submitting questions

I developed a forum application where users can post their questions. I encountered an issue where the page reloads each time a user posts a comment for a question. I attempted to use ajax to solve this problem but it was unsuccessful. Here is an example ...

Angular 6: encountering difficulty in setting up component routes (from root to child) when creating separate modules

As a newcomer to Angular, I'm encountering some difficulties in defining child routes in Angular. I'm not sure where I'm going wrong. When I try to create a separate module for the child components, I run into issues when defining the routes ...

I'm experiencing an issue with loading the GeoJSON file on my localhost

I included this vector into my local host code, but the JSON file does not seem to load. geojson_layer = new OpenLayers.Layer.Vector("features", { projection: epsg4326, strategies: [new OpenLayers.Strategy.Fixed()], pro ...

What could be causing the oncomplete() method of OmniFaces Ajax utility to fail when triggered by the preRenderView event?

During my preRenderView event, I attempt to use the OmniFaces Ajax utility's oncomplete() method to run some javascript on the client side. However, after testing this feature, I noticed that the javascript is not actually being executed on the client ...

What steps can I take to safeguard my Javascript from unauthorized access by external entities?

Basically, I have a website with a Javascript library that has ads integrated through a script tag. My main concern is whether these ads can access my Javascript library, which makes Ajax calls to a server where the user is logged in. I want to protect my ...

Transfer the scroll top value from a textarea to a div element

In the parent div, there is a div and a textarea. I am attempting to synchronize the scrollTop value of the textarea with the div so that they move together when scrolling. The issue arises when I input text into the textarea and hit enter for a new line. ...

Prevent automatic scrolling to anchors when using router.push() in Next.js

When using the latest version 10.2 of next, every time a URL with a hash is pushed to the router, next.js automatically jumps to the anchor element. import {useRouter} from 'next/router' router.push('/contact#about-us'); This behavior ...

PHP failing to deliver response data in AJAX request

I'm really stumped on this one. I can't seem to figure out why this code isn't working, even though everything seems right. Here's what I have: On my basic HTML page, I have a JQuery script that makes an AJAX call to a PHP script in th ...

Guide to setting up a TreeView with default expansion

When using a @mui TreeView, all nodes are initially collapsed by default. I am trying to figure out how to have all nodes expanded by default, but haven't been successful so far. I attempted to create a method called handleExpandAll, but it doesn&ap ...

A guide on updating an item in a basic JavaScript file with Node.js

This query pertains to Workbox and Webpack, but no prior knowledge of these libraries is necessary. Background Information (Optional) Currently using the InjectManifest plugin from Workbox 4.3.1 (workbox-webpack-plugin). While this version provides the o ...

Implementing expiration dates or future dates with jQuery

How can I modify this jQuery code to display an expiration date specified in months or years? For instance, I have created a Membership Card for a client that is valid for 2 years, and I would like to include an expiration date in the script. Thank you j ...

Using AngularJS with CDN: A beginner's guide

If I need to create an app using AngularJS with Cordova in Visual Studio, do I need anything else besides the Google CDN for AngularJS? <!doctype html> <html ng-app> <head> <title>My Angular App</title> <script s ...

dynamically adjust table cell width based on number of rows

My HTML structure is as follows: <table border=1 > <tr> <!--this tr has one <td> that needs to be 100% width--> <td></td> </tr> <tr> <!--this tr has two <td> that each need to be ...

Caution: npm installation warns about potential issues

After encountering some WARN messages, I attempted to update npm by running npm audit fix However, this resulted in even more WARN messages. When I tried to install all dependencies using npm i I was bombarded with a plethora of WARN messages (see below) ...

Transforming the typical click search into an instantaneous search experience with the power of Partial

I am working on a form that, when the user clicks a button, will display search results based on the entered searchString. @using (Html.BeginForm("Index", "Search")) { <div id="search" class="input-group"> @Html.TextBox("searchString", n ...

Guide to Embedding StencilJS components in a Storybook React Application

I am currently in the process of integrating Stencil and Storybook within the same project. While following this setup guide and this one, I encountered a step that requires publishing the component library to NPM, which is not my desired approach. In my ...

Using Angular.js to make an Ajax request with a callback function within an ng-repeat element

At the moment, I am delving into Angular.js coding and working on a project that involves loading data through Ajax queries. In simple terms, my data is organized in three levels: -- Skills --- Indicators ---- Results My initial request focuses on tra ...

modify input type in Reactjs based on boolean state dynamically

I am currently working on implementing a checkbox feature that allows users to toggle between viewing their password or keeping it hidden. I decided to use Material UI React for the user interface elements. The checkbox is set up and functioning properly. ...

Issue with Google charts tooltip displaying literal strings when applied across all fields

this question is quite straightforward. It is inspired by the pie chart example found on the google charts playground Could someone please explain why this code snippet works: function drawVisualization() { // Create and populate the data table. var ...

Why do React components require immutable props when values are passed by value regardless?

I am not deeply knowledgeable in JavaScript, so I have been experimenting with some code: var demo = 'test'; var obj = { x: 'abc' } function foo(str) { str += '_123'; ...