Showing just the keys of a JavaScript object array using Angular

Check out this live code example on JSbin

Can you show only the key from expression syntax in Angular? Specifically, the key being the word "page". And is it possible to do this from an array (even though they are the same word)?

HTML

<body ng-app="ang6App">
    <div class="container" ng-controller="templatesCtrl">
        <div ng-repeat="(key, val) in tempTemp">{{val}}</div>
        <!-- How can I display just the word page? -->
    </div>
</body>

JS

angular.module("ang6App")
    .controller("MainCtrl", function ($scope) {})
    .controller("templatesCtrl", function ($scope) {
    /* $scope.template = Templates; */
    $scope.tempTemp = [{
        'page': {
            'name': 'jordan test page'
        }
    },
    //end of page
    {
        'page': {
            'name': 'jordan test page'
        }
    }];
    //end of templates
});

Answer №1

There are two repeaters used in this code snippet:

The first repeater is a simple array and does not have key/value pairs

The second repeater iterates through all properties in each item

<div ng-repeat="item in tempTemp">
  <div ng-repeat="(key, val) in item">
    {{key}}
  </div>
</div>

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

Direct your attention to the cursor problem in Internet Explorer

Here is a snippet of code that automatically changes background images: function changeBackground() { currentBackground++; if(currentBackground > 3) currentBackground = 0; $('body').fadeOut(0, function() { $('body&ap ...

The Angular Material FAB Speed Dial feature is causing a slight offset within the Toolbar

Attempting to incorporate design examples from the angular material site, I am utilizing Angular Material 1.0.0RC5. I am aiming to position the FAB Speedial within the Toolbar, similar to the example demonstrated on their site: https://material.angularjs. ...

When trying to reference a vanilla JavaScript file in TypeScript, encountering the issue of the file not being recognized

I have been attempting to import a file into TypeScript that resembles a typical js file intended for use in a script tag. Despite my efforts, I have not found success with various methods. // global.d.ts declare module 'myfile.js' Within the re ...

Storing the output of a GET request in a text file can lead to a never-ending loop

After attempting to save a String obtained from a GET request into a text file, I encountered an unexpected infinite loop issue. It seems that without utilizing created(), the process fails entirely, resulting in story remaining empty. <div id="app"> ...

Experiencing difficulty adjusting the width of a Tumblr post with JavaScript or jQuery?

Calling all coding experts! I've been working on customizing a Tumblr theme, and everything is looking good except for one issue. I'm struggling to adjust the width of photos on a permalink (post) page. Check out this link: You'll notice t ...

Order a array of JSON by time, showing it in a 12-hour format

I've come across a JSON structure that looks like this: [ { "Event_code": "AB-001", "Start_time": "11:00 AM", "End_time": "3:00 PM", "Session_type": "Tour" }, { "Event_code": "AB-002", "Start_time": "09:30 AM", "End_ ...

Generating email expiration tokens without relying on a database or utilizing crontab for automatic deletion

My API server has an authentication system using JWT tokens for registration, login, and forgotten password functionality. When a user forgets their password, they receive an email with a unique token and link to reset it. Currently, I generate a UUID to ...

Achieving functionality with Twitter Bootstrap's "Tabs" Javascript in a Ruby on Rails application

Encountering a JavaScript issue within a Rails application. Although Twitter's documentation is very clear, I'm still struggling to make dynamic tabs work (tab switching and dropdown). I even went ahead and copied their source code, downloaded t ...

Updating information on a webpage automatically without the need to reload the page

I'm curious about how to post data without refreshing the page, similar to how Facebook updates comments instantly without a page reload. I understand how to insert data into MySQL using AJAX without refreshing the page, but my question is: how can I ...

When provided with no input, the function will output true

I'm having trouble understanding this problem! I've implemented a basic jQuery validation that checks if an input field is empty when a button is clicked. http://fiddle.jshell.net/fyxP8/3/ I'm confused as to why the input field still retu ...

Switching the data-bind with jQuery on a click event: A step-by-step guide

I am working on a form that contains multiple fields. Here is an example: <input id="txtContactFirstName" name="txtContactFirstName" maxlength="20" class="k-textbox standardInput" required="required" data-bind="value: appointmentDetails.ContactFirstNam ...

What is the most efficient way to transform HTML into React components effortlessly?

I have been attempting to automate the process of converting HTML into React components. I followed the link below to automatically convert HTML into React components: https://www.npmjs.com/package/html-to-react-components However, I encountered an issue ...

Nuxt.js transition issue: How to fix transitions not working

LOGIC: The pages/account.vue file consists of two child components, components/beforeLogin and components/afterLogin. The inclusion of child components is based on a conditional check within pages/account.vue using a string result ('x') stored in ...

Toggle between pausing and running CSS animations with this handy button!

My awesome graphic animation is in CSS and SVG format. I've been struggling to add a play/pause button to control the animation on click. Here is what I have so far: .animation1 { --animation-delay: 0.1s; animation: ani_keyframes 1 ...

Jquery's LOAD function can be used as an effective alternative to or substitute for I

My current setup involves using jQuery to load user messages every second, but I am looking for a solution that mimics the behavior of <iframe>, <object>, or <embed> tags. <script> setInterval( function() { $('#chat').loa ...

Mastering Tooltip Placement Using CSS or JavaScript

I have been working on creating a CSS-only tooltip for a web application and so far I have managed to create some useful tooltips with different classes: tooltip-up tooltip-down tooltip-left tooltip-right The distinguishing factors between them are t ...

A continuous jQuery method for updating select option values

I'm currently working on a form and using jQuery to make some alterations. The form consists of multiple select elements, and I want to change the value of the first option in each of them. However, as the form allows for dynamic addition of new selec ...

Guide on transforming a NaN value to 0 within an app.post function in a .js file

When I try to convert the value of question1 from NaN to 0 using parseInt in the code below, it doesn't seem to work. How can I properly convert it? app.post('/auth/total',function(req,res){ console.log(req.body); const { question1, ...

How can Angular JS detect the names of the CSS files being used in an HTML page?

I am in the process of developing a brand new widget where we are incorporating a unique feature that displays the number of CSS files included within an HTML page. Our team requires the count and names of all CSS files utilized on the webpage. While I a ...

When Sequelize is utilized with the include option, it is encountering issues by returning null values

When performing a model query with includes and there are no matching rows, the result returned includes null values. I have come across this issue multiple times before, but I have yet to find a definitive solution. Model.findOne({ where: { id: 1 }, ...