When trying to implement Typeahead and AngularJS with preloaded data in the scope, an error "TypeError: Cannot call method 'then' of undefined" may occur

Attempting to implement this idea for a typeahead feature, I crafted the following code (which functions properly with json data, but not with this new data):

HTML

<input type="text" ng-model="result" typeahead="suggestion for suggestion in instObjs($viewValue)">

JS

function NavbarCtrl ($scope, cService, $http, limitToFilter) {

  $scope.institutions = [];

  cService.getInstitutions().then(function(institutions){
    $scope.institutions = institutions;
  });

  $scope.instObjs = function(institutions) {
    return $scope.institutions.name.then(function(response){
      return limitToFilter(response.data, 15);
    });
  };
};
javascriptangularjsbootstrap-typeaheadtypeahead

Answer №1

It appears that you may be attempting to access $scope.institutions.name before it has been assigned. It seems that $scope.instObjs is being called before the callback to cService.getInstitutions() is executed.

However, this is a result, not a root cause.

I notice that you are trying to retrieve the property name from an array. Are you certain you intended to do something like this:

$scope.instObjs = function(institutions) {
    return institutions.name.then(function(response){
      return limitToFilter(response.data, 15);
    });
  };

What I mean is using the parameter of your function instead of the array. This could be the underlying cause.

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

Issue: The GET request to a third-party API using Fetch API encountered a "TypeError: Failed to fetch" error

After conducting extensive research and investing hours into this issue, I am at the point where I need to seek assistance. I am attempting to make a GET call to a third-party Infutor API using the fetch API in my ReactJS Project. Initially, I encountered ...

javascriptreactjsfetch-api

Run a JavaScript function once the one before it has finished executing

I need help with executing a series of JavaScript functions in a specific order, where each function must wait for the previous one to complete. I've tried multiple approaches but haven't been successful so far. Any suggestions would be greatly a ...

javascriptjqueryasynchronoussynchronousjquery-callback

Dynamic content is loaded on the page using AJAX before refreshing to retrieve new

I am using the FullPage.js plugin and attempting to enable navigation between pages using AJAX. While using .load();, I am able to retrieve the desired page. However, it seems that I need to reload fullpage.js since the loaded page is not active and the s ...

javascriptphpjqueryajaxfullpage.js

The ng-repeat radio buttons are incorrectly selecting the wrong radio button

On my webpage, I am using ng-repeat to display a list of radio buttons. Strangely, when the page first loads and I click on the last radio button, the one next to it gets selected instead. This odd behavior only occurs the first time; if I click on the ...

angularjsradio-buttonangularjs-ng-repeat

Firefox not clearing Highcharts points properly

I am currently utilizing highcharts to generate dynamic charts when hovering over a table row. My goal is to clear and hide the chart once the mouse moves away from the row. While this functionality works smoothly in Chrome, I am encountering a strange is ...

javascriptjqueryhighcharts

What is the best way to describe duplicate keys within a JSON array?

I have created a specialized program to extract Dungeons and Dragons data from JSON files. While the main functionality is complete, I am struggling with defining unique keys for multiple attack options without manually assigning individual identifiers. H ...

javascriptnode.jsjson

Display a pop-up window using window.open and automatically print its contents using window.print upon loading

I am trying to open a new window with some HTML content and then automatically print it. Here is the code snippet I have: var windowObject = window.open('','windowObject','arguments...'); windowObject.document.write("<html ...

javascriptjquery

Uploading with Javascript CORS consistently ends with an error event occurring

My current challenge is uploading a file to a server using JavaScript in compliance with the CORS specification. While there are numerous examples available online that successfully upload the file, I encounter an error as the final event being fired. Up ...

javascriptajaxxmlhttprequestcors

Developing the latest version of ngx-charts

I'm currently working on adding a personalized feature to ngx-charts that I would like to include in a release version. I was successful in implementing it using the standard src directory, but now I want to build a release version for potential distr ...

javascriptangularnpmngx-charts

Ways to retrieve the state from the Redux store

While working on setting up the Redux store in my app.js file, I found myself populating it with data from the database. However, now I am faced with the task of obtaining the state of the store in a plain JavaScript file, not a React class. If I was work ...

javascriptreactjsreduxreact-reduxstates

difficulty associated with using a package I uploaded to npm

I am encountering issues with importing a package that I have published on npm. after executing npm install binaryconversor I have experimented with various ways of incorporating it. let conversor = require('binaryconversor'); let conversor = ...

javascriptnode.jsnpmrequire

recognizing individuals when a particular action is taken or when there is a disruption

Just starting to explore node.js I currently have a PHP/Laravel cms alongside a basic Nodejs game server that generates numbers in a loop To connect my PHP backend with Nodejs, I utilize Socketio and employ Socketio-JWT for user identification On the cl ...

javascriptnode.jssocket.iojwt

Exploring Angular 4.0: How to Loop through Numerous Input Fields

I am looking to loop through several input fields that are defined in two different ways: <input placeholder="Name" name="name" value="x.y"> <input placeholder="Description" name="description" value"x.z"> <!-- And more fields --> or lik ...

javascripthtmlcssangulartypescript

Invoke a Node.js script from a Spring Boot application to pass a Java object to the script. The script will modify the object and then return it back to the originating class

class Services { Address address = new Address(....); /* Invoke NodeJs script and pass address object In the js script modify address object var address = getAddress() Modify address object Return address obj ...

javascriptjavanode.jsspring-boot

What is the method for importing jQuery from a local source?

My experience with CDNs has been seamless, but I've run into some issues when trying to use jquery/jquery mobile locally. It seems that certain classes work intermittently, while others don't work at all. The versions I am using are: jQuery - ...

javascriptjqueryjquery-mobile

AngularJS Expandable Table - Unlocking Limitless Possibilities

Take a look at the code snippet below: <tbody> <tr ng-repeat-start="ticket in tickets"> <td> <button ng-if="ticket.expanded" ng-click="ticket.expanded = false">-</button> <button ng-if="!t ...

javascriptangularjs

Processing JSON data from an array in PHP

Currently, my code involves utilizing an AJAX request to retrieve data from a database dynamically. The data received is processed by the PHP function json_encode() before being sent back to AJAX. Upon receiving the data through the AJAX request, it is for ...

javascriptphpjqueryjsonajax

Using an alias to call a function defined in a separate module in TypeScript

The following code snippet is from the v4.js file located inside the uuid folder within Angular's node_modules: var rng = require('./lib/rng'); var bytesToUuid = require('./lib/bytesToUuid'); function v4(options, buf, offset) { ...

javascriptangulartypescriptimport

How do I reduce the size of a WinJS image file

Can anyone help me figure out how to retrieve the size (in pixels, bytes) of a picture in a Windows 8 app? I'm using openPicker to select the file but can't seem to find the size attributes. I want to display an error message if the file is too ...

javascriptwindowswinjs

AngularJS is patiently awaiting the completion of the translation rendering process

I implemented the ngCloak directive to my body element on the page and every angular-related element, but it appears that it is not working with AngularJS translate. The translate variables show up on the page initially and then get translated after a se ...

javascriptangularjs