The ng-repeat directive is displaying only the final item from the JSON data

Is it possible to customize the number of items displayed from a JSON file using ng-repeat in AngularJS? Currently, it only shows the last item.

JSON Data

{  
   "list":{  
        "item1": {
            "id":1,
            "img": "1.jpg",
            "user": "David Belle",
            "text": "Cum sociis natoque penatibus et magnis dis parturient montes"
        },
        "item2": {
            "id":2,
            "img": "2.jpg",
            "user": "Jonathan Morris",
            "text": "Nunc quis diam diamurabitur at dolor elementum, dictum turpis vel"
        },
        "item3": {
            "id":3,
            "img": "3.jpg",
            "user": "Fredric Mitchell Jr",
            "text": "Phasellus a ante et est ornare accumsan at vel magnauis blandit turpis at augue ultricies"
        }
    }
}

AngularJS Configuration

Controller

app.controller('mainCtrl', ['$scope', '$resource', function($scope, $resource) {
    $scope.msAPI = $resource("data/messages-notifications.json");
    $scope.msResult = $scope.msAPI.get();
}]);

HTML Code

<div ng-controller="mainCtrl">
    <a href="" ng-repeat="(key, value) in msResult.list" ng-if="$index &lt; 2">
         <div class="lv-title">{{ value.user }}</div>
         <small class="lv-small">{{ value.text }}</small>
    </a>
</div>
javascriptjsonangularjsangularjs-ng-repeat

Answer №1

To simplify, consider updating your JSON structure to incorporate an array instead of an object. Here is an example:

{  
   "list": [{
        "id":1,
        "img": "1.jpg",
        "user": "David Belle",
        "text": "Cum sociis natoque penatibus et magnis dis parturient montes"
    }, {
        "id":2,
        "img": "2.jpg",
        "user": "Jonathan Morris",
        "text": "Nunc quis diam diamurabitur at dolor elementum, dictum turpis vel"
    }, {
        "id":3,
        "img": "3.jpg",
        "user": "Fredric Mitchell Jr",
        "text": "Phasellus a ante et est ornare accumsan at vel magnauis blandit turpis at augue ultricies"
    }]
}

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

I am having trouble with retrieving and showing Json data in a table using axios within a React component

Struggling to access JSON data using hooks to display it in the <p> tag but encountering an error - "TypeError: states.map is not a function". I attempted utilizing Array.from() to convert my JSON to an array, yet it neither displayed anything nor pr ...

javascriptreactjsreact-hooks

Convert JSON data into jQuery format, then present it in a list format using `<ul>` and

After making an ajax request, I receive a JSON string containing error messages regarding required form fields: first name, last name, email, usercode, password, password confirmation, and captcha. { "first_name":["The first name field is required."], " ...

jqueryjson

Eliminating a particular user script from WKUserContentController

Currently, I am using addUserScript() to insert a user script into my WKWebView's WKUserContentController. An issue that I've encountered is that even after calling loadRequest(), the added script remains in place. In certain scenarios, I might ...

javascriptiosiphonewkwebviewwkuserscript

Switch tabs with JavaScript

I'm encountering an issue with changing tabs using JavaScript and Ajax. The script I have works when not using Ajax but fails to work properly with it. Here is the script: $(document).ready(function(){ $("#mtabs li").click(function() { ...

javascriptjqueryajax

Methods to troubleshoot problem of angular component loading issue in firefox with ViewEncapsulation.Native

I am encountering a problem with loading an angular component using ViewEncapsulation.Native in firefox, edge, and ipad chrome. Interestingly, there is no issue on safari on mac, chrome on windows, or chrome on android. Error: hostEl.createShadowRoot is ...

javascriptangularshadow-dom

A Guide on Accessing Promise Results in AngularJS

In my code, I am using a controller to retrieve information from SharePoint. While debugging, I noticed that the value of data.d.UserProfileProperties.results[115].Value is what I need to display in the view. However, I am struggling to extract that value ...

javascriptangularjsajax

JS asynchronous function failing to update variable

let encodedAccount = ''; function encodeUsername() { encodedAccount= encryptValue(document.getElementById('account').value); alert(encodedAccount); } The encryptValue function is an asynchronous AJAX function. The alert method ...

javascriptajaxvariablesasynchronousscope

Expanding the properties of an object dynamically and 'directly' by utilizing `this` in JavaScript/TypeScript

Is it possible to directly add properties from an object "directly" to this of a class in JavaScript/TypeScript, bypassing the need to loop through the object properties and create them manually? I have attempted something like this but it doesn't se ...

javascripttypescript

Retrieve upcoming events using Node.js from the Eventbrite API

Struggling to find working examples, the npm package README example gives me an error. Utilizing https://github.com/Datahero/node-eventbrite Integrating it into app.js, setting up the token variable with my token. Inserting this code snippet: try { ...

javascriptnode.jsapieventbrite

Utilize jQuery and PHP to populate an HTML Select Field with data retrieved from a MySQL Database in JSON format

I am exploring how to Transfer Database Data into an HTML Dropdown Selection Field using jQuery. I came across a useful example that seems promising. Although I am new to jQuery and JavaScript, I am eager to learn. My goal is similar to the approach descr ...

javascriptphpjqueryhtmlmysql

When a user clicks on an Ajax.ActionLink, I want to trigger a Javascript function to execute

I am using an Ajax.ActionLink() in my code. When clicked, it loads a partial view within the parent view. It works perfectly fine. Now, I need to call a JavaScript function when this Ajax.ActionLink() is clicked to enable some other functionality. I am uns ...

javascriptjqueryajaxasp.net-mvc-4

Creating an array of strings that automatically inserts commas when rendered in HTML

I am currently working on populating an array with a list of names: for (const approve of requestApproval[strings.Approve]) { approved.push( approve.Title + '<br/>' ); } The populated array can be viewed at this link: http ...

javascripthtmlarrays

Updating the quantity of a Stripe subscription in Node.js: A Step-by-Step Guide

I'm having trouble modifying the quantity of items in an existing Stripe subscription. Whenever I attempt to update it, I encounter the following error: "error": { "message": "Invalid array", "param": &q ...

javascriptnode.jsstripe-payments

What is the alternative method in JavaScript for locating items instead of using indexOf?

I have a set of paths in an array. Some paths are classified as constants while others are labeled as dynamic. A constant path would be something like "/booking-success", whereas a dynamic path could be something like '/arrival/view/:job_or ...

javascriptjqueryreactjs

Executing a method (service) nested within another method through jasmine unit testing

Code snippet for checking duplicate patients $scope.checkDuplicatePatients = function () { var systemIdentier = ''; // FIXME var givenName = $scope.patient.givenName || ''; var familyName = $scope.pa ...

angularjsunit-testingjasmine

Activate BootstrapValidator to dynamically enable or disable the submit button as you type

Is there a way to keep the submit button enabled while typing in BootstrapValidator? ...

javascriptjquerytwitter-bootstrap

Tips for resolving a TypeError involving string indices needing to be integers within a json file

Encountering the error: TypeError - String indices must be integers. What is the best way to address this issue? I am attempting to convert my dataframe into a hugging face dataset in order to build a chatbot using transformers. A simple chatbot has alre ...

pythonjsonpandasinteger

Attempted to load Angular multiple times

I recently developed an app using the Yeoman scaffolded app (specifically, the Angular Fullstack generator). While grunt serve works perfectly fine, I encountered a problem when running grunt build which results in the distribution locking up memory. This ...

javascriptangularjsgruntjs

How can one selectively apply a class to the initial DIV within a collection of dynamically generated DIV elements without relying on jQuery?

I am currently working on implementing a slideshow within a modal using AngularJS and Bootstrap. My challenge lies in dynamically creating DIVs, but specifically adding the active class to only the first DIV. Is there a way to achieve this without relying ...

javascriptangularjstwitter-bootstrap

Error encountered while attempting to extract JSON dictionary in Python

I am currently experimenting with a Python project designed for interacting with my Lego SBrick, which I found on this GitHub repository. After establishing a connection with the SBrick, I used the following code snippet: json_response = client.rr_get_ad ...

pythonjsonstringdictionary