Loop through a non-array or non-object / handling both arrays and non-arrays equally

Question

Loop through a non-array or non-object / handling both arrays and non-arrays equally

Sometimes, I find myself needing to handle arrays and single objects in a similar manner. For instance, I may have an object property that can be either an array or just a string (like the scale property):

[
 {
    "name": "Experiment type14",
    "id": "00000000014",
    "scale": ["Whole Brain", "Cell"],

 },
 {
    "name": "Experiment type15",
    "id": "00000000015",
    "scale": "Cell",
 }
]

I'd like to display my scale as follows:

<span ng-repeat="scale in experimentType.scale">
 <!--some decoration here--> {{scale}}
</span>

Naturally, this approach wouldn't work for single string values. Is there a more elegant solution to seamlessly handle both strings and arrays without worrying about the data type?

javascript arrays angularjs angularjs-ng-repeat

Answer 1

Answer №1

If you want to create a personalized filter, you can follow the instructions provided below:

var app = angular.module("app", []);
function MainCtrl() {
  this.message = "Welcome";
  this.data = [{
    "id": "00000000016",
    "name": "Experiment type16",        
    "scale": ["Whole Brain", "Cell"],
   },{
    "id": "00000000017",
    "name": "Experiment type17",
    "scale": "Cell",
   }];  
}

function toList() {
  return function(input) {
    console.log(input);
    if (angular.isArray(input)) {
      return input;
    } else {
      return [input];
    }
  };
}

angular.module("app").controller("MainCtrl", MainCtrl);
angular.module("app").filter('toList', toList);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="app">
  <div ng-controller="MainCtrl as vm">
    <div class="container">
       <h3>{{ vm.message }}</h3>
      <div ng-repeat="item in vm.data">
        <p>{{ item.name }}</p>
        <ul>
          <li ng-repeat="scale in item.scale | toList">{{ scale }}</li>
        </ul>
      </div>
    </div>
  </div>
</body>

Answer 2

If you want to create a personalized filter, you can follow the instructions provided below:

var app = angular.module("app", []);
function MainCtrl() {
  this.message = "Welcome";
  this.data = [{
    "id": "00000000016",
    "name": "Experiment type16",        
    "scale": ["Whole Brain", "Cell"],
   },{
    "id": "00000000017",
    "name": "Experiment type17",
    "scale": "Cell",
   }];  
}

function toList() {
  return function(input) {
    console.log(input);
    if (angular.isArray(input)) {
      return input;
    } else {
      return [input];
    }
  };
}

angular.module("app").controller("MainCtrl", MainCtrl);
angular.module("app").filter('toList', toList);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="app">
  <div ng-controller="MainCtrl as vm">
    <div class="container">
       <h3>{{ vm.message }}</h3>
      <div ng-repeat="item in vm.data">
        <p>{{ item.name }}</p>
        <ul>
          <li ng-repeat="scale in item.scale | toList">{{ scale }}</li>
        </ul>
      </div>
    </div>
  </div>
</body>

Answer 3

Answer №2

Here is a function I created and implemented within the current scope:

$scope.myCustomFunction = function (data) {
        if (Object.prototype.toString.call(data) === '[object Array]') {
            return data;
        }
        return [data];
    };

To utilize this function, I simply do the following:

<span ng-repeat="item in myCustomFunction(someData)">
 <!--add styling or other actions here--> {{item}}
</span>

Answer 4

Here is a function I created and implemented within the current scope:

$scope.myCustomFunction = function (data) {
        if (Object.prototype.toString.call(data) === '[object Array]') {
            return data;
        }
        return [data];
    };

To utilize this function, I simply do the following:

<span ng-repeat="item in myCustomFunction(someData)">
 <!--add styling or other actions here--> {{item}}
</span>

Loop through a non-array or non-object / handling both arrays and non-arrays equally

Answer №1

Answer №2

Similar questions

When a td element is clicked, the Textbox will also be clicked

How to create a tooltip for overflowing text in Angular UI-Select?

How to create a donut chart in Highcharts without an inner pie section?

Retrieve the response retrieved from AJAX/jQuery and insert it into the designated form input field

Automatically fill in options for up to 3 dropdown menus depending on the choices made in the previous dropdown menu

Formatting dates in the Bootstrap Date Picker within Angular 6

globalThis undefined following git hiccup

VueJS Components experiencing issues with displaying images

What is the best way for me to implement a .config feature to allow for customization of my

Share on iOS using $cordovaSocialSharing

A guide on how to mention users in Discord.js

What is the best way to execute a specific set of unit tests in Gulp-Angular using Karma?

Ensure that a group of checkboxes is mandatory

An array containing a list of URLs linked together

Learn how to eliminate all text characters from a string using jQuery, leaving only the numerical values behind

looking to showcase the highest 'levelNumber' of elements within an array

Encountering a display issue within a port using Express

Utilize a vanilla JavaScript object as the primary model in Ember

Need a tool for validating forms?

Tips for ensuring that the click event function properly for numerous elements sharing the same class