Extract information from a key-value pair system and then contrast it with the values obtained from looping through a collection in AngularJS

Question

Extract information from a key-value pair system and then contrast it with the values obtained from looping through a collection in AngularJS

Two fundamental inquiries:

1) Within my controller, I have defined a list with key-value pairs and I am trying to access the event name based on the eventID in order to log it in the console.

$scope.events = [
  {eventID:3200, eventName:"Event One"},
  {eventID:3201, eventName:"Event Two"}
];

I attempted the following code:

 if($scope.events.eventID == 3200) {
    console.log("Ok");
  }

However, it did not work as expected.

2) In my view, there is a table displaying data retrieved from a web service. My goal is to display the description in the table based on the eventID from the $scope.events list. There is a field called event within my ng-repeat that can be used for comparison, but I am unsure how to achieve this.

<tr ng repeat d in data>
  <td>d.Description</td>
  <td>d.anyValue</td>
</tr>

Any assistance would be greatly appreciated. I am new to Angular and in need of guidance :)

javascript angularjs

Answer 1

Answer №1

Implement controller method

$scope.filterEvents = function(obj){
  return obj.eventID  === 3200;
}

Integrate it into the view

<tr ng-repeat="event in events | filter:filterEvents">
  <td>{{ event.title }}</td>
  <td>{{ event.date }}</td>
</tr>

Answer 2

Implement controller method

$scope.filterEvents = function(obj){
  return obj.eventID  === 3200;
}

Integrate it into the view

<tr ng-repeat="event in events | filter:filterEvents">
  <td>{{ event.title }}</td>
  <td>{{ event.date }}</td>
</tr>

Answer 3

Answer №2

To tackle question number 1, give this a try:

if($scope.events[0].eventID  == 3200) {
  console.log("Ok");
}

If you want to loop through using this method:

angular.forEach($scope.events, function (value) {
  if (value.eventId === 3200) {
  {
    console.log('OK');
  }
});

For the second question, create a helper function that retrieves the eventName based on the ID.

$scope.getEventName = function (eventId) {
  var result = '';
  angular.forEach($scope.events, function (value) {
    if (value.eventID === eventId) {
      result = value.eventName;
      return false;
    }
  });
  return result;
}

<tr ng-repeat="d in (exportDataEventDesc.result.slice(5, exportDataEventDesc.result.length-2))">
  <td>{{d.Description}}</td>
  <td>{{d.anyValue}}</td>
  <td ng-bind="getEventName(d.merchMetrics.EVENT_ID)" style="text-align: left"></td>
</tr>

Answer 4

To tackle question number 1, give this a try:

if($scope.events[0].eventID  == 3200) {
  console.log("Ok");
}

If you want to loop through using this method:

angular.forEach($scope.events, function (value) {
  if (value.eventId === 3200) {
  {
    console.log('OK');
  }
});

For the second question, create a helper function that retrieves the eventName based on the ID.

$scope.getEventName = function (eventId) {
  var result = '';
  angular.forEach($scope.events, function (value) {
    if (value.eventID === eventId) {
      result = value.eventName;
      return false;
    }
  });
  return result;
}

<tr ng-repeat="d in (exportDataEventDesc.result.slice(5, exportDataEventDesc.result.length-2))">
  <td>{{d.Description}}</td>
  <td>{{d.anyValue}}</td>
  <td ng-bind="getEventName(d.merchMetrics.EVENT_ID)" style="text-align: left"></td>
</tr>

Extract information from a key-value pair system and then contrast it with the values obtained from looping through a collection in AngularJS

Answer №1

Answer №2

Similar questions

Incorporating a function from a separate .js file into an index.ejs view using app.js

Ways to modify the color of cells in a table generated from JSON

Vue.js - the value of this is not defined

generate a customized synopsis for users without storing any data in the database

Why isn't my AJAX POST request to PHP functioning correctly?

Find and Scroll Dropdown Menu with Bootstrap Framework

I utilized the `<script src="sample.pdf"></script>` tag in my HTML code and surprisingly, the JavaScript within the PDF document was still able to execute

How to align an image in the center of a circular flex container

Ensuring the dropdown menu's functionality in AngularJS

Shuffle Image and Color Combinations on Website

Failed Axios POST request on iOS devices

What is the correct way to utilize the BigInt right shift operator and XOR in JavaScript?

Executing selenium tests on Internet Explorer 11 on a Windows 10 1809 machine without encountering any new pop-up windows

Issue with button style in dropdown menu in Twitter Bootstrap

Modifying state within useEffect while also including the redux value as a dependency array

rearranging items from one list to another list

Exploring the power of Ajax within the MVC framework

AngularJS UI-calendar fails to display updated events on Calendar

jQuery plugin modifies keypress events

Tips on expanding the row number column width in jqGrid