Struggling with iterating over an Angular array?

I am attempting to iterate through this array.

However, I am not seeing anything inside the {{repeat.title}}

I am iterating through the array using the following HTML/Angular code:

<div class="column inline inline-4 center choice" ng-repeat="repeat in repeater.keuze_menu[0]">
    <span>{{repeat.title}}</span>
</div>

Angular object

$scope.repeater = [{
    "uitgelichte_afbeelding": false,
    "content_afbeelding": "http:\/\/hetplein.h2505194.stratoserver.net\/wp-content\/uploads\/2016\/05\/image2.jpg",
    "keuze_menu": [{
        "keuze_1": {
            "ID": 81,
            "id": 81,
            "title": "IJs",
            "filename": "Ijs-1.jpg",
            "url": "http:\/\/hetplein.h2505194.stratoserver.net\/wp-content\/uploads\/2016\/05\/Ijs-1.jpg",
            "alt": "",
            "author": "1",
            "description": "",
            "caption": "",
            "name": "ijs-2",
            "date": "2016-07-14 09:32:06",
            "modified": "2016-07-15 11:37:33",
            "mime_type": "image\/jpeg",
            "type": "image",
            "icon": "http:\/\/hetplein.h2505194.stratoserver.net\/wp-includes\/images\/media\/default.png",
            "width": 1440,
            "height": 956,
            "sizes": {
                "thumbnail": "http:\/\/hetplein.h2505194.stratoserver.net\/wp-content\/uploads\/2016\/05\/Ijs-1-150x150.jpg",
                "thumbnail-width": 150,
                "thumbnail-height": 150,
                "medium": "http:\/\/hetplein.h2505194.stratoserver.net\/wp-content\/uploads\/2016\/05\/Ijs-1-300x199.jpg",
                "medium-width": 300,
                "medium-height": 199,
                "medium_large": "http:\/\/hetplein.h2505194.stratoserver.net\/wp-content\/uploads\/2016\/05\/Ijs-1-768x510.jpg",
                "medium_large-width": 768,
                "medium_large-height": 510,
                "large": "http:\/\/hetplein.h2505194.stratoserver.net\/wp-content\/uploads\/2016\/05\/Ijs-1-1024x680.jpg",
                "large-width": 1024,
                "large-height": 680
            }
        }
    }]
}]

What seems to be the issue here?

javascriptangularjsmultidimensional-array

Answer №1

If you're looking to iterate through the keys within an object that are located in the initial index of an array, you can achieve this by utilizing the ng-repeat directive.

<div ng-repeat="(key, value) in repeater.keuze_menu[0]">
    <span>{{value.title}}</span>
</div>

Answer №3

After exhausting all possible solutions, I finally stumbled upon the answer.

<div class="col inline inline-4 center choice" ng-repeat="repeat in repeater">
    <div ng-repeat="val in repeat.choice_menu[0]">
        <span>{{val.name}}</span>
        <img src=""/>
    </div>
</div>

It turns out, I just needed to iterate through the repeater twice.

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

Enhance Your User Experience with the Onsen UI Bluetooth Extension

Trying to integrate a Bluetooth plugin using Onsenui in Monaca IDE, but consistently encountering the error message: "bluetoothSerial not found." Looking to develop a service that necessitates the Bluetooth Serial plugin. Planning to simply utilize a .is ...

angularjsonsen-uimonaca

Issues with Loading Bootstrap JavaScript on Basic "Hello World" Project

I am experiencing an issue where the JavaScript code is not displaying on my website. I have checked the inspect element sources and it seems to load correctly, but for some reason, it is not being applied. Any insights on why this might be happening? Than ...

javascriptphphtmllaravelbootstrap-4

Hey there, I'm looking to use different CSS fonts on Windows and Mac for the same page on a web application. Can someone please guide me on how to accomplish this?

In order to tailor the font based on the operating system, the following criteria should be followed: For Windows: "Segoe UI" For Mac: "SF Pro" Attempts have been made using the code provided below, but it seems to load before the DOM and lacks persisten ...

javascripthtmlcssreactjswebkit

Display the execution duration on an HTML document

Recently, I created a loan calculator using Javascript and now I'm contemplating on incorporating the time taken for the code to execute into the results. My intention is to have the execution time displayed on my HTML page, but I am unsure of how to ...

javascripthtmlcssbootstrap-4frontend

Having trouble with loading image textures in three.js

Here is the code snippet I am using: var scene = new THREE.Scene(); // adding a camera var camera = new THREE.PerspectiveCamera(fov,window.innerWidth/window.innerHeight, 1, 2000); //camera.target = new THREE.Vector3(0, 0, 0); // setting up the renderer ...

javascriptthree.js

What could be causing my Bootstrap accordion to malfunction?

Currently, I am in the process of constructing a website using Bootstrap 4. I have incorporated 3 individual <div> elements, each containing an accordion. These <div> sections are assigned their own unique id to facilitate the showing and hidin ...

javascripthtmlbootstrap-4accordion

Retrieve client-side environment variables

When making multiple API calls within my components using the fetch method, I found myself constantly having to determine which environment I was in. To streamline this logic, I created a Utils class that provides the appropriate base URL: export default c ...

javascriptreactjsnext.js

The concept of nested views in Angular UI-Router allows for a

How can I successfully implement nested views, where after logging in the user is redirected to in.html, and all links within in.html are directed to a ui-view? Currently, all links redirect to a new page. index.html <!-- more HTML --> <body ng- ...

javascriptangularjsangular-ui-routerangular-ui

The bxSlider reloadSlider() function is not defined once the page has finished loading

I am currently working on developing an interactive upload and refresh gallery using AJAX and jQuery. The application allows for the upload of multiple images through drag & drop. After uploading, I need to visualize how the new gallery will appear with t ...

javascriptphpjqueryajaxbxslider

When submitting the club form, my goal is to automatically generate a club admin within the user list in activeadmin

My dashboard.rb setup looks like this: ActiveAdmin.register_page "Dashboard" do menu priority: 1, label: proc{ I18n.t("active_admin.dashboard") } content title: proc{ I18n.t("active_admin.dashboard") } do # form render 'form' # Thi ...

javascriptruby-on-railsrubyajaxactiveadmin

Convert Number to Decimal Format with Additional Four Decimal Places

Implementing Angularjs version 1.xx var processedInput = text.replace(/[^0-9.]/g, '') .replace(/\B(?=(\d{3})+(?!\d))/g, ","); if(processedInput!="") processedInput="$"+processedInput; Input = 123456789, Desired Ou ...

javascriptangularjs

js/jquery Asynchronous Loading of Content Replaces Existing Page Content

I have encountered a problem that I am hoping someone can assist me with. Here is the issue: A partner of mine has given me a code to use on my website, which will display certain content that I am interested in. However, this content is only relevant to ...

javascriptjqueryajax

Having trouble with shipit.js deployment: Error encountered - git checkout undefined

I have been using shipit.js to deploy my nodejs application on an Ubuntu 16.04 server successfully. However, I recently encountered the following error: ./node_modules/shipit-cli/bin/shipit production deploy start Running 'deploy:init' task... ...

javascriptnode.jsdeploymentshipitjs

Bring in styles from the API within Angular

My goal is to retrieve styles from an API and dynamically render components based on those styles. import { Component } from '@angular/core'; import { StyleService } from "./style.service"; import { Style } from "./models/style"; @Component({ ...

javascriptcssangularsass

Deriving variable function parameters as object or tuple type in TypeScript

Searching for a similar type structure: type ArgsType<F extends Function> = ... which translates to ArgsType<(n: number, s: string)=>void> will result in [number, string] or {n: number, s: string} Following one of the provided solu ...

javascriptfunctiontypescriptargumentstype-inference

Having issues with using the class selector in SVG.select() method of the svg.js library when working with TypeScript

Exploring the capabilities of the svg.js library with typescript has presented some challenges when it comes to utilizing CSS selectors. My goal is to select an SVG element using the select() method with a class selector. In this interactive example, this ...

javascriptangulartypescriptsvg.js

Storing data locally in Angular applications within the client-side environment

As I delve into Angular and TypeScript, I've encountered a perplexing issue. Let's say I have two classes - Employee and Department. On the server-side, I've established a Many-To-One relationship between these entities using Sequelize: db. ...

javascriptangulartypescript

A guide on invoking an asynchronous function within the useEffect() hook in React

Is there a way to call an async function and get the result in my useEffect hook? I've come across examples using the fetch api directly inside the useEffect function. However, if the URL changes, all fetch calls need to be updated. When I attempted ...

javascriptreactjsasynchronousreact-hooks

What is the best way to utilize Protractor to comb through a specific class, locate a p tag within that class, and validate certain text within it?

My current task involves using Protractor to locate a specific class and then search through all the p tags within that class to identify any containing the text "Glennville, GA". In my spec file, I have attempted the following steps: it('should fil ...

javascriptangularjsnode.jsjasmineprotractor

When React-select is toggled, it displays the keyboard

While using react-select ^1.2.1, I have come across a strange issue. Whenever I toggle the drop-down in mobile view, the keyboard pops up unexpectedly as shown in this screenshot https://i.stack.imgur.com/mkZDZ.png The component code is as follows: rende ...

javascriptreactjsreact-select