CODEWITHSUNDEEP
javascriptjsonangularjsangularjs-ng-repeat
GPB
GPB

Reputation: 93

AngularJS displaying only the last element from JSON data

I'm having an issue in Angular where I have a controller that gets data from a service. The controller gets the data from the service but it only returns the last element.

See this jsfiddle for an example: http://jsfiddle.net/c1104q9b/

HTML:

<div ng-app="myApp">
    <div ng-controller="MessageController">
        <ul>
            <li ng-repeat="message in messageData">{{message.title}} - {{message.message}}</li>   
        </ul>
    </div>
</div>

JAVASCRIPT:

var app = angular.module('myApp', []);

app.service('messageService', function () {
    // private data
    var data= [
        {   id: 1, title: 1, message: 'some new message1',
            id: 2, title: 2, message: 'some new message2',
            id: 3, title: 3, message: 'some new message3',
            id: 4, title: 4, message: 'some new message4',
            id: 5, title: 5, message: 'some new message5',
            id: 6, title: 6, message: 'some new message6',
            id: 7, title: 7, message: 'some new message7',
            id: 8, title: 8, message: 'some new message8'
        }
    ];

    return {
        getMessages: function () {
            // Expose private data
            return data;
        },
        addMessage: function (title, message) {
            // Public function that modifies private data
            var currentIndex = data.length + 1;
            data.push({ id:currentIndex, title: title, message: 'added a new message ' + message })
        },
        deleteMessage: function (id) {
            // Public function that modifies private data
            var oldMessages = data;
            data = [];

            angular.forEach(oldMessages, function(message){
                   if (message.id !== id) data.push(message);
                });
        }
    };
});

app.controller('MessageController', ['$scope', 'messageService', function($scope, messageService) {
    $scope.messageData = messageService.getMessages();
    //messageService.addMessage('some title', 'some new message');

    $scope.addMessage = function (title, message) {
        if (title != ''){
          messageService.addMessage(title, message);
        };
    };

    $scope.deleteMessage = function (id) {
        //
    };   
}]);

Upvotes: 0

Views: 811

Answers (2)

Aditya Singh
Aditya Singh

Reputation: 16660

This is because your data is a array with single object. The structure needs to be as below:

var data= [
        {   id: 1, title: 1, message: 'some new message1'},
        {id: 2, title: 2, message: 'some new message2'},
        {   id: 3, title: 3, message: 'some new message3'},
        {id: 4, title: 4, message: 'some new message4'},
        {id: 5, title: 5, message: 'some new message5'},
        {id: 6, title: 6, message: 'some new message6'},
        {id: 7, title: 7, message: 'some new message7'},
        {id: 8, title: 8, message: 'some new message8'
        }
    ];

Updated fiddle: http://jsfiddle.net/c1104q9b/1/

Upvotes: 2

fxck
fxck

Reputation: 4908

Your json is invalid. Each entry needs to be wrapped in it's own {}.

See http://jsfiddle.net/rbqyf78e/

var data= [
    {    id: 1, title: 1, message: 'some new message1' },
    {    id: 2, title: 2, message: 'some new message2' },
    {    id: 3, title: 3, message: 'some new message3' },
    {    id: 4, title: 4, message: 'some new message4' },
    {    id: 5, title: 5, message: 'some new message5' },
    {    id: 6, title: 6, message: 'some new message6' },
    {    id: 7, title: 7, message: 'some new message7' },
    {    id: 8, title: 8, message: 'some new message8' }
];

Upvotes: 2

Related Questions