AngularJS Error: $element.find(...) does not support iteration

I'm attempting to utilize a datatable in my AngularJS application. Below is the HTML code I've implemented:

   <div ng-app="datatable">
                             <div ng-controller="voucherlistcontroller">
                                <table class="table table-bordered" id="dataTable" width="100%" cellspacing="0"
                                       my-table="overrideOptions"
                                       aa-data="voucherList"
                                       ao-column-defs="columnDefs"
                                       fn-row-callback="myCallback" >
                                    <thead>
                                    <tr>
                                        <th>VIN Date</th>
                                        <th>VIN No</th>
                                        <th>Receive Type</th>
                                        <th>Amount</th>
                                        <th>Particulars</th>
                                        <th>Posted</th>
                                        <th>Status</th>
                                        <th>Preview</th>
                                    </tr>
                                    </thead>
                                    <tbody ng-repeat = " vlist in voucherList">
                                            <tr>
                                                <td>{{vlist.vindate}}</td>
                                                <td>{{vlist.vinno}}</td>
                                                <td>{{vlist.receivetype}}</td>
                                                <td>{{vlist.amount}}</td>
                                                <td>{{vlist.particulars}}</td>
                                                <td>{{vlist.posted}}</td>
                                                <td>{{vlist.status}}</td>
                                                <td>{{vlist.preview}}</td>
                                            </tr>
                                    </tbody>
                                </table>
                             </div>
                         </div>

Below is the angularJS code I've utilized:

 var dialogApp = angular.module('datatable', []);

    dialogApp.directive('myTable', function() {
        return function(scope, element, attrs) {

            // apply DataTable options, use defaults if none specified by user
            var options = {};
            if (attrs.myTable.length > 0) {
                options = scope.$eval(attrs.myTable);
            } else {
                options = {
                    "bStateSave": true,
                    "sDom":"lftipr",
                    "searching": true,
                    "iCookieDuration": 2419200, /* 1 month */
                    "bJQueryUI": true,
                    "bPaginate": true,
                    "bLengthChange": false,
                    "bFilter": false,
                    "bInfo": false,
                    "bDestroy": true
                };
            }

            var explicitColumns = [];
            element.find('th').each(function(index, elem) {
                explicitColumns.push($(elem).text());
            });
            if (explicitColumns.length > 0) {
                options["aoColumns"] = explicitColumns;
            } else if (attrs.aoColumns) {
                options["aoColumns"] = scope.$eval(attrs.aoColumns);
            }

            if (attrs.aoColumnDefs) {
                options["aoColumnDefs"] = scope.$eval(attrs.aoColumnDefs);
            }

            if (attrs.fnRowCallback) {
                options["fnRowCallback"] = scope.$eval(attrs.fnRowCallback);
            }

            var dataTable = element.dataTable(options);

            scope.$watch(attrs.aaData, function(value) {
                var val = value || null;
                if (val) {
                    dataTable.fnClearTable();
                    dataTable.fnAddData(scope.$eval(attrs.aaData));
                }
            });
        };
    });

dialogApp.controller("voucherlistcontroller" ,function Ctrl($scope) {

    $scope.message = '';

        $scope.myCallback = function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {
            $('td:eq(2)', nRow).bind('click', function() {
                $scope.$apply(function() {
                    $scope.someClickHandler(aData);
                });
            });
            return nRow;
        };

        $scope.someClickHandler = function(info) {
            $scope.message = 'clicked: '+ info.price;
        };

        $scope.columnDefs = [
            { "mDataProp": "vindate", "aTargets":[0]},
            { "mDataProp": "vinno", "aTargets":[1] },
            { "mDataProp": "receivetype", "aTargets":[2]},
            { "mDataProp": "amount", "aTargets":[3]},
            { "mDataProp": "particulars", "aTargets":[4]},
            { "mDataProp": "posted", "aTargets":[5]},
            { "mDataProp": "status", "aTargets":[6]},
            { "mDataProp": "preview", "aTargets":[7]}
        ];

        $scope.overrideOptions = {
                                "bStateSave": true,
                                 "sDom":"lftipr",
                                "searching": true,
                                "iCookieDuration": 2419200, /* 1 month */
                                "bJQueryUI": true,
                                "bPaginate": true,
                                "bLengthChange": false,
                                "bFilter": false,
                                "bInfo": false,
                                "bDestroy": true
        };


        $scope.voucherList = [--some data-];

An error message shows up stating - TypeError: element.find(...).each is not a function at Object.. While all the necessary references have been provided on the HTML page, such as:

Any suggestions on how to resolve this issue will be greatly appreciated. Thank you!

Answer №1

The reason for the error is that the element is a DOM element, not a jQuery object. The correct code snippet should be:

 $(element).find('th').each(function(index, elem) {
            explicitColumns.push($(elem).text());
        });

Instead of:

 element.find('th').each(function(index, elem) {
            explicitColumns.push($(elem).text());
        });

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

Enhancing MEAN Stack Application by Updating Table Post Database Collection Modification

In my efforts to ensure that my table data remains synchronized with the database information, I have encountered an issue. Whenever Data Changes: $scope.changeStatus = function($event,label,status){ var target = $event.currentTarget; target ...

Tips for changing a "raw" DOM Event into a React SyntheticEvent

Currently, I am working with two separate libraries. The first library emits "raw" DOM events (lib.dom.d.ts), while the other library consumes React.SyntheticEvents. I am seeking advice on the most efficient method to transform the raw event into a Synthe ...

Tips for streamlining the transfer of essential features from a main project to its duplicate projects

In my Angular project, I have a core repository on GitHub that serves as the foundation for custom client projects. Each time a new client comes onboard, we create a clone of the core project and make customizations based on their requirements. The issue ...

jQuery click() function fires twice when dealing with dynamic elements

I am loading content from a database through ajax into a div and then when clicking on any of these content pieces, it should reload new content. The ajax request is initialized as a method within a class that I call at the beginning: function Request(ta ...

What exactly are Node.js core files?

I recently set up my Node.js application directory and noticed a presence of several core.* files. I am curious about their purpose - can these files be safely removed? The setup involves installing Node.js alongside Apache using mod_proxy to host one of ...

Animation does not occur after the stop() function is executed

My goal is to create a functionality where, upon moving back to the grey content box after leaving the button, the slideUp animation stops and the content slides down again. This works seamlessly with jQuery 1.x (edge), but when I switch to jQuery 1.10, th ...

In MongoDB, learn the process of efficiently updating nested objects in a dynamic manner

We have a variety of nested configurations stored in MongoDB. Initially, we store the following object in MongoDB: const value = { 'a': { 'b': 1 } } collection.insertOne({userId, value}) Now, I would like to modify the object in ...

Is there a way to eliminate an object from a multidimensional nested array in JavaScript and retrieve the parent array?

Can anyone help me figure out how to delete the "fields" object with id 47 from this nested array using JavaScript and return the entire parent array? [{ "id": 10, "name": "phone", "fields": [ { ...

What steps should be taken to address the issue when the .media$thumbnail.url cannot be located

Creating a custom widget for bloggers <script type="text/javascript"> function mycallback(jsonData) { for (var i = 0; i < jsonData.feed.entry.length; i++) { for (var j = 0; j < jsonData.feed.entry[i].link.length; j++) { ...

Trouble with Displaying HTML Table in Bootstrap 4.3.1 Tooltip

Struggling for hours to set up a custom HTML table in a tooltip box, I finally found that the Bootstrap version solves the issue. Surprisingly, it works perfectly under Bootstrap 4.0.0 but fails under Bootstrap 4.3.1. Could this be a bug or am I overlooki ...

Encountering problems when trying to display two lines using JSON data on Highcharts in AngularJS - name not defined

Trying to dynamically plot a high chart using Angular JS. I have two lines that I want to show on the same graph. An example item in the 'jsondata' is: { "ID": 123456, "SaleDate": "2016-02", "SalesAgeBuck ...

Using Bootstrap's nav-pills inside a table

Is there a way to incorporate Bootstrap Nav Pills into a table, with the "tab buttons" located in the last row of the table? I've attempted it but it doesn't seem to be functioning correctly. Check out this link for reference <table clas ...

Title Tooltip Capitalization in Vue.js: A Guide

Is there a way to change only the first letter of the title tooltip (from a span) to be capitalized? I attempted using CSS with text-transform: capitalize;, however, it didn't have the desired effect. <template lang="pug"> .cell-au ...

What is the function of the OmitThisParameter in TypeScript when referencing ES5 definitions?

I came across this specific type in the ES5 definitions for TypeScript and was intrigued by its purpose as the description provided seemed quite vague. /** * Removes the 'this' parameter from a function type. */ type OmitThisParameter<T> ...

Tips on how to retrieve the current value of a scope variable in jQuery

When making a $http request to save data on the server and receiving a json response, I want to show an Android-style message using Toast for either success or failure based on the response. Initially, I set a scope variable to false $scope.showSuccessToa ...

activating a jQuery function and sending a parameter

Looking for some help with JavaScript - I'm having trouble getting this code to work. I need to trigger a predefined function from one script within my AJAX script. Specifically, I want to activate the qtip functionality on the content of a div that i ...

The Flot chart updates with a new data point appearing at the end whenever there is a change in

Incorporating the following flot chart directive: /**========================================================= * Module: flot.js * Initiates the Flot chart plugin and manages data refresh =========================================================*/ (fu ...

Is it possible to have nullable foreign keys using objectionjs/knex?

It seems like I'm facing a simple issue, but I can't quite figure out what mistake I'm making here. I have a table that displays all the different states: static get jsonSchema() { return { type: 'object', propert ...

What causes the Angular child component (navbar) to no longer refresh the view after a route change?

Hello everyone, I'm excited to ask my first question here. Currently, I am working on developing a social network using the MEAN stack and socket.io. One of the challenges I am facing is displaying the number of unread notifications and messages next ...

Challenges encountered in exporting functions with Webpack 5

Imagine having an exported function called createTableFromJSON(json) from the main file named index.js. The configuration example below adheres to the guidelines outlined in Webpack's official documentation: const config = { entry: './assets/ja ...