How can I locate a nested JSON object using AngularJS?

Having trouble accessing a nested JSON object and displaying it using AngularJS. Need some guidance on this issue!

Here's the HTML:

<div id="ng-app" ng-controller="AnalyticsCtrl">
    <div ng-repeat="post in posts">
        <span>{{post.title}}</span>
        <span>{{post.counter}}</span>
    </div>
</div>

Looking to extract the post title and counter from the following JSON:

{
"status" : "success",
"data" : 
    {
        "activeVisitors" : "148",
        "posts" : 
        [
            {
                "id" : 1,
                "title" : "Bla blabla blablabl bla blablaba",
                "counter" : "20"
            },
            {
                "id" : 2,
                "title" : "Blie bla blup wflup flel del",
                "counter" : "18"
            },
            {
                "id" : 3,
                "title" : "Flel djep flep tro fro klel",
                "counter" : "14"
            }
        ]
    }
}

And here's the controller code:

'use strict';

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

myApp.controller('AnalyticsCtrl', ['$scope', '$http', function($scope,$http) {
$http({method:'POST', url: 'jsonData.php', headers: {}})
.success(function(data) {
    $scope.posts = data;
});
}]);

Answer №1

Instead of

 <div ng-repeat="item in items">

try using

 <div ng-repeat="item in items.data.records">

OR

You could also make adjustments to the Controller and keep your current HTML setup

Controller

$http({method: 'POST', url: 'data.json', headers: {}})
.success(function(data) {
    $scope.items = data.data.records;
});

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 issue arises when attempting to update the input of a child component within a reactive form during the OnInit lifecycle

My dilemma arises in working with data stored in the ngrx entity store, as it gets displayed in chunks based on pagination. The issue lies with rxjs somehow remembering the paging history. For instance, when I fetch the first page of data from the server, ...

Break down a string in Javascript into segments of a certain length and save them in a variable

Is there a way to split a JavaScript string into an array of strings of a specified length, where the length can vary? I need to have the length parameter as a separate variable: var length = 3; var string = 'aaabbbcccddd'; var myArray = string. ...

Sending Regular Expression Validation Pattern Through JSON Restful Service

Currently, I am in the process of developing a highly intricate integration with DocuSign using their eSignature API. As part of this project, we are including numerous fillable fields on a DocuSign form. One challenge that has emerged is the need to use & ...

What is the best way to make three divs that can be adjusted in size?

Desired Layout: | A | | B | | C | ^ ^ Adjustment Behavior: | A | | B | | C | Current Issue: | A | C | I attempted to enhance the functionality by modifying the provided JavaScript cod ...

The IE browser consistently retrieves outdated data from its cache

I always encounter the issue of IE browser loading old data from the browser history. To ensure that I am getting the latest data, I consistently need to clear the browser history. Is there a way to consistently load new data without having to manually cl ...

"Exploring the Possibilities with WordPress and Waypoint Js

After exploring various resources and tutorials online, I am struggling to implement Waypoints with WordPress. Despite placing the necessary files like waypoints.min.js and waypoints.js in the designated download folder within the js directory of my templa ...

Equivalent of window.onkeypress in Typescript and NodeJS

Can someone help me figure out how to accomplish the following: document.addEventListener('keypress', (event) => { // Need this function to trigger whenever a key is pressed }); in a node.js environment using TypeScript or JavaScript? ...

The translateX property will be set to the offsetX value of the event when the mouse is moved, resulting in a

Here's a quick and easy question regarding some kind of scrubber tool. Check out the fiddle below. When using jQuery to bind to the mousemove event and adjusting the transformX property in the positive direction, there's a 50% chance it will ret ...

In the test environment, only a portion of the JavaScript code is executed, but it functions properly in both the production and development environments of

Rails 3 Currently facing an issue with a list inside a form: <%= form_for @article do |f| %> <ul> <% @product.each do |p| %> <li id="product_<%=p.id%>"> <div> <%= f.radio_button(:p_id, p ...

Using ReactJS to showcase information pulled from a .txt file located on a specific URL

I am looking to present data from a .txt file that is uploaded on a specific URL within my React application. The URL is part of a JSON object that I retrieve using the Fetch function and store in my state. To display the URL, I currently use: {this.state ...

How can I show/hide a div based on checkbox click on my website? It works in jsFiddle, but not on my actual site. Any suggestions?

Is there a way to show or hide a div based on a checkbox click? I've got it working in jsFiddle, but for some reason, it's not functioning properly on my website. Any thoughts on how to fix this? My goal is to offer multiple payment methods (cre ...

How should jQuery fadeIn() and fadeOut() be properly implemented?

Currently, I am working on building a feature that enables the fading in and out of an array of texts. To view my progress so far, you can visit this link: http://jsfiddle.net/9j7U6/ Despite successfully fading texts in and out, there seems to be an issu ...

Can a scope variable be passed from a controller to a service function in Angular?

angular.module('store_locator') .constant("baseURL","http://locator.sas.dev.atcsp.co.za/api/") .service('stationsService', ['$http', 'baseURL', function($http,baseURL) { this.getStations = ...

Do not trigger subscription after debounce time in Angular

I would like the input data to be emitted after 300 milliseconds using debounceTime in Angular: subject: Subject<any> = new Subject(); constructor(private formBuilder: FormBuilder) { } ngOnInit(); sendValue(): void { this.subject.pipe(debounceTim ...

Change the classes of the body prior to the initial rendering

I know this may seem like a difficult task, and I understand that what I want to achieve might be nearly impossible. My goal is to incorporate a dark/light mode switch on my website. The challenge lies in the fact that the site consists of static files on ...

Creating HTML content in a new window with Vue.js - a step by step guide

Recently, I encountered a problem with jsPDF regarding Unicode support in table generation. To work around this issue, I decided to utilize the browser's print feature instead. I achieved this by creating a new HTML document with the table and display ...

Implementing an event handler within a functional component using hooks in React

I'm currently exploring functional components and hooks. I have a component that retrieves an array of quotes from an API and is supposed to randomly select one to pass as a prop to a child component named "Quote". import React, {useState, useEffect} ...

What is the best way to store the coordinates/AXIS (x;y) for an array containing 100 elements?

Utilizing a JSON method, we send a POST request to retrieve over 100 elements. We are tasked with saving these 100+ elements based on X and Y coordinates of the image faces. In various scenarios - we may need to work with specific coordinates (e.g. only ...

How can you display a personalized modal or error message using React context while incorporating dynamic content?

Can you please help me figure out how to display a custom modal or error message using react context with dynamic content? I attempted it like this: https://codesandbox.io/s/sleepy-wozniak-3be3j import React, { useState } from "react"; import ErrorConte ...

Boosting autocomplete speed by storing the JSON response in a cache for enhanced performance

Currently, I am utilizing the FCBautocomplete plugin for auto-complete functionality. However, I have noticed that with each character entered into the field, a request is sent to the server for results. With my large dataset, this raises concerns about po ...