What is the reason for md-grid-list not being created from an HTTP request?

I am trying to make an HTTP request to fetch a JSON data and then use it to dynamically generate an md-grid-list. However, I am encountering issues with this process.

The HTTP request is written in my controller.

Interestingly, if I substitute md-grid-list with other standard elements like table and td, it works perfectly fine. Similarly, if I render another standard element using the JSON elsewhere in the code, for instance a simple text like {{posterPlaying.posters}}, it also works without any problems.

Why is this happening? It seems there might be some specific characteristics of md-grid-list causing this issue.

Here is the HTML snippet:

<md-content layout="row" ng-controller="posterPlayingController as posterPlaying" id="poster-page">

    <md-content layout="column" id="poster-container">
        <md-grid-list
            md-cols-sm="2" md-cols-md="4" md-cols-gt-md="6"
            md-row-height-gt-md="2:3" md-row-height="2:3"
            md-gutter="8px" md-gutter-gt-sm="4px" >
            <md-grid-tile ng-repeat="poster in posterPlaying.posters"
                          md-rowspan="{{poster.span.row}}"
                          md-colspan="{{poster.span.col}}"
                          md-colspan-sm="1"
                          ng-class="poster.background" >
                <md-button aria-label="" class="poster-button" ng-click="showVote($event)">

                      <img src="{{poster.image}}" class="md-card-image poster-card-image" alt="Washed Out">
                </md-button>
            </md-grid-tile>
      </md-grid-list>
</md-content>

Here is the services.js file:

(function (angular, undefined) {
    "use strict";
    angular
        .module('services', ['ngResource'])
        .factory('Poster', Poster);

    Poster.$inject = ['$resource'];
    function Poster($resource) {
        return $resource('data/posters.json', {}, {
            query: {
                method: "get",
                params: {},
                isArray: true
            }
        })
    }
})(angular);

Snippet from posterPlayingController:

vm.posters = Poster.query(function (response) {
            var data = response.map(function (item, index, array) {
                item.position = item.id % 2;
                if (item.id % 5 == 0) {
                    item.span = {
                        'row': 2,
                        'col': 2
                    }
                } else {
                    item.span = {
                        'row': 1,
                        'col': 1
                    }
                }
                return item;
            });
            return data;
        });

Answer №1

The issue seems to be related to how the success function is being passed in the query method. To clarify, the query method requires the following arguments:

Resource.action([parameters], [success], [error])
. Therefore, you should utilize either
Poster.query(null, function () {})
or
Poster.query().$promise.then(function() {})
.

It's important to note that this question primarily concerns the resource aspect, rather than mdGridList.

Furthermore, keep in mind that the query method is already included in $resource by default, so there's no need to add it when invoking $resource().

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

Change the color of specific elements in an SVG using React

Can I change the dynamic primary color from ReactJS to a specific class in an SVG file? If yes, how can it be done? Error.svg <!-- Generator: Adobe Illustrator 26.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <svg version="1.1&qu ...

Guide to using Ajax to load a partial in Ruby on Rails

Whenever a search is triggered, I have a partial that needs to be loaded. This partial can take a significant amount of time to load, so I would prefer it to be loaded via Ajax after the page has fully loaded to avoid potential timeouts. Currently, my app ...

Issue: The variable does not appear to be getting updated

After spending the last 2 hours analyzing this JS code, I am still unable to figure out why the variable "message" is not being changed to "User already exists." The bizarre thing is that the code block labeled "Inside first if" is executed, but the "mes ...

Comparing the use of $injector against directly injecting a service

I am curious about the difference between using $injector.get('someService') and directly injecting a service. Can you explain the distinction in the two code snippets below? angular .module('myApp') .controller('MyContro ...

Steps to retrieve data (token) from developer tools and incorporate it into a fetch Post request

Is there a simple way to extract data using dev tools and insert it into a fetch request? I am trying to make a POST request through the console, but I am struggling to correctly copy a token. I attempted to use querySelector but instead of finding the t ...

Issues with executing the success function in AngularJS `$http` requests

Has anyone encountered an issue with receiving HTTP response from a Django local server that returns a JSON output? The JSON response looks like this: [{"fields": {"DOB": "2015-05-08", "image": "media/jainsubh_1394437734_6.png", "text_file": "my_Txt_File ...

Is there a way to invoke a jQuery function from an ASP.NET environment?

I'm having trouble figuring out how to properly invoke a jQuery function. ScriptManager.RegisterStartupScript(GetType(), "Javascript", "countdown(); ", true); The issue is that it attempts to call the method inline, preventing it from executing the ...

Using Angular JS to redirect in an Express JS application

When using AngularJS, I make an http get request like this: $http.get('/api/users?id='+userID) If the request is unauthorized, I redirect with a status code from ExpressJS like this: res.status(401).location('/login').end(); But for ...

Retrieving a compilation of items found within text selected by the user on a website

Imagine a scenario in which a webpage contains the following structure: <p> <span class="1">Here's some text</span> <span class="2">that the user</span> <span class="3">could select.</span> </p> I ...

Can someone please explain how to prevent Prettier from automatically inserting a new line at the end of my JavaScript file in VS Code?

After installing Prettier and configuring it to format on save, I encountered an issue while running Firebase deploy: 172:6 error Newline not allowed at end of file eol-last I noticed that Prettier is adding a new line at the end when formatting ...

"Concealing Querystrings in Node.js and AJAX: A Step-by-Step

I want to create a simple login form using the ajax Post method. However, I am having issues with the querystring still appearing in the URL. Can anyone help me resolve this issue? Thank you for any assistance! [ https://i.stack.imgur.com/R76O4.png http ...

The v-for loop seems to be malfunctioning in my Nuxt 3 project

I have a script with mock data stored in a variable named whatsHappeningItems, and I am trying to pass this data as a reference to a card component using v-for="whatsHappening in whatsHappeningItems". However, when I do this, I encounter the following erro ...

I am facing an issue where the text I included is not appearing on the website that

While developing a React version of my online portfolio, I encountered an issue. Once deployed on GitHub pages, the text on my landing and contact pages disappeared. Despite removing the background image thinking it might be hiding the text, the issue pers ...

Obtain a range of dates within a specified timeframe by utilizing JavaScript

Is there a way in JavaScript to retrieve a list of days between two dates in MySQL format without using any libraries? Here is an example of how it can be done: function generateDateList(from, to) { var getDate = function(date) { //MySQL Format ...

Firefox unable to be imported into Pytractor

I am currently experimenting with pytractor. When I try to use the import statement from pytractor.webdriver import Firefox Both Firefox and Chrome are not being referenced or found. Interestingly, in the pytractor instructions and examples there seems ...

What is the method for sending a file using JavaScript?

var photo = 'http://cs323230.vk.me/u172317140/d_5828c26f.jpg'; var upload_url = 'http://cs9458.vk.com/upload.php?act=do_add&mid=62..'; var xmlhttp = getXmlHttp(); var params = 'photo=' + encodeURIComponent(photo); xmlhttp ...

I'm having trouble getting the [resetFilterOnHide]="true" functionality to work with primeng 5.2.7. Can anyone provide a solution for this issue?

I'm experiencing an issue with the p-dropdown component where the [resetFilterOnHide]="true" attribute isn't working as expected. When I type in the filter bar, close the dropdown by clicking outside of it, and then reopen it, the entered filter ...

Get the value of the button that has been clicked

I have a query regarding building a website that can be started via PowerShell. The PowerShell HTML code I am using is: $proxys = "" foreach ($email in $ADObj.proxyAddresses){ $proxys += "<button id='$email' name='alias&apo ...

Language setting required for dijit.form.DateTextBox

I am attempting to create a calendar control dynamically using Dojo 1.5 and set the language to Spanish, but so far I have been unsuccessful. I tried using "lang:es-es" among other things with no success... here is the element: <input type="text" const ...

finding the source file or code where a particular html element is being generated

In the HTML file I have, there are multiple JavaScript files added. Whenever I run the HTML file, a title tag is automatically created in my HTML file. I do not want this title tag to appear in my HTML file. How can I prevent this from happening? Or how c ...