How to effectively loop through key-value pairs in Angular?

After receiving the JSON response from the server as shown below,

{"errors":{"email":["is invalid"],"password":["can't be blank"]}}

I assigned it to a scope named "errors" in my controller and am utilizing it in my view.

Here is an example of my view:

<div class="alert alert-danger" role="alert" ng-show="errors" ng-repeat="error in errors">
    <li ng-repeat="(key, value) in error">{{key}} {{error[key]}}</li>
</div>

The problem I am encountering is that it displays the values enclosed in arrays as well. How can I properly loop through so that it doesn't display the array symbols and quotes?

Currently, this is what is being displayed:

email ["is invalid"]
password ["can't be blank"]

Answer №1

Remember that the values are actually arrays with just one item, so make sure to access them using value[0]:

<div class="alert alert-danger" role="alert" ng-show="errors" ng-repeat="error in errors">
   <li ng-repeat="(key, value) in error">{{ key }} {{ value[0] }}</li>
</div> 

Check out the example here: http://plnkr.co/edit/0dOM0ZUCKXFXX2Y2a7a3?p=preview

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

Sort the array of objects based on the nested attribute

I am facing a challenge in ordering an array based on a nested object. The array contains information about objects on a timeline and I would like to sort it by the start position defined within nested arrays. Currently, I am able to iterate through the ar ...

Why does .attr("value") keep giving me undefined?

I'm experiencing an issue with a hidden element in my jQuery script: <input type="hidden" id="1val" value="24"> var valID = $("#1val").attr("value"); Despite setting the value attribute, when I attempt to print valID, it always shows up as und ...

Create an XML document containing attributes based on a generic JSON input

I have been working on creating a JSON to XML converter tool, but I'm stuck on how to convert certain JSON properties into XML attributes. For instance, consider the following JSON: { "data" : { "key1" : "value1", ...

ways to insert a fresh value into a recently instantiated object in typescript

I am currently using Angular 6 and dealing with arrays. I have an array along with a model. Here is the Array: let array = [ { id: 1, value: "Some Value", description: "Some Description" }, { id: 2, va ...

Complete the form even if the field is mandatory by leveraging the Bootstrap Checkout demonstration

I devised a straightforward form for entering text. The input of this text is mandatory. However, when I click on the submit button, the form gets submitted even if the required text field is empty. I took inspiration from this particular Bootstrap templ ...

How can we fix the null parameters being received by the ModelPage function?

I've been learning how to successfully pass values to a Post method using AJAX in .NET Core 6 Razor Pages, but I am encountering some difficulties. Below are the relevant codes: Front end: function calculateSalary() { var dropdown = document.get ...

Exploring the capabilities of pandas when working with json normalization

I have a simple JSON structure that I'm trying to normalize. data = [{"pedido": {"situacao": "OK", ....}}, {"pedido": {"situacao": "NOK", ...}}] rs = json_normalize(data, 'pedido& ...

Odd behavior of jQuery Fancybox after being closed

Could someone take a look at my script below and help me figure out why my fancybox is acting so strange? I have a form that, when the fancy box closes, should clear the form data and collapse the div where the results were displayed. It seems to work corr ...

Confirming a pop-up in Rails only when the checkbox is checked prior to saving to the database

I have encountered the following issue: Within a form for adding a new project on the 'projects/new' page, there is a checkbox that controls the 'is_public' attribute of the project. I want to display a JavaScript confirmation popup to ...

Managing JSON POST requests from HPKP error responders

Currently, I am exploring the implementation of HPKP on my web server. HPKP stands for HTTP Public Key Pinning and one of its features is the ability to specify an error reporting URI in the header. This allows clients to send error notices in the form of ...

Best practice for prop handling in components

As I dive back into using React, I want to make sure I'm following best practices. However, I've run into a bit of a roadblock when it comes to passing functions into a child component. Specifically, when the function being passed requires props ...

Generate nth-child selectors in a Material-UI component using props dynamically

I am currently working on customizing the Material UI slider component, specifically focusing on its marks prop to display the number of occurrences for each data object within the marks array. The desired appearance of the slider is illustrated in this i ...

Switching over the database for a session away from using ajax

I am currently working with an XML API that interacts with a database. My website utilizes the functions of this XML API to retrieve data from the database. I am facing a challenge where I need to update the database based on the user's selection on t ...

Is there a way to set the default timezone for the entire application to something like 'UTC' using JavaScript and Angular?

I'm currently developing a Hotel application where customers communicate using UTC. I have completed most of the work but everywhere I used the date object like so => new Date(). Before running the application, I need to change my local timezone to ...

What could be the reason for my electron application consistently displaying false results when using Google Authenticator, despite entering the correct token?

Within this snippet of code, I am initiating a request to the main process to create a QR code using speakeasy and qrcode. document.addEventListener('DOMContentLoaded', async function() { const data = await ipcRenderer.invoke('generate-q ...

My Next.js application does not display an error message when the input field is not valid

I've recently developed a currency converter application. It functions properly when a number is provided as input. However, in cases where the user enters anything other than a number or leaves the input field empty, the app fails to respond. I aim t ...

Inject various JavaScript data into different div containers

The issue at hand is quite straightforward. Here is a sample for displaying a single variable in a div with the "container" ID: let first = 5; document.getElementById('container').innerHTML = first; <div id="container"></div> How ...

The context menu event fails to activate on browsers running iOS 13.1 and higher when attempting to select text

After updating the iOS version to 13.1, we encountered an issue where the long-press context menu event is not triggering in the browser. Instead, the default browser context menu is being displayed. Our goal is to hide these context menus. !DOCTYPE htm ...

Mythology standing apart from tags, Circular Graph, Angular-nvD3

I am trying to find a way to show "Not acknowledged" and "Acknowledged" in the legend, with the amounts displayed as labels on the pie chart. I have looked into the directive options but haven't found a solution yet. https://i.sstatic.net/gh2eX.jpg ...

Guide on making a custom JSON class in Kotlin specifically for Fuel

My current issue involves a request that returns JSON: { "success": 0, "errors": { "phone": [ "Incorrect phone number" ] } } In my Kotlin code, I mistakenly used Fuel instead of Retrofit. This led to the creation of the following clas ...