Undefined Array on Client Side | OpenAI | Page 1

hexed apex Dec 29, 2022, 2:56 AM

#

On the client I wrote:

    <button type="button" id="OpenAI_uploaded">List all files already uploaded to OpenAI</button>
    <div id="uploaded_to_OpenAI_files_list"></div>
      <script>
        document.getElementById("OpenAI_uploaded").addEventListener("click", getOpenAIFiles);
        function getOpenAIFiles(){
          event.preventDefault();
          fetch('http://localhost:3000/files_on_OpenAI', {
            method: "GET"
          })
          .then(response => response.json())
          .then(data => {
            console.log(data);
            document.getElementById("uploaded_to_OpenAI_files_list").innerHTML = response.data;
        });
      } 
      </script>```

#

On the server I wrote:

  const { Configuration, OpenAIApi } = require("openai");
  const configuration = new Configuration({
  apiKey: apiKeys,
  });
  const openai = new OpenAIApi(configuration);
  const response = await openai.listFiles();
  let files = [];

  for (let i = 0; i < response.data.data.length; i++) {
    files.push({
      filename: response.data.data[i].filename,
      id: response.data.data[i].id
    });
  }
  console.log(files);
  res.send(files);
});```

hallow cove Dec 29, 2022, 11:13 AM

#

Haven't fully read your server side code yet. How many results are expected in the array, does this differ in size?

#

For response.data.data.num.id, what is returned?

hexed apex Dec 29, 2022, 3:01 PM

#

hallow cove Haven't fully read your server side code yet. How many results are expected in t...

In this case I have 3 results expected. The number of results will depend on the number of files that have been uploaded to OpenAI so may be 0 or may be n.

hexed apex Dec 29, 2022, 3:02 PM

#

hallow cove For response.data.data.num.id, what is returned?

Whatever the id is for that file, for example:

id: 'file-U4ZGERDvmkmModaqdhl9j0lf'

hallow cove Dec 29, 2022, 9:50 PM

#

Get any further @hexed apex ? I have some time in ~2hrs if you're still picking at this

hexed apex Dec 29, 2022, 9:51 PM

#

Thank you for checking in. I've spent the day working my day job 😛

I'm planning on looking at this later tonight after I do some work on a different project.

Mocking up some UX. Time consuming, sometimes tedious, but extremely helpful and clarifying before thinking architecture or laying down code.

hallow cove Dec 29, 2022, 9:56 PM

#

hexed apex Thank you for checking in. I've spent the day working my day job 😛 I'm planni...

We're in the same boat 🙂 Finished at 6pm, scraped some wallpaper and then spent the past few hours writing and modifying sql querie

hexed apex Dec 30, 2022, 5:01 PM

#

@hallow cove got it

#

Here is the new client script

        document.getElementById("OpenAI_uploaded").addEventListener("click", getOpenAIFiles);
        function getOpenAIFiles(){
          event.preventDefault();
          fetch('http://localhost:3000/files_on_OpenAI', {
            method: "GET"
          })
          .then(response => response.json())
          .then(data => {
            let fileListHTML = '';
            for (let i = 0; i < data.length; i++) {
              const file = data[i];
              fileListHTML += `<li>NAME: ${file.filename} || ID: ${file.id}</li>`;
            }
            document.getElementById("uploaded_to_OpenAI_files_list").innerHTML = fileListHTML;
        });
      } 
      </script>```

#

When you assign an array to innerHTML, the array is automatically converted to a string so the array returns "undefined". I had to iterate through the array.

#

I'm not super pleased with how the data is displayed, but good enough for me to move on for now.

#Undefined Array on Client Side