Promise results in Uncaught TypeError: func_get_db_data is not a function

Question

I am constructing a demo that imitates the structure of requesting/receiving data from a database. The output should just be a console log of the returned array.

I am getting the message Uncaught TypeError: func_get_db_data is not a function

I saw this question TypeError: #<Promise> is not a function

But the answer is a little too specific for me to apply to my situation. How can I understand the solution here?

let func_get_db_data = new Promise((resolve, reject) => {
  resolve([
    {name: 'Bob', gender:'m', class:'junior', job: 'Teacher'},
    {name: 'Dan', gender:'m', class:'senior', job: 'Detective'},
    {name: 'Ann', gender:'f', class:'junior', job: 'Analyst'},
    {name: 'Sue', gender:'f', class:'retired', job: 'Accountant'}
  ]);
});

const tableData = func_get_db_data().then( (data) => {
  return data;
});

console.log(tableData);

Update

Based on below comments, I tried this (but didn't quite get it... it just returns an empty object)

let func_get_db_data = () => {
return [
    {name: 'Bob', gender:'m', class:'junior', job: 'Teacher'},
    {name: 'Dan', gender:'m', class:'senior', job: 'Detective'},
    {name: 'Ann', gender:'f', class:'junior', job: 'Analyst'},
    {name: 'Sue', gender:'f', class:'retired', job: 'Accountant'}
  ];
};

const getTables = new Promise(func_get_db_data);

getTables.then( (data) => {
  return data;
});

console.log(getTables);

What I would really like is to structure the code so that a structure such as this returns the data:

const tableData = func_get_db_data().then( (data) => {
  return data;
});

`func_get_db_data` is a promise object, not a function; so invoking it as a function is not allowed. `func_get_db_data().then` ---> `func_get_db_data.then`. You could use `Promise.resolve(array)` instead of promise constructor to achieve the same result with less code. — Yousaf, Aug 14 '21 at 19:33
Also note that `tableData` will be a promise object as well. — Yousaf, Aug 14 '21 at 19:36
Sounds good Yousaf. Would you mind restructuring the above code into an answer so I could see the working solution? I appreciate that this is an elementary solution for you, but not so much for me just yet — crashwap, Aug 14 '21 at 19:40
[Here's](https://pastebin.com/0kQ70pTD) how you could re-write your code. — Yousaf, Aug 14 '21 at 19:45
[`.then(data => data)` is pointless anyway](https://stackoverflow.com/q/41089122/1048572). If you want to log the promise result, you need to put the `console.log` call *inside* the `.then()` callback. — Bergi, Aug 14 '21 at 19:48
@Bergi Inside the .then() callback, I wish to make some changes to the data (rename a couple of keys inside each object of the returned array of objects) before assigning the result to an array (`tableData`). How would you do that? That is really the reason for the *(next/followup)* question... how to get data from a database, and then rename two keys within each object of the returned array of objects. — crashwap, Aug 14 '21 at 23:32
@crashwap Make `tableData` a *local* variable inside the callback. Assign your result to it. Then continue working with it inside the callback. — Bergi, Aug 14 '21 at 23:44

Gandalf The Grey · Accepted Answer · 2021-09-15T03:36:14.630

You can't initialize a variable to a promise object and then invoke it, it needs to be invoked by a function in order to return the value.

Just wrap the promise in a function and return it. Now you can invoke it and have access to the promise methods.

However, the way you're trying to retrieve the promise data is an issue with program structure. Basically, if you want to maintain that type of code structure, you'd have to use the async/await paradigm-- otherwise, you'd need to work within the .then() of the promise to start using its data.

Example:

const func_get_db_data = () => {
  return new Promise((resolve, reject) => {
    return resolve([
      {name: 'Bob', gender:'m', class:'junior', job: 'Teacher'},
      {name: 'Dan', gender:'m', class:'senior', job: 'Detective'},
      {name: 'Ann', gender:'f', class:'junior', job: 'Analyst'},
      {name: 'Sue', gender:'f', class:'retired', job: 'Accountant'}
    ])
  })
}

async function main() {
  const tableData = await func_get_db_data();
  console.log("tableData: ", tableData);
}

main()

Everything within the async function will process synchronously since the program execution will only continue once func_get_db_data() has resolved and returns a value to tableData.

Based on your program structure, especially since you're trying to initialize a variable to the return value of a resolved Promise Object, it would be best to use the async/await paradigm.

If you wanted to use promise chaining, that's completely fine too, but all the logic you want to perform based off the resolve data is confined within the .then() like so:

const func_get_db_data = (query) => {
  return new Promise((resolve, reject) => {
    return resolve([
      {name: 'Bob', gender:'m', class:'junior', job: 'Teacher'},
      {name: 'Dan', gender:'m', class:'senior', job: 'Detective'},
      {name: 'Ann', gender:'f', class:'junior', job: 'Analyst'},
      {name: 'Sue', gender:'f', class:'retired', job: 'Accountant'}
    ])
  })
}

func_get_db_data()
  .then(resolve => {
    console.log("table data: ", resolve);
    //example data parsing
    const tableData = resolve.slice(0, 1);
    return tableData;
  })
  .then(resolve2 => console.log("resolve2: ", resolve2))
  .catch(err => console.log(err))

So if you want to initialize variables to a promise value, you should use the async/wait approach, but you could also utilize promise chaining.

Promise results in Uncaught TypeError: func_get_db_data is not a function

Update

1 Answers1