The AngularJS line chart directive is not loading the $resource properly

Here we have a valuable resource that I'd like to share:

hq.factory('AvgUsersPerWeek', function ($resource) {
    return $resource('/HQ/Graph/GetLoggedinUsersPerWeek')
});

This is where the controller comes into play:

hq.controller('AvgUsersPerWeekCtrl', function ($scope, AvgUsersPerWeek) {

    $scope.xkey = 'Period';

    $scope.ykeys = ['CountUsers'];

    $scope.labels = ['Aantal'];

    $scope.myModel = AvgUsersPerWeek.query();

    /*
    //example dataset that works, the fetched data has the same structure
    [ 
    { "Period": "2013-04", "CountUsers": 2407 },
    { "Period": "2013-03", "CountUsers": 3351 },
    { "Period": "2013-02", "CountUsers": 2469 },
    { "Period": "2013-01", "CountUsers": 2246 },
    { "Period": "2012-12", "CountUsers": 3171 },
    { "Period": "2012-11", "CountUsers": 2155 },
    { "Period": "2012-10", "CountUsers": 1226 },
    { "Period": "2012-09", "CountUsers": 2245 }
    ]; */


})

It's worth noting that when I replace AvgUsersPerWeek.query() with the dataset below, everything functions correctly. So it seems something might be amiss with my resource (which is being fetched according to Fiddler). However, the value isn't showing up in my chart.

I've made sure that the example dataset matches the structure of the dataset retrieved by the $resource.

I won't include the HTML here since it's functional. My suspicion is that there's an issue with how I'm utilizing $resources.

Answer №1

It seems like you may be missing a callback in your resource handling. To resolve this, consider implementing the following code snippet within your controller:

AvgUsersPerWeek.query(function(data) {
    $scope.myModel = data;
  });

For more detailed information, refer to this page

If the data in your directive is not updating as expected, it might be beneficial to include a watcher or an attribute observer in the directive to ensure that the data reflects any changes from the underlying resource.

$attrs.$observe('data', function(newVal){
    console.log(newVal);
    // Additional code here
})

An updated version of the sample code can be found on jsfiddle

Update from the author of the question: I modified the directive to use:

$scope.$watch(attrs.data, function (newVal) { ...

With this change, everything is now functioning correctly. Thank you!

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

Tips for retrieving all values included in the <tr> tags within an html <table>

When the checkbox in the fourth column is clicked, I would like to retrieve all values of td. Additionally, I want to determine the smallest value between ID and Optional ID. <table><form method='GET'> <tr> <th>Name</t ...

Converting Three.js objects into arrays

I am new to Three.js and I want to add my 'palmtree' object to an array. I believe my code is correct, but something seems off. Here is the snippet of my code: var objects = []; var mtlLoader = new THREE.MTLLoader(); mtlLoader.load("objects/pal ...

Ways to ensure that v-model does not become "true" or "false" in an input checkbox using Vue

I am currently working on a filter popup that includes a list of checkboxes. By default, some items should be selected and others not selected. I have connected these checkboxes to an object array using v-model. My issue is that when I deselect and select ...

Utilize dropzone.js to transmit formData when sending multiple files simultaneously

I've been exploring the dropzone.js documentation/wiki and I noticed that there is no clear explanation on how to send form fields along with files. Recently, I came across the FormData object which provides a way to populate form fields within an ob ...

"Want to know the best way to retrieve the most recent form input value using jQuery or Javascript

I've been reading a lot about using jQuery to set and get field values, but I'm encountering an issue where I can't retrieve the value after submitting, editing it in an input field, and then submitting again. It works the first time, but no ...

Unable to modify/add/remove elements within table using Datatables and a complimentary editor

Currently, I am in the process of creating a table that can be edited with data in JSON format fetched through an AJAX call. To achieve this, I have opted to use the Datatables plugin in combination with the Free Datatables Editor from kingkode.com as I ne ...

Tips for loading a webpage based on the selected value of a JQuery dropdown list

I'm currently working on an ASPX webpage where I am developing a feature to create reports using filter criteria. To populate my dropdown list, I am using a jqxwidget which retrieves values from a variable I have defined: var sourceRptType = [ ...

AngularJS Date Formatting

I am facing an issue with binding a simple date object created in JavaScript to an input control using AngularJS. It seems like the problem might be related to the format of the date. Can you please help me understand why this happens? This problem specifi ...

Sorting the order of items for display through the Dropdown menu feature in Bootstrap

I'm working on an app that showcases recipes on the main page (mywebsite.com/recipes). I'd like to give users the option to sort the recipes by either date or popularity, with a button right on the page for easy selection. Currently, I'm usi ...

Troubleshooting: The issue with applying 'style' in react-draft-wysiwyg

Is there a way to style my textboxes within a rectangle with a default height? I attempted to use the style attribute in my <Editor /> but it didn't work. import { Editor } from "react-draft-wysiwyg"; import { EditorState } from " ...

How can one ensure that Discord waits for a script to complete running, and how can you prevent Discord from responding until all necessary data has been obtained?

I recently started working with node.js and asynchronous programming, and I'm facing a challenge that has me puzzled. My goal is to create a Discord bot that fetches data from a third-party website. While I can successfully retrieve the data and see i ...

Is TypeScript the new replacement for Angular?

After completing a comprehensive tutorial on Angular 1.x, I decided to explore Angular 2 on angular.io. However, upon browsing the site, I noticed references to Typescript, Javascript, and Dart. This left me wondering if my knowledge of Angular 1.x is now ...

Tips for importing the mongoose-long plugin using the ES6 method

How can I rewrite the given import syntax into ES6 import format? import mongoose from 'mongoose'; import 'mongoose-long'(mongoose); import { Types: { Long } } from mongoose; ...

Dealing with a 404 Error using available resources

I'm using this Middleware to secure my get-route. function isAdmin(req, res, next) { if(req.user.role == "admin") { return next(); } return res.send(404); } Am I handling the error correctly? Here's how I make the API call: ...

Step-by-step guide on incorporating a hyperlink within a row using @material-ui/data-grid

I am currently using @material-ui/data-grid to showcase some data on my webpage. Each row in the grid must have a link that leads to the next page when clicked. I have all the necessary data ready to be passed, however, I am facing difficulty in creating a ...

What could be causing the dysfunction of the jQuery class adding function?

I'm new to using jQuery and I'm trying to add a class to the 'a' tag when the 'li' tag is clicked. However, it doesn't seem to be working as expected. $('.nav-item').click( function() { $(".nav-item a").re ...

React Table Pagination Bug with Material UI Library

I am currently using Material UI and referencing the table sample provided at https://material-ui.com/demos/tables/. However, when attempting to implement the Custom Table Pagination Action according to the sample, I encountered an error. The error "inher ...

Having trouble retrieving the selected value from a dropdown list with Jquery

In my current setup, I have a drop-down list situated within a pop-up modal. The dropdown menu is structured like this: <select name="EventTypeId" class="form-control formTextBox" id="ddlEventType"> <option value="">Please Select</optio ...

Debouncing form inputs in VueJS with LoDash debounce on the entire form

I'm currently experimenting with implementing LoDash debounce to detect when a user stops typing on a form and trigger an event accordingly. Looking for inspiration from this helpful guide However, my goal is to extend this functionality to cover al ...

What is the method to calculate the total length of all children within a JSON array?

In the dictionary provided below, I am looking to determine the total length of all notifications (4). [ { "name": "3 Bedroom Fixer Upper", "city": "Santa Rosa", "id": 1, "state": "CA", "date_added": "2/3/14", ...