How to iterate over an array and assign values to distinct labels using AngularJS

Challenge

My goal is to present the user with information about their upcoming 4 events. I have used splice on an array to extract the first 4 objects. Now, I need to iterate through these objects and display the relevant data.

Each label is unique and will contain distinct names.

I am unsure if my current approach is correct as this project serves as a learning experience for me.

Snippet

Below is a part of my ASP.NET code that showcases the 4 events:

<div class="row" style="padding-top: 10px; padding-bottom: 10px; border: 1px solid #ddd; border-radius: 2px; margin-top: 25px; border-left: 4px solid #21cd25; font-size: 12px;">
    <div class="col-lg-12">
        <span class="glyphicon glyphicon-ok" style="color: #21cd25; padding-right: 10px;"></span>
        <span style="font-weight: 500;">10 Days - </span>
        <span>Holiday</span>
    </div>
</div>
<!-- Additional event rows removed for brevity -->

The labels provide details such as days left until the event and the type of event itself.

Function in Controller:

function GetNext4UserEvents() {

    var top4 = _allUserEvents.splice(0, 4);

}

I haven't made significant changes to this function as I'm still exploring the best approach. However, it successfully extracts the top 4 objects from the data.

An example object structure is shown below:

0: Object
    color: "#cc0000"
    end: "2016-02-20"
    id: 6
    start: "2016-02-10"
    title: "Test2"
javascriptasp.netarraysangularjs

Answer №1

It’s possible that I may have misunderstood your inquiry, but here is an attempt to display your events. While it might not align perfectly with your expectations, it could serve as a good starting point. I’ve set up a jsFiddle for you to experiment with the code.

HTML:

<div ng-app="app">
  <div ng-controller="ctrl">
    <div class="row" style="padding-top: 10px; padding-bottom: 10px; border: 1px solid #ddd; border-radius: 2px; margin-top: 25px; border-left: 4px solid #21cd25; font-size: 12px;" ng-repeat="event in sampleEvents">
      <div class="col-lg-12">
        <span class="glyphicon {{event.color | findIcon}}" ng-style="{'color': event.color, 'padding-right': '10px'}"></span>
        <span style="font-weight: 500;">{{event.start | daysOut}} - </span>
        <span>{{event.title}}</span>
      </div>
    </div>
  </div>
</div>

JS:

angular.module("app", ["angularMoment"])
  .filter("daysOut", function(moment) {
    return function(input) {
      return moment.duration(moment(input) - moment()).humanize();
    };
  })
  .filter("findIcon", function() {
    return function(input) {
      switch (input) {
        case "#cc0000":
          return "glyphicon-remove";
          break;
        case "#008000":
          return "glyphicon-ok";
          break;
        case "#ffa500":
          return "glyphicon-question-sign";
          break;
      }
      return "glyphicon-ok";
    }
  })
  .controller("ctrl", function($scope) {
    $scope.sampleEvents = [{
      color: "#cc0000",
      end: "2016-04-01",
      id: 1,
      start: "2016-03-19",
      title: "Event 1"
    }, {
      color: "#008000",
      end: "2016-04-03",
      id: 2,
      start: "2016-03-22",
      title: "Event 2"
    }, {
      color: "#ffa500",
      end: "2016-04-15",
      id: 3,
      start: "2016-04-02",
      title: "Event 3"
    }, {
      color: "#008000",
      end: "2016-04-14",
      id: 4,
      start: "2016-03-13",
      title: "Event 4"
    } ];
  });

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 are the best practices for incorporating user authentication with AngularJS 1.5's Component Router?

I haven't fully delved into Angular 2 yet, but I'm excited to explore their updated router and components. Just some context: I'm running a Python instance on Google App Engine that integrates Endpoints with Angular. Can someone guide me o ...

angularjsangular-component-router

AJAX cached outcomes

Trying to educate myself on AJAX using w3schools.com, but struggling with a particular example: xhttp.open("GET", "demo_get.asp", true); xhttp.send(); In the above example, there might be a cached result. To prevent this, you can include a unique ID in t ...

javascriptphpajaxcaching

When the properties change, React Router Redux does not get rendered

I am encountering a challenge with using react router redux, where everything seems to be working well except for rendering when props change. Index.js import React from 'react'; import ReactDOM from 'react-dom'; import {Provider} fro ...

javascriptreactjsreact-routerreact-router-redux

Display a list of items using ReactJS by mapping through an array of objects and rendering based on

How can I render a set of <div> </div> based on the items in an object without having to specify their names? In the code snippet below, I want the display of WorkObjectID and WorkObjectVal to be dynamic rather than static. If I include TempOb ...

javascriptarraysreactjsreactjs-fluxreactjs-native

Utilize v-for to dynamically showcase a variety of images on your

My goal is to showcase several JPG pictures located in the src/assets/images folder by utilizing the v-for directive. However, it seems like the browser is having trouble locating them. Interestingly, manually adding the pictures with the same paths works ...

javascriptvue.js

Resetting the Angular provider configuration whenever the service is injected into a different location

Trying to wrap my head around a rather complex issue here. I have a service set up as a provider in order to configure it. Initially, this service has an empty array of APIs which can be dynamically added to by various configuration blocks. When adding API ...

javascriptangularjsangular-providers

Receive information from a form and store it in an array

Struggling to figure out how to convert this into an array. I'm having trouble grasping the concept of taking input from a form and storing it in an array. In my project instructions, it clearly states: Do NOT save the input in variables and then tra ...

javascripthtmlarrays

What is the best way to delete a jQuery.bind event handler that has been created for an event

I have a div and I need to assign two scroll functions to it, but I also want to remove one of them after a certain condition is met. <div id="div1" class="mydivs"> something </div> <div id="div2">Some crap here</div> <script&g ...

javascriptjqueryhtmlajax

Transforming an array of strings into a Name/Value object using JavaScript

Recently, I encountered a Web Service that sends an array of strings to the client. My goal is to transform this array into an object where each string has a name for future reference. Let's start with: var result = ["test", "hello", "goodbye"]; An ...

javascriptjquery

"Want to learn how to dynamically disable an input field in AngularJS when another field is selected? Find out how to achieve this using the

Hey there, I'm dealing with two input fields. Input field A is a drop-down menu and input field B. They both have the same value (same ng-model). My goal is to clear the second input field whenever the user selects an option from the dropdown. Can any ...

javascriptjquerypythonangularjsdjango

Is it possible for a table row's cell to determine the value of the cell in the row above it?

Let me illustrate my issue with an example. Consider the following table: <table> <tr> <th>First</th><th>Second</th><th>Third</th> </tr> <tr> <td>A</td><t ...

javascriptjqueryhtml

Having trouble with table sorting in Jquery?

I am a beginner in the realm of Jquery and web programming. Recently, I attempted to implement the tablesorter jquery plugin for one of my projects but encountered issues with making it work properly. In search of a solution, I turned to Stack Overflow. C ...

javascriptjqueryhtmltablesorter

Do AJAX requests make Cross-site scripting attacks more significant?

Currently, I am in the process of developing a React application that utilizes a PHP (Codeigniter) backend. Despite Codeigniter not handling this issue automatically, I have taken it upon myself to delve into the matter. While I comprehend the importance ...

javascriptphpajaxxss

Customizing the appearance of ASP.NET file uploader for various sizes

Has anyone successfully changed the width of the ASP.NET file uploader? I attempted by adding the CssClass, but it did not work. Is there an alternative method to adjust the width? Thanks in advance. ...

asp.nethtmlfile-uploadcss

JavaScript code that displays items in a shopping cart

I've set up the HTML and JS functionality for the cart, but I'm facing an issue where the JS doesn't render the cart items when the shop item is clicked. The styling in my HTML is done using Tailwind. If anyone could provide some assistance ...

javascripthtmlcss

Encountering a problem with displaying error messages in an empty text field

I am facing an issue with displaying error messages when a text field is left blank. I would like a simple message, such as "can't be empty", to appear below the text field in red color when the user clicks the submit button and leaves multiple fields ...

javascriptphphtmlmessagebootstrap-modal

The NPM version needs to be updated as it is outdated

Struggling with a dilemma here. My Laravel project is quite dated, and I'm unable to execute npm run dev. Let's take a look at some code: php artisan laravel --version: Laravel Framework 5.8.38 node --version: v16.16.0 This is the current Node v ...

javascriptnode.jsnpmwebpacklaravel-5

Customize the icon used for expanding and collapsing in AngularJS

I want to modify the icon (e.g., plus, minus) when clicking on an expand-collapse accordion. Currently, I am using the Font Awesome class for icons. While I know it can be easily achieved with jQuery, I'm wondering if there is a way to do this in Angu ...

javascriptangularjsfont-awesomeangularjs-ng-click

Having trouble retrieving the value of the second dropdown in a servlet through request.getParameter

I am facing an issue with storing the value of the second dropdown in a servlet after utilizing an ajax call in Java to populate it based on the selection made in the first dropdown. While I was able to successfully store the value of the first dropdown ...

javascriptjavaajaxpostgresqlservlets

Issue with sending multiple files using FormData and axios in Vuex with Laravel. Server side consistently receiving null. Need help troubleshooting the problem

After trying the solution from my previous question Vuex + Laravel. Why axios sends any values but only not that one, which come's with method's parameter?, I realized that it only works when passing a single argument in axios. I managed to succe ...

javascriptlaravelvue.jsaxiosvuex