Using ng-repeat to iterate over an array of strings in Javascript

I am working with a JavaScript Array that contains strings:

for(var i =0; i<db.length; i++)
    console.log(db[i]);

When I run the code, the output is as follows:

dbName:rf,dbStatus:true
dbName:rt,dbStatus:false

Now, I am trying to use ng-repeat to loop over the array:

$scope.DBArray = db;

This is how I am trying to do it in HTML:

<ul>
    <li ng-repeat = "line in DBArray">
      {{line.dbName}} - {{line.dbStatus}}
    </li>
</ul>

However, the loop is not working as expected. Any ideas on how to fix it?

Answer №1

You have overlooked the curly braces on the second line. dbStatus. The JavaScript array's output does not resemble JSON or an array to me.

dbName:rf, dbStatus:true
dbName:rt, dbStatus:false

It should look more like

[{
    dbName:rf, dbStatus:true
 },
 {
    dbName:rt, dbStatus:false
}]

This could be a problem causing ng-repeat to not work properly.

Take a look at the plunker

Answer №2

It appears that DBArray is an array of objects containing properties dbName and dbStatus.

Make sure to update your HTML like so:

<ul>
    <li ng-repeat="line in DBArray">
      {{line.dbName}} - {{line.dbStatus}}
    </li>
</ul>

Hopefully, this modification will work.

If it still doesn't work, please send the complete error message to the console.

The issue was that **line.dbStatus** should be wrapped in an Angular expression like this: {{line.dbSatus}}

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

What is the best way to access a scope variable within a directive in Angular?

I need to access a scope variable within a directive as a JavaScript variable. Here is the code snippet: app.controller("Home", ["$scope", function($scope) { ... $scope.nb_msg = data.length; ... }]); app.directive("myDiv", function() { // ...

I have developed a website that can calculate the factorial of any given number. The next step is to design a function that will display the step-by-step mathematical process

Could use a hand with this one. The function below is empty and I'm a bit stuck on what to do next. Right now, the webpage displays the factorized number, but I want to show the mathematical equation before it, like so: User inputs: 3 Site outputs: " ...

What steps can I take to stop the textfield from automatically changing the ID "myid" to "myid-tokenfield" when using Tokenfield for Bootstrap?

While utilizing Tokenfield for Bootstrap, I have encountered an issue where the id of my textfield gets modified from myid to myid-tokenfield. In order to properly interact with the search engine I am using, this textfield must maintain a specific id. The ...

Is there a way for me to determine the dimensions of the webcam display?

How do I determine the width and height of the camera in order to utilize it on a canvas while preserving proportions? I am attempting to ascertain the dimensions of the camera so that I can use them on a canvas. On this canvas, I plan to display live vid ...

Twice the data fetching through ajax on popup is observed using php mysql

I've been struggling for the past two hours. Attempted : location.reload(); reset form Tried many features, but after closing my popup and reopening it or opening another ID, the previous ID data is still visible. This happens continuously for all ...

What is causing the failure of the serial reader in NodeJS?

I have successfully installed serialport using npm, but for some reason it is encountering connection issues. $ ls /dev/tty.* /dev/tty.Bluetooth-Incoming-Port /dev/tty.usbserial-AI0255BX $ cat /var/tmp/test.js var SerialPort = require('serialport ...

Troubleshooting Tips: Investigating a Service Call in AngularJS 2 using ES6 Syntax

MY DILEMMA: I have recently started learning Angular2 and found myself wanting to debug a service call. The service appears to have been properly called, as evidenced by the view display. However, when trying to log the content of the variable holding t ...

Cluster multiple markers on a Google Map using Angular

It's surprising that there are no examples discussing the utilization of multiple MarkerClusterers in AngularJS Google Maps. To showcase my code, I have created a Plunker: http://plnkr.co/edit/TlkZ18IMbWKxI8pdgwko?p=preview The structure of the tem ...

Conditional Rendering with Next.js for Smaller Displays

I've implemented a custom hook to dynamically render different elements on the webpage depending on the screen size. However, I've noticed that there is a slight delay during rendering due to the useEffect hook. The conditionally rendered element ...

Analyzing a problem with a table directive

Here is the custom directive code I have written: currentApp.directive('testList', ['$compile', function ($compile) { return{ restrict: 'E', template: '<table></table>', ...

Send the data to the web form along with the JSON information

I find myself in a situation where I am looking for alternative ways to pass data to a redirect page without using querystrings. Here is the current implementation on the Source Page: window.location = "invaliduser.aspx?u=" + encodeURI(username); Consi ...

How to utilize Vue method for accessing DOM elements

I'm working on a container with various elements like h1, p, etc. The container has a background and I'm trying to create a method to move it based on mouse coordinates. However, I'm facing an issue where the e.target is showing me ele ...

Encountering an "Angularjs 1.2.x Injector:modulerrr" error, even after successfully incorporating ngRoute

I am currently learning angularjs and I have encountered a persistent error. Despite multiple attempts at troubleshooting, I have been unable to resolve it. Here is the code that I have: index.html <!doctype html> <html ng-app="myApp"> <he ...

image source that changes dynamically with a placeholder image

Currently, I am facing a certain issue. Unfortunately, I cannot provide a plunkr example as the image is sourced from a protected site and there are no open URLs available that constantly serve changing images. Additionally, I am unable to use a local anim ...

Having difficulty manually concealing the launch image on the physical device

When testing my trigger.io app on the Android simulator or my Nexus phone, I can manually hide the launch image through code successfully. However, when running the app on the iOS simulator, the launch image remains visible. Additionally, when debugging di ...

Error: You are not able to utilize an import statement outside of a module when utilizing the `fast-image-zoom` feature

Currently, I am attempting to integrate fast-image-zoom into my React/Next.js application and unfortunately encountering an error message that reads: SyntaxError: Cannot use import statement outside a module at Object.compileFunction (node:vm:353:18) ...

Angular sorting - Strings with undefined values are placed at the end

I am looking to understand how to effectively utilize the Angular orderBy filter with a custom sorting function that places undefined values at the end. For numeric sorting, my code looks like this: <tr ng-repeat="item in items | handleEmptyValues(sor ...

Challenges arise when using Bootstrap 4 for country selection

There have been reports that bootstrap 4 country select is not functioning properly. In an effort to troubleshoot, I delved into the documentation to find a solution. To make bootstrap-select compatible with bootstrap 4, refer to: Bootstrap 4 beta-2 ...

Symfony2: Using Ajax to send data to a controller

I have implemented a search input on my website that allows users to search for content within my database. I want this search input to function similarly to the search bar on Facebook, using Ajax for instant searching. Despite trying various code snippets ...

InvalidType Error: The roles provided are not in the correct format, it should be a Role, Snowflake, or an Array/Collection of Roles or Snowfl

Having trouble setting up multiple select menu options on Discord.js v14. I'd like to assign more than one role to a member when multiple options are chosen in the dropdown menu. However, I'm encountering this error message: TypeError [Invalid ...