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

The filtering function stops working after the initial use

As I develop an app using React and Redux, my goal for the following code snippet is to function as a reducer within the main application. I have imported a filterData function, which works seamlessly the first time any Action type is selected. However, it ...

javascriptreactjsreduxaxiosreducers

What could be the reason for the timeout function in my Angular application not working as expected?

I've created a basic controller to handle a countdown timer. Upon running the code, I notice that only one "tick" is displayed in the console. Ideally, I would like to see a "tick" every 5 milliseconds. .controller('Countdown', function($s ...

angularjs

What is the best method to activate a JavaScript function after 1 minute of user inactivity?

I need to set up a web page where a JavaScript function is activated after 1 minute of user inactivity. The page primarily features the <form> component. What's the best way to implement this type of function? ...

javascriptjquery

Determine the height of an element in JavaScript or jQuery by using the CSS property height: 0;

I'm facing a challenge in determining the actual height of an element, which currently has a CSS height property set to: height: 0; When I check the console, it shows a height of 0, but I'm looking to find the real height of the element. I als ...

javascriptjquerycssheight

Is it possible that ng-click gets filtered out by Angular's ng-bind-html?

I am currently working with HTML data that I am importing from a JSON file. To display this HTML data in my application, I am utilizing ngSanitize along with ng-bind-html. My goal is to transform any standard links in the JSON blob from: <a href="so ...

angularjs

Implementing React hooks to efficiently remove multiple items from an array and update the state

Looking for help on deleting multiple items from an array and updating the state. I have selected multiple items using checkboxes, which are [5, 4, 3]. My goal is to remove all these items from the array based on their ids and then update the state accordi ...

javascriptreactjsreact-hooks

The import error states that the object 'useHistory' is not available for export from the module 'react-router-dom'

Struggling with importing useHistory from 'react-router-dom' and encountering the error message: import error: 'useHistory' is not exported from 'react-router-dom'. Despite searching for solutions like Attempted import error: ...

javascriptreactjsreact-router-dom

What is the best method for incorporating card components from Stripe into a Vue.js application?

I am currently facing an issue with implementing Stripe in my Vue.js project. Despite following the documentation provided, I am encountering errors such as "stripe is not defined" and "Uncaught ReferenceError: h is not defined". Initially, I created a pa ...

javascriptvue.jsstripe-payments

Having trouble getting the onClick event to trigger in ReactJS buttons

The buttons are not functioning as expected, allowing for the addition of positive, neutral, or negative feedback. Interestingly, when I added a default button using different syntax to add negative feedback, it worked. This suggests that there may be an ...

javascriptreactjs

Configuring Autofac for constructors with the KeyFilter attribute

I am currently working on implementing Autofac Configuration to instantiate a Service object. public class Service : IService { public Service([KeyFilter("eod")]ISimpleMongoClient eodClient, [KeyFilter("live")]ISimpleMongoClient liveCl ...

jsonconfigurationautofac

Problem arising from apostrophe usage in Javascript OData request

In my current project, I have a text input field that passes a value through JS to fetch filtered data of names from a JSON file using OData query parameters. However, I've encountered an issue where if a name contains an apostrophe, it results in a ...

javascriptjsonajaxodata

The selectors in NgRx store are failing to retrieve data from the main global store

As I delve into the world of ngrx, I find myself struggling to fully understand and implement it effectively within my application. Recently, I integrated ngrx version 8.3 into my project in hopes of organizing my state management efficiently. My goal is ...

javascriptangulartypescriptngrxngrx-store

Does a structured logging format exist that is easily understandable by humans?

I'm looking for a solution where my program can generate a log that is both readable by humans and machines at the same time. Here are the requirements: The log should consist of individual messages, not one large XML or JSON document. Each message ...

jsonloggingapi-designhuman-readablestructured-logging

When an error occurs in Laravel 5.7, the returned response will contain the content "a<br />b", which will then be converted to "<br >"

I am facing an issue with PHP error while trying to return JSON API, where it seems to be affected by an HTML tag . I am currently working on Project 102tube.tv using Laravel 5.7. The data in the API is: $arr = ['contetn' => 'line 1 & ...

phpjsonlaravel

What is the correct way to set up a click event listener for a radio button?

Currently, I am in the process of dynamically generating HTML radio buttons. Each button is assigned an Id stored in a variable. My goal is to add a click event handler to these radio buttons using the assigned Id. However, I am encountering an issue where ...

javascriptjquery

Having trouble connecting my chosen color from the color picker

Currently, I am working on an angularJS typescript application where I am trying to retrieve a color from a color picker. While I am successfully obtaining the value from the color picker, I am facing difficulty in binding this color as a background to my ...

angularjstypescriptcolor-picker

Transmitting encoded bytes data via JSON

Currently, I am developing a Python RESTful API and facing the challenge of transmitting bytes-encoded data (specifically encrypted data using a public RSA key from the rsa package) over the network in JSON format. This is what the scenario looks like: & ...

pythonjsonencryptionbytersa

Maintaining selected options in select lists while updating model data in Angular

New to Angular and exploring the Product object with Sku objects nested inside. An app allows users to fetch a product, resulting in the Product object being assigned to $scope.product: var app = angular.module('app', []); app.controller(&apos ...

javascriptangularjs

Having trouble loading JSON data in your ExtJS Tabpanel?

I have a tabpanel set up with two panels, and I am fetching data via JSON. The data retrieval works perfectly in the first tabpanel, but I'm facing issues parsing the JSON data in the second tabpanel. Any suggestions on how to approach this? var regi ...

javascriptjsonformsextjstabpanel

Google Maps introduces a new feature that creates a blur effect on

Currently, I am utilizing the sample code provided below to superimpose an element on a Google map. <!DOCTYPE HTML> <html> <head> <title>Google Map Test</title> <style> html, body { margin: 0; ...

javascripthtmlcssgoogle-maps