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;
});

Answer 1

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.