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

Storing freshly acquired JSON data via AJAX into an already existing array

I am having an issue with an input field not reflecting the data from the Redux state in my React app,

Determining the duration since generating a unique objectid in mongodb

How can I execute JavaScript within a for loop in the server-side code?

Tips for passing parameters in a BootstrapDialog.show({ }) function popup

How can I customize the ngSrc directive in Angular to include a request header?

React Select streamlines dropdown options for multi-selection by abbreviating names

Steps for configuring type definitions for an Apollo error response

Using TypeScript and controllerAs with $rootScope

What are some reasons for the slow performance of AWS SQS?

Conflict between Angular's ng-repeat directive and Sass styling

Access Vuex Getters in a separate JavaScript file

Troubleshooting the Node.js Server Error Encountered when Enabling AngularJS html5Mode(true)

Transfer responsibilities of events to the canvas and then fetch the Element in the handler

Convert the easeInExpo function from jQuery easing to vanilla JavaScript and CSS

What about a lightbox with enhanced jQuery features?

Use ag-Grid to customize your column headers with checkboxes, allowing you to easily select or deselect all items in that column. This feature is not limited to

Copy both the image and JSON object to the clipboard

``How can one validate a radio button within a reducer by utilizing the event object that is passed into the reducer process

I'm curious about the origin of this.on event handler. Is it part of a particular library or framework?