AngularJS displaying only the last element from JSON data

Question

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) {
        //
    };   
}]);

fxck · Accepted Answer · 2014-08-12 15:57:03Z

2

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' }
];

answered Aug 12, 2014 at 15:57

fxck

4,9088 gold badges59 silver badges97 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Aditya Singh · Accepted Answer · 2014-08-12 15:59:08Z

2

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/

answered Aug 12, 2014 at 15:59

Aditya Singh

16.8k15 gold badges49 silver badges70 bronze badges

1 Comment

GPB Over a year ago

Thank you, your answer and foxx's helped

Collectives™ on Stack Overflow

AngularJS displaying only the last element from JSON data

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related