Using ng-repeat with an AJAX-called JSON is not possible

I've been struggling with handling JSON data from an AJAX call and displaying it using ng-repeat.

If you want to take a look at my code in a more organized way, I've shared it on http://jsfiddle.net/7quj9omw/. However, please note that the code is not complete and may result in errors due to the local URL for the AJAX call.

The issue I'm facing is that I can retrieve the JSON object just fine - when I console.log(EventsService.Todos()) in my EventsController, it logs out the JSON object without any problems. But when trying to use ng-repeat in the markup to display the data, it doesn't work.

Interestingly, if I directly paste the JSON into my code, it works perfectly. I suspect there might be a parsing problem, as I have already tried using PARSE.json on my variable without success.

Could it be that I am doing something wrong while passing data from my service all the way to the ng repeat in my HTML markup?

If anyone has any insights or suggestions, I would greatly appreciate it. Thank you.

EDIT:

[  
     {  
        "id":"26",
        "idDeles":"zCNTdU",
        "data":"2015-02-21",
        "titulo":"Didge Steakhouse Pub ",
        "descricao":"Noite de sábado no Didge Steakhouse Pub em Balneário Camboriú. ",
        "fotografo":"Mariana Haag",
        "fonte":"http:\/\/night.com.br\/fotos\/zCNTdU",
        "status":"1",
        "quantidadeFotos":"78",
        "views":"0",
        "thumb":"http:\/\/night.com.br\/arquivos\/casas\/50\/fotos\/24790\/tb\/0001_img_0020.jpg"
     },
     {  
        "id":"25",
        "idDeles":"zqNTdU",
        "data":"2015-02-21",
        "titulo":"Showbol Arena ",
        "descricao":"Noite de sábado no Showbol Arena em Itajaí. ",
        "fotografo":"Adivasson Correa",
        "fonte":"http:\/\/night.com.br\/fotos\/zqNTdU",
        "status":"1",
        "quantidadeFotos":"165",
        "views":"0",
        "thumb":"http:\/\/night.com.br\/arquivos\/casas\/181\/fotos\/24788\/tb\/0001_img_0010.jpg"
     }
  ]
javascriptjsonangularjsangularjs-ng-repeationic-framework

Answer №1

Check out this JSFiddle where I had to download the json file you provided since I couldn't access the URL in the code.

angular.module('nightbcApp', [])
.factory('EventService', function($http, $q) {
    return {
        Todos: function() {
            var defer = $q.defer();
            $http.get("http://localhost/td.json")
                .success(function(data){
                    defer.resolve(data);
                })
                .error(function(response){
                    defer.reject(response);
                });
            return defer.promise;
        }
    };
})
.controller('EventsController', function($scope, EventService) {
    EventService.Todos().then(function(data) {
        $scope.Eventos = data;
    });
})

Learn more about Angular $q here

Answer №2

Try enclosing the a and img tags within a div and applying the ng-repeat on that container. It might help to resolve the issue.

Update: I just realized not assigning could cause problems. If it's still not working, consider nesting the ng-repeat inside a div around the IMG and a tags as I've encountered issues with using ng-repeat directly on those elements before.

Answer №3

Updated response:

$http.get("http://10.1.1.5/nightbc/public/index/phonegap-eventos")
                        .success(function (response) {
                            return response.data;
                        }).error(function (response) {
                           return error;
                        });

Consider appending .data to the response object and check if it resolves the issue.

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

Utilize Next JS pages api to generate dynamic routes based on unique ids

In the content of my website, there is a collection of objects named stories that are displayed as an array. Additionally, I have a section where each individual story is showcased in detail. I intend to enable users to click on any story link within the ...

javascriptasync-awaitgraphqlnext.jsnextjs-dynamic-routing

Sequelize cannot locate the specified column in the database

click here for image description I encountered an issue where a column was not recognized after migrating with sequelize-cli. Even though all the columns are defined in the migration file, this error keeps appearing. Additionally, when trying to create a ...

javascriptpostgresqlexpresssequelize.js

Server-side WebSocket doesn't appear to be successfully transmitting messages to the frontend

Using NodeJs with Fastify on the backend in a local environment: Server side: ////// Setting up the app const fastify = require('fastify')({ logger: true }); const path = require('path'); fastify.register(require('@fastify/static& ...

javascriptnode.jswebsocketfastify

Using Selenium Webdriver to set a cookie with a Chrome extension

I have been experimenting with a Chrome extension in order to set a cookie when I use a Selenium Webdriver instance to open a page. Despite trying various methods suggested on different Stack Overflow posts, none of them seem to work as the cookie does not ...

javascriptgoogle-chromeselenium-webdrivergoogle-chrome-extension

Utilizing JsonUtility in Unity to generate JSON output of a class containing a customized sub-component

I have been facing a challenge in printing a JSON object that contains another nested object along with native C# variables to form a nested JSON structure. The issue arises when I add the custom object - only the InstanceID of the inside object gets print ...

c#jsonunity-game-engine

Why is the startsWith function not returning the expected result in my code? What could be causing this issue?

I have a code snippet that sorts a list based on user input, but it fails if the user's input contains spaces. How can I modify the code to handle inputs with spaces without removing the spaces between characters? For example, if the user input is &ap ...

javascriptjsonsortingcomparestring-comparison

Modifying the AngularJS class based on URL parameters

Is there a way to dynamically change the class of an element based on the URL fragment when switching between pages? I am currently using $routeProvider for routing in my code, and while it works fine, the issue arises when the class doesn't update up ...

angularjs

Exploring the relationship between $resource and controllers

I am currently working on deciphering the code snippets below. From what I gather, there are three resource objects - CategorySrv, ArticleSrv, and SearchSrv that interact with REST server data sources. app.factory('CategoryService', function($re ...

javascriptangularjs

Encoding the data set into a JSON format while categorizing it into

I'm currently developing an angular and nodejs application that requires data from sql in json format to be grouped in a tree-like manner. I have successfully retrieved the data in json format, but now I need it organized in a specific way. Is there a ...

sqlangularjsjsonnode.jstedious

Having trouble with importing a TypeScript class: encountering a "cannot resolve" error message

Could you lend me your expertise? I'm puzzled by this issue that seems to be quite simple and straightforward: export class Rectangle { height: number = 0 width: number = 0 constructor(height: number, width: number) { this. ...

javascripttypescriptclassimport

Discovering ways to verify if an array is empty within JSON data using JMESPath?

I am presenting JSON data that looks like this: [ { "id": "i_1", "name": "abc", "address": [ { "city": [ "city1", "city2" ] }, { "city": [ "city1", "city2" ...

javascriptjsonjmespath

JavaScript code in AJAX response functions properly in browsers like Firefox, Chrome, and Opera. However, it encounters issues in Internet Explorer 11, displaying an error message stating

After searching through various posts, I was unable to find a solution to my question. My query involves requesting a jQuery Datepicker via AJAX. I have provided an example for you to review in Firefox, Chrome or Opera: Ajax javascript example Unfortuna ...

javascriptjqueryajaxinternet-explorer-11

The functionality of nested dynamic routing in the API is experiencing issues

Looking to extract product details from a specific category of products? My folder structure appears as follows: https://i.stack.imgur.com/1UCy3.png In "productId/index.jsx" => This snippet is utilized to retrieve individual product details: ...

javascriptreactjsnext.js

Issues with Angular updating the *ngFor Loop

I'm looking to showcase a lineup of upcoming concerts in my HTML, sourced from a web API (which is functioning correctly). The API is encapsulated within a ConcertService: @Injectable({ providedIn: 'root' }) export class ConcertService { ...

javascriptangular

Issue with third-party react module (effector) causing Webpack error

UPDATE: After struggling with my own custom Webpack setup, I decided to switch to using react-scripts, and now everything is compiling smoothly. It seems like the issue was indeed with my Webpack/Babel configuration, but I still can't pinpoint the exa ...

javascriptreactjswebpackbabeljseffector

What is the best way to implement a scrollbar in a specific div rather than the entire window?

Hey everyone! So, I have this window in electronJS with a div where I'm dynamically adding elements using Javascript and the function --> document.createElement('section'). Here's the loop in Javascript to add these elements: for (var ...

javascripthtmlcss

What causes Chrome Extension Images to appear broken when they are inserted into the DOM?

Currently working on a Chrome extension, I am attempting to insert a div with a background image into the DOM using a content script. The CSS is loading correctly, and upon inspecting the Developer Tools, the image URL appears to be correct. $('.clos ...

javascriptjqueryhtmlcssgoogle-chrome-extension

Create a data attribute object and assign to it the prop object received from the parent component

I am struggling with passing an object as a prop from a parent component and then utilizing it to initialize the child component with the received value. The main objective behind this is to create a dialog box that includes a child form component with mu ...

javascriptvue.jsvue-props

Script on the server side fails to execute following validation of form

Hey there, I'm struggling with my signup form. I want to submit the form using ajax after completing validation. I've used a jQuery plugin for validation, but whenever I click on any field, the ajax request is automatically sent to the server and ...

javascriptphpjqueryajaxvalidation

What is the method for displaying html files in a POST request?

This is the code snippet I am working with: app.post('/convert', function(req,res){ var auxiliar = "somo Ubuntu command line(this works)"; exec(auxiliar, function(err, stdout, stderr){ if(err){ console.log ...

javascripthtmlnode.jsexpress