Question 215370 in Html Question posted in
Some basic documentation can be found here.

Html – Cant solve type error. Probably a basic question but getting no where with what seems to be a very simple piece of code

code:

const generateResponse = async (incomingChatLi) => {
    const API_URL = "https://api.openai.com/v1/chat/completions";
    const pElement = document.createElement("p");

    // fetch response from openai api & define properties
    requestOptions = {
        method: 'POST',
        headers: {
            "Content-Type": "application/json",
            "Authorization": `Bearer ${API_KEY}`
        },
        body: JSON.stringify({
            model: "text-davinci-003",
            prompt: userMessage,
            max_tokens: 2048,
            temperature: 0.7,
            n: 1,
            stop: null
        })
    }
    // fetch response (from POST) from openai api
    try {
        const response = await (await fetch(API_URL, requestOptions)).json();
        pElement.textContent = response.choices[0].text;
    } catch (error) {
        console.log(error);
    }

    incomingChatLi.querySelector(".typing-animation").remove();
    incomingChatLi.querySelector(".chat-details").appendChild(pElement);

}

error:

TypeError: Cannot read properties of undefined (reading '0')
    at generateResponse (script.js:39:48)`
Tags:

2

Answers


  1. 0

    It looks like the error is occurring at line 39 in the script.js file. The error message "TypeError: Cannot read properties of undefined (reading ‘0’)" indicates that the code is trying to access an index of an undefined object.

    To debug this issue, you should check the response object from the API call. Add a console.log statement before line 39 to print the response and make sure it contains the "choices" property.

    Also, ensure that the "response.choices" array is not empty before trying to access the first element at index 0.

    If you encounter any difficulties, feel free to share the response object, and I can assist you further in debugging the issue.

    const generateResponse = async (incomingChatLi) => {
const API_URL = "https://api.openai.com/v1/chat/completions";
const pElement = document.createElement("p");

// fetch response from openai api & define properties
requestOptions = {
    method: 'POST',
    headers: {
        "Content-Type": "application/json",
        "Authorization": `Bearer ${API_KEY}`
    },
    body: JSON.stringify({
        model: "text-davinci-003",
        prompt: userMessage,
        max_tokens: 2048,
        temperature: 0.7,
        n: 1,
        stop: null
    })
}

try {
    const response = await (await fetch(API_URL, requestOptions)).json();

    // Debugging: Log the entire response object to check its structure
    console.log("Response Object:", response);

    if (response.choices && response.choices.length > 0) {
        pElement.textContent = response.choices[0].text;
    } else {
        console.log("Error: 'choices' not found or empty in the response.");
    }
} catch (error) {
    console.log("Error:", error);
}

incomingChatLi.querySelector(".typing-animation").remove();
incomingChatLi.querySelector(".chat-details").appendChild(pElement);

    }

    Login or Signup to reply.
  2. 0

    const response = await (await fetch(API_URL, requestOptions)).json();

    This api call is not returing an response object with choices array.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search