Utilizing list items as variables for independent lists in AngularJS

Within my controller, I am managing arrays that contain object items like so:

$scope.johnny = [
    {quote: "Anything for My Princess", path: 'sounds/AnythingForMyPrincess.mp3'},
    {quote: "Don't Even Ask", path: 'sounds/DontEventAsk.mp3'},
    {quote: "Don't Plan Too Much", path: 'sounds/DontPlanTooMuch.mp3'}
] // an example of one of the many lists

I am looking to iterate through these lists using another array (names of arrays) and a for loop:

$scope.totalNames = [$scope.johnny, $scope.lisa, $scope.mark, $scope.denny, $scope.lisasmom, 
                    $scope.chicken, $scope.chris, $scope.flower, $scope.mike, $scope.steven]

for (var i = 0; i < $scope.totalNames.length; i++) {
    var list = $scope.totalNames[i];
    alert(list.quote);
}

While $scope.totalNames[i] correctly returns the desired array, once I add .quote to it, it returns undefined. Any insights on why this might be happening? Thank you!

javascriptarraysangularjsvariablesscope

Answer №1

$scope.totalNames contains a list of lists. Here is how you can handle it:

for (var i = 0; i < $scope.totalNames.length; i++) {
    var innerList = $scope.totalNames[i];
    for (var j = 0; j < innerList.length; j++) {
        alert(innerList[j].quote);
    }
}

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

Ways to deselect checkboxes with Typescript and Jquery

I have a set of checkboxes all labeled with the same 'types' class. There is a button on my webpage that should be able to toggle between selecting and deselecting all the checkboxes in this group. When checking the boxes, I use the following sc ...

jqueryangularjs

Guide to changing a promise into a float using protractor

Currently, I am developing end-to-end tests with protractor and I need to verify the accuracy of certain calculated values on a page. It seems like a straightforward task: var variable1 = element(by.binding('variable1')); var variable2 = element ...

javascriptnode.jsselenium-webdriverprotractor

Access model information from a controller with the help of Next.js and Sequelize

I'm currently working on a project involving Vue.js as my frontend and Next.js as my backend. While everything seems to be running smoothly, I am facing an issue with retrieving my model data back to my controller... Additional details: I have utili ...

javascriptnext.jssequelize.js

What is the best way to add an element without triggering the onClick event in ReactJS?

While diving into the world of ReactJS, I decided to challenge myself by creating a basic todo list. The twist is that each item in the list belongs to a specific group like Purchases, Build Airplane with details on when each task under that group was comp ...

javascriptreactjs

Obtain an array dynamically through a manufacturing plant

I'm currently working on extracting information from a factory and displaying it in a dynamic manner. Previously, I used the following approach: <div class="articlePage"> <h4> {{ posts[0].title }} </h4> <span style="color: # ...

arraysangularjsdynamicfactory

A nifty little JavaScript tool

Recently, I created a bookmarklet that opens a new window with a specified URL and passes variables to a PHP script using the GET method. However, I now require it to load the same PHP script and pass the same variables but within a div element this time. ...

phpjavascriptajaxhtmlbookmarklet

React Select feature fails to show suggestions after asynchronous debounced call

I am currently utilizing react-select to load results from an API while debouncing queries using lodash.debounce: import React, {useState} from 'react'; import AsyncSelect from 'react-select/lib/Async'; import debounce from 'lodas ...

javascriptreactjsreact-select

Why is it that $_GET consistently returns null despite successfully transmitting data via AJAX?

I'm currently developing a PHP script that dynamically generates tables in MySQL based on user input for the number of rows and columns. The data is being sent to the server using AJAX, but even though the transmission is successful, the server is rec ...

javascriptphphtmlmysqlajax

The useReducer function dispatch is being called twice

I can't figure out the reason behind this issue. It seems that when strict mode is enabled in React, the deleteItem function is being executed twice. This results in the deletion of two items instead of just one - one on the first round and another on ...

javascriptreactjsreact-hooks

Encountering difficulties running the build post installation of the react-native-jsi-image package

Upon attempting to install the npm package react-native-jsi-image on Android and running npx react-native run-android, my build fails with an error. I am seeking assistance in resolving this issue. Currently, I am using the latest version of React Native C ...

javascriptreactjsreact-native

Issue with Bootstrap Carousel function in desktop browsers but functioning correctly on mobile devices

I'm experiencing issues with my bootstrap carousel on mobile browsers, but not on web browsers, despite trying various fixes and clearing my browser cache. Specifically, there is no sliding effect when clicking on the indicator, and everything else ap ...

javascriptjquerybootstrap-4carousel

Regex tips: Matching multiple words in regex

I am struggling with creating a simple regex. My challenge is to write a regex that ensures a string contains all 3 specific words, instead of just any one of them: /advancebrain|com_ixxocart|p\=completed/ I need the regex to match only if all thre ...

phpjavascriptregexprogramming-languagesregex-lookarounds

Deciphering the Byte masking concept in Java

As I was optimizing space in a program, I came across some code that intrigued me. private static final long MAX = 1000000000L; private static final long SQRT_MAX = (long) Math.sqrt(MAX) + 1; private static final int MEMORY_SIZE = (int) (MAX >> 4); ...

javabytearrays

The JavaScript Top Slide Down effect is malfunctioning

Every time I press the "More" button, I expect some forms to pop out but nothing happens. Can someone please assist me with this issue? <body> <!--Hero Image--> <div class="hero-image"> <div class="hero ...

javascripthtmlcssbootstrap-4

Node JS Client.query not returning expected results

Currently, I am developing a Web Application that interacts with my PostgreSQL database. However, when I navigate to the main page, it should display the first element from the 'actor' table, but unfortunately, nothing is being retrieved. Below i ...

javascriptsqlnode.jspostgresqlexpress

Performing an Ajax Get Request in Rails 4 without rendering a view

Welcome to a unique question that has been carefully crafted to stand out from the rest. After hours of dedicated research, it seems like the right terms are still eluding me. In the world of Rails 4, my aim is to utilize an ajax request to fetch data fro ...

javascriptjqueryruby-on-railsajax

What is the specific functionality of $find in the Microsoft Ajax library?

I'm feeling a bit puzzled about the functionality of $find from Microsoft Ajax. Does it simply retrieve a control like the $ operator in jQuery or JavaScript's getElementById? For example: $find('someControlId') Would this return th ...

javascriptjqueryasp.netajaxmicrosoft-ajax

Encountered an exception while trying to retrieve data with a successful status code of 200

Why is a very simple get() function entering the catch block even when the status code is 200? const { promisify } = require('util'); const { get, post, patch, del } = require('https'); //const [ getPm, postPm, patchPm, deletePm ] = [ ...

javascriptnode.js

Looking to display parent and child elements from a JSON object using search functionality in JavaScript or Angular

I am trying to display both parent and child from a Nested JSON data structure. Below is a sample of the JSON data: [ { "name": "India", "children": [ { "name": "D ...

javascriptangulartypescript

Unable to retrieve translations using language header in axios are not successful

My goal is to create a single-page website with multiple components. I am facing an issue where only one language appears instead of fetching translations from the API for each component. When using Promise.all() in the index page, the translations do not ...

javascriptaxiosnext.js