Difficulty retrieving JSON object with AngularJS

I am having trouble extracting information from a JSON string that I have (see image below).

{
    all: [{
        info: {
            name: "Fahad",
            lat: "41.954815",
            lon: "-87.647209"
        }
    }, {
        info: {
            name: "Fahad",
            lat: "41.954815",
            lon: "-87.647209"
        }
    }, {
        info: {
            name: "Fahad",
            lat: "41.954815",
            lon: "-87.647209"
        }
    }],
    rowsfound: "11"
}

I am attempting to access this data using angularjs, here is the HTML code:

<ul ng-controller="PostsCtrl">
    <li ng-repeat="post in posts">
        {{post.all[0].info.name}}  <em>{{post.rowsfound}}</em>
    </li>
</ul>

Controller setup for reference:

app.controller("PostsCtrl", function ($scope, $http) {
    $http.get(myurl)
        .success(function (data) {
        $scope.posts = data;

    }).error(function (data, status, headers, config) {
        alert("error");
    });
});

When I load the page, two list items are generated but they do not display any values. What could be causing this issue?

Thank you.

Answer №1

Below is an example of HTML code:

<ul ng-controller="ArticleCtrl">
    <li ng-repeat="article in articles.all">
        {{article.title}}  <em>{{articles.views}}</em>
    </li>
</ul>

Answer №2

Make sure to double check your JSON representation, the correct format should be "name": "Fahad" etc. There are online tools such as http://jsonlint.com/ that can help verify the validity of your JSON.

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

Having trouble with the functionality of Bootstrap's nav-tabs 'show' feature?

I'm having some issues with adding a search box to my glossary. The glossary is created using nested unordered lists (ul) within another ul that has classes of "nav-tabs" and "bootstrap". In the JavaScript code, I am using the following snippet: $j(& ...

Using JQuery, retrieve all field values on click, excluding the value of the closest field in each row

I have a dynamic table where each row consists of an input field and a button. I am searching for a simpler way to select all input fields except the one in the current row when clicking the button in each row. All input fields have the same name and the r ...

Exploring Netbeans 7.3 for Enhanced JavaScript Autocomplete with Parameters

Ever since the upgrade to netbeans 7.3, I've encountered an issue where netbeans no longer automatically provides me with parameter names. For instance, When I see "methodA(param1, param2) xxx.js" in the autocomplete pop-up, clicking on it or pressi ...

Website: Showcase Opentok using a Picture-in-Picture design

Currently, I am utilizing Opentok.js and my objective is to showcase both the subscriber and publisher within a Picture-in-Picture layout. I require this setup to be responsive and retain its aspect ratio when resizing the window. Additionally, I need gu ...

Is there a way to select only a single line from an HTML document?

Is there a way to extract just one specific line from an HTML file? Let's say we have the following file: <!DOCTYPE html> <html> <head></head> <body> This is a test string. This is another test st ...

Pop-up that appears based on the location of the mouse click

I am looking for a rollover popup that is triggered by the location of a mouse click. I am unable to use a CSS absolute positioned div inside a relative one because it causes my popup to be cropped due to overflow:hidden being set for layout purposes. The ...

Guidelines for passing input values from a custom directive using $resource in Angular

I have been researching how to use ngModel within a custom directive, and while I grasp the concept, I am struggling with implementing it when using $resource. Currently, I am successfully injecting the "file" scope into my directive and making the API ca ...

What is causing this JSON to malfunction in Internet Explorer?

Everything is functioning well on Chrome and other browsers except for IE. Below is an example to illustrate: (specifically referring to IE 8, unsure about compatibility with IE 9) Upon running the JSON request, I encountered an error stating "Object exp ...

Learn the process of retrieving JSON objects through AJAX using jQuery

When making a jQuery call to an API website, I receive the results in JSON format: { "results":[ { "user":{ "gender":"female", "name":{ "title":"mrs", "first":"linda", "last":"diaz" }, ...

Adding an active class to a link tag depending on the current URL and custom Vanity URLs - here's how!

I have a functioning code snippet, but it seems to be missing a crucial part when dealing with URLs such as www.mysite.com/home/. It works perfectly fine if the URL ends with index.aspx, like www.mysite.com/home/index.aspx, but fails when that part is omit ...

Employing absolute picture placement

I have a collection of clipped images, each with an absolute position: <img style='position:absolute;clip(xpx xpx xpx xpx);'/> <img style='position:absolute;clip(xpx xpx xpx xpx);'/> <img style='position:absolute;cl ...

Trouble with jQuery noConflict function not resolving as expected

I'm attempting to use both jQuery 1.4 and 2.0 by utilizing the noConflict function, but the code isn't working as expected. Here is an example of my document head: <script src="js/jquery-2.0.0.min.js" type="text/javascript"></script> ...

Modifying Selectize Ajax data in real-time

How can the student_id be changed each time the modal is opened? This is the code: $('#relationshipModal input[name=existing_user]').selectize({ valueField: 'id', searchField: 'name', options: [], create: fal ...

Is there a workaround available for the JavaScript timeout and interval functions in XPages SSJS?

While utilizing XPages' server-side JavaScript (SSJS), I find myself longing for the timing/scheduling features like setTimeout, setInterval, clearTimeout, and clearInterval. Has anyone developed a polyfill to add these crucial functions to SSJS? ...

Is TypeScript's nullish coalescing operator (??) supported by more browsers compared to JavaScript's equivalent?

When it comes to the nullish coalescing operator (??) in JavaScript, browser support is limited to newer browsers such as Chrome 80, Edge 80, and Firefox 72. Since TypeScript gets converted to JavaScript, do nullish coalescing operators also undergo some ...

Instantiate a child class within an abstract class by utilizing the keyword "this"

Within my code, there is an abstract class that uses new this(). Surprisingly, this action is not creating an instance of the abstract class itself but is generating an instance of the class that inherits from it. Even though this behavior is acceptable i ...

Setting up an i18n project in AngularJS

I just embarked on my angularjs journey yesterday with little to no prior knowledge about it. My initial goal is to centralize all the labels for my UI in a file (to facilitate swapping them out for i18n). As far as I know, this can be achieved by importi ...

What steps can I take to resolve a Bootstrap form validation issue where the email field is causing the label to shift down?

I am currently troubleshooting an issue in a website using Visual Studio, which is built with VB.NET, ASP.NET, HTML, CSS, and Bootstrap. The problem lies in the input validation under the email addresses. While one validation is working fine, the validatio ...

Exploring the Potential of CSS Styling within Vue.js

I am in the process of creating a website and I am looking for a way to manage my styles through Vue. I want to be able to utilize CSS with Vue, as the style of .skill-bar serves as the background of the bar, while .skill-bar-fill represents the green fil ...

What causes inability for JavaScript to access a property?

My current coding project involves the usage of typescript decorators in the following way: function logParameter(target: any, key : string, index : number) { var metadataKey = `__log_${key}_parameters`; console.log(target); console.log(metadataKey ...