Encountering a Vue promise issue, I am currently facing a problem related to promises

Although my fetch method is successful with other API calls, I am encountering an error when fetching from this specific API. The error message states:

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'json')

Here's the code snippet for my fetch method:

import { ref } from "vue";
export default {
async setup() {
    const prompProducts = ref(null);
    const bc_prompProducts = await fetch(
      "https://booking.hemantbhutanrealestate.com/api/v1/get_frontend_products"
    );
    prompProducts.value = await bc_prompProducts.json();
return {
      prompProducts,
   };
  },
};

While this approach works flawlessly with other APIs, I'm encountering an error specifically with this one. Any assistance would be greatly appreciated, as the site is already live!

Answer №1

If you prefer, you have the option of placing your asynchronous call within a function and then invoking it, or utilizing the onMounted hook:

const { ref, onMounted } = Vue
const app = Vue.createApp({
  setup() {
    const prompProducts = ref([]);
    onMounted(async() => {
      const bc_prompProducts = await fetch(
      "https://booking.hemantbhutanrealestate.com/api/v1/get_frontend_products"
      )
      prompProducts.value = await bc_prompProducts.json()
    })
    return { prompProducts }
  },
})
app.mount('#demo')
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="demo">
  <div v-for="pro in prompProducts" :key="pro.id">
    <p>{{ pro }}</p>
  </div>
</div>

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

Display a loading indicator or progress bar when creating an Excel file using PHPExcel

I am currently using PHPExcel to create excel files. However, some of the files are quite large and it takes a significant amount of time to generate them. During the file generation process, I would like to display a popup with a progress bar or a waitin ...

Executing multiple asynchronous function calls within a for loop using JavaScript

Developing a mini Instagram-like bot for checking. The bot operates by using an object that contains a list of users from a chat along with their Instagram usernames. The issue I am encountering is related to asynchronous calls within loops. The loop con ...

When one div is hidden, the width of another div will automatically adjust to 100%

Is there a way to make #leftdiv expand to 100% when #rightdiv is hidden, and have both <div>s positioned next to each other when a button is clicked? I have successfully aligned both <div>s next to each other upon button click, but I would lik ...

I'm having trouble fetching JSON data from PHP in Angular using $http.get

Here is a snippet of my PHP code: <?php try { $dbcon=new PDO('mysql:host=localhost;dbname=angular;charset=utf8',"root",""); $dbcon->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); $dbcon->setAttribute(PDO::MY ...

Generate a JSON object from a given JSON template

Hello, I am currently working on creating a JSON instance from a given JSON schema. I would greatly appreciate a Typescript solution, but I am open to any other suggestions as well. Below is a sample of the schema file: sample-schema.json. My goal is to ...

In order to keep a div fixed at the top of the screen as you scroll, you can achieve this effect by utilizing CSS positioning. As the user scrolls down the page, the div

Can someone please help me figure out how to make a div element stay fixed on the screen as I scroll down the page? I've tried multiple solutions but nothing seems to be working. Any assistance would be greatly appreciated! I'm struggling with t ...

Trouble encountered while sending registration data within redux-saga

Having an issue within the redux-saga workflow when trying to register a single user. Below is the relevant code snippet for the redux-saga: // Importing necessary modules import * as ActionTypes from "./constants"; import { signupAPI } from "../../../uti ...

The ng-options loop in the array is unable to locate the specified value

In my C# controller, I generate a list and translate it to Json for Angular to receive at the front end. However, when using ng-options to loop through this array in order to get the array value, I always end up with the index instead. <select class="s ...

Can anyone advise on the best way to pass a function as a prop in React using TypeScript?

Hey there! I'm currently attempting to create a button component that can perform two separate actions: one labeled as "START" which initiates a countdown using StoreTimer.start(), and the other labeled as "RESET" which resets the countdown with Store ...

Discover the method of utilizing getElementById in conjunction with getBBox to ascertain the dimensions of an SVG in width and

Having obtained a D3JS tree and successfully saved it as an SVG file, my goal is to adjust the viewBox size based on the svg box size for better visualization. Suggestions include using getElementById along with getBBox. I am struggling to correctly pass ...

Utilize JavaScript to target the specific CSS class

Hello, I am currently using inline JS in my Wordpress navigation menu, redirecting users to a login page when clicked. However, I have been advised to use a regular menu item with a specific class and then target that class with JS instead. Despite searchi ...

Trouble updating values in Javascript objects

I'm having trouble understanding a problem I am experiencing. When I receive a Json object as a Websocket message from a hardware device, the property `uiAppMsg` is encoded in base64. After decoding it, I attempt to reassign it to the `uiAppMsg` prop ...

Troubleshooting the issue of inadequate bytes while parsing JSON in Yesod

Currently, I am attempting to extract the response body of a Json POST request using this Yesod code snippet: import qualified Data.Aeson as J postMypageR = do json <- parseJsonBody :: Handler (J.Result J.Value) case json of J.Error e -> ...

How can I halt further execution and update the user on their status using underscore's _.delay function?

Handling an array of input data with asynchronous calls for each element can be tricky, especially when trying to avoid hitting rate limits on a server. While underscore _.delay() can help with the processing, there are still a few challenges to address. H ...

What is the best way to incorporate a child component within a parent component?

Here is the scenario I am facing: The main component (Main.vue): <template> ........ </template> <script> export default { name: 'Main' ........... </script Sub-component (Sub.vue): <template> ........ </template& ...

Having trouble fetching data from a connected Android device to a localhost endpoint using React-Native

I am relatively new to React Native and I am currently working on developing an application. I have a JSON post request that functions correctly on Postman and Expo when accessed through a web browser at http://127.0.0.1:8080. However, when attempting to r ...

Decode a date and fetch it in the desired format within the ajax success function

Hey there, I've encountered an issue in retrieving the date value in ajax success. Can someone guide me on how to fix this problem? $.ajax({ type: "POST", contentType: "application/json; charset=utf-8", data: {}, ...

How come my variable becomes 0 even though I assigned it a value that is not 0?

I initially set out to calculate the distance between the top of the page and the visible area that the viewer is currently at, in terms of pixels (vertically). The goal was for a function to scroll down on another page based on how far the user had scroll ...

The client_id from Facebook oauth is not functioning properly to obtain the access token needed to retrieve feeds

I'm currently utilizing the https://graph.facebook.com/oauth/access_token?client_id={app_id}6&client_secret={app's_secret}&grant_type=client_credentials in order to obtain a token that allows me to access and read the feeds from a spec ...

Updating an element in an array at a specific index in MongoDB and adding a new document if no match is found

UPDATE: My main goal with this query is to find a quick solution, as I am new to MongoDB and assumed using a single query would be the fastest option. However, any fast solution will suffice. Essentially, I am seeking a solution for the following issue. W ...