Exploring nested objects with ng-repeat in AngularJS

My output looks like this:

  • {"name":"John"}
  • {"name":"Mark"}

Is there a way to display it without the surrounding curly braces and quotes?

  • John
  • Mark

This is how I have set up my view:

  <body ng-controller="MainCtrl">
        <ul>
            <li ng-repeat="name in names">
                {{name}}
            </li>
        </ul>
  </body>

...and here is my controller code:

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

app.controller('MainCtrl', function($scope) {
  $scope.names = {
        "1": {
            "name": "John"
        },
        "2": {
            "name": "Mark"
        }
    };
});

View my Plunker demo here: http://plnkr.co/edit/hnjoPH0r9xhlvMzO93Ts?p=preview

Answer №1

Make sure to use {{name.name}} instead of just displaying the entire object in the iteration - specify the property you want to display.

<li ng-repeat="name in names">
    {{name.name}}
</li>

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

While running tests on a React project, the `npm test` command is successful, but unfortunately,

I created a new react app using create-react-app and included some basic components and tests. The tests work fine when running 'npm test', but I encounter an 'Unexpected token' error when using Jest to run the tests with imported compo ...

Utilizing JavaScript and jQuery to make a query to mySQL

Looking to solve a SQL database query challenge using JavaScript or jQuery? Here's the scenario: I have a SQL db and typically use the following query to retrieve data based on distance from specified coordinates: SELECT id, ( 3959 * acos( cos( rad ...

How can I retrieve the access token from the Id_token using Azure AD Authentication Library (ADAL in angular 5)?

Within my Angular 5 project, I have incorporated the adal service for Microsoft auth2.0 authentication. When retrieving the id_token, I utilize this.adalService.getCachedToken(this.secretService.adalConfig.clientId); However, I require an Access Token to ...

What is the purpose of including window and undefined as parameters in this jQuery plugin?

Exploring the jquery resize plugin has left me puzzled about its inner workings: Typically, we only pass a jQuery object into jquery plugins like this: (function($){ ....plugin code.... })(jQuery); However, in the "resize" plugin, both window and un ...

Should Redux Reducer deep compare values or should it be done in the Component's ShouldComponentUpdate function?

Within my React Redux application, I have implemented a setInterval() function that continuously calls an action creator this.props.getLatestNews(), which in turn queries a REST API endpoint. Upon receiving the API response (an array of objects), the actio ...

Accessing the server with a React client resulted in a 401 unauthorized error

Currently, I am tackling my initial react App, which interfaces with the Spotify API. However, I encountered a snag during the Authentication Process. The primary issue lies in the fact that my custom Hook, useAuth, tasked with retrieving an accessToken, f ...

Challenges arise when attempting to use AJAX to post data from a poll generated by PHP

Let me walk you through this step by step. I'm working on creating a dynamic poll that can be easily modified, requiring the use of Ajax to submit the form without page reload. To achieve this, I've created a PHP script to generate the poll and n ...

Display targeted information upon clicking a designated division using JavaScript or jQuery

I'm working on a FAQ page and I want to display a specific answer when a particular question is clicked. If you'd like to see it in action, here's a fiddle: http://jsfiddle.net/hdr6shy9/ Below is the code I'm using: HTML: <div cl ...

Converting Typescript to Javascript: How to export a default object

Perhaps this question has been addressed before in some manner, however, I was unsure of how to phrase it. In my Typescript file, there is a single class being exported: export class MyClass { ... } In another Javascript file, I import the transpile ...

What is the best way to separate an ellipse into evenly sized portions?

This function is used to determine the coordinates of a vertex on an ellipse: function calculateEllipse(a, b, angle) { var alpha = angle * (Math.PI / 180) ; var sinalpha = Math.sin(alpha); var cosalpha = Math.cos(alpha); var X = a * cosa ...

Adding an object to an ArrayList: A step-by-step guide

I'm encountering issues with adding objects to the list. I have a list of floors, each floor containing rooms. I can successfully add a floor, but I'm unsure how to add rooms to the floor list. I've attempted to access floor[index] or id, b ...

Preventing dynamically generated components from reinitializing upon adding a new object

Within my application, there is a unique feature where components are dynamically generated through a *ngFor loop. Here is an example of how it is implemented: <div *ngFor="let actionCategory of actionCategories | keyvalue"> <h2>{ ...

Troubleshooting: Images not displaying on webpage due to Ajax, JQuery, and JavaScript integration

I'm currently working on building a dynamic photo gallery using Ajax and JQuery in Javascript. I have set up a directory named "images" in Visual Studio Code and it contains my selection of 5 images. However, when I click the "next" and "previous" but ...

The SQL error java.sql.SQLSyntaxErrorException occurred due to exceeding the maximum allowable expressions in a list, which is specified as 1000 with the Oracle

When trying to bombard the query with more than 1000 values, we often encounter this exception. The column limit is set at 1000, so the best solution is to split the query in half. Can anyone suggest some code refactoring techniques to help resolve this is ...

Tips for adjusting image hues in Internet Explorer?

I have successfully altered the colors of PNG images in Chrome and Firefox using CSS3. Here is my code: #second_image{ -webkit-filter: hue-rotate(59deg); filter: hue-rotate(59deg); } <img src='http://i.im ...

In VuePress 1.x, the functionality of using the <Content> tag with pageKey is not functioning as expected

Throughout the development process, we implemented a component that would iterate through each index.md file within a folder based on the list this.$site.pages.path. However, after upgrading to version 1.0.0-alpha.39 in order to address some other issues w ...

Is it possible to bypass the confirmation page when submitting Google Form data?

Is there a way to bypass the confirmation page that appears after submitting a form? What I would like is for the form to simply refresh with empty data fields and display a message saying "your data has been submitted" along with the submitted data appea ...

What is the best way to simulate chained promises with Jasmine?

As I work on writing a unit test for a method that includes the following section of code: Name.get($scope.nameId).then(function(name){ Return name; }).then(doSomething); The function doSomething(name) is implemented like this. function doSomething( ...

What is the best way to create dynamic series data for highcharts?

I have integrated angular-highcharts into my project and utilized this column chart from https://www.highcharts.com/demo/column-basic for visualizing my data. Below is the format of my data: [ { "project": "train project1", ...

How can Codeception/Selenium help in testing the tooltip or customValidity message?

I am trying to implement a feature in my Codeception scenario where I want to validate a form submission with user errors, such as confirming a wrong email address, and display a custom tooltip message in the browser. HTML <form ... > <label ...