Category: javascript

I was trying to test whether new URL(url) or new URL(url.href) would be faster since it’s in a fairly hot code path. The latter came out way faster and after some digging I found out that it’s because the Node.js implementation of URL has a line that converts the input to a string with a template string literal https://github.com/nodejs/node/blob/8bc6e193a07613a29eaf30d609f3c6d20db94031/lib/internal/url.js#L734

I benched just the template string conversion against converting it to a string beforehand with toString and the latter was about 6x faster in Node and 2x faster in Firefox. Why is that?

I am trying to pass my tests using jest for my javascript project. The server runs perfectly fine when running npm start and hitting various endpoints. However, when I run npm test which calls: cross-env CI=true NODE_ENV=test jest I get errors when using map, reduce, filter, or flatMap in my code. The error is like this:
TypeError: xxx.flatMap is not a function
or
TypeError: xxx.map is not a function
where xxx is 100% an array of array of strings.

I was running node version 14 but upgraded to 16.17.1 and still have this issue.

This is my jest configuration as well as the dev dependencies inside of package.json:

 "devDependencies": {
    "core-js": "^3.31.0",
    "jest": "^29.5.0",
    "jest-junit": "^12.1.0",
    "sinon": "^11.1.1",
    "supertest": "^6.1.3"
  },
  "jest": {
    "setupFiles": [
      "core-js"
    ],
    "collectCoverage": true,
    "testPathIgnorePatterns": [
      "target"
    ],
    "collectCoverageFrom": [
      "**/*.{js,}",
      "!**/node_modules/**",
      "!**/coverage/**",
      "!**/target/**",
      "!**/src/routes/**",
      "!**/src/validators/**",
      "!**/src/models/**"
    ],
    "coverageReporters": [
      "json",
      "lcov",
      "text",
      "cobertura"
    ],
    "reporters": [
      "default",
      "jest-junit"
    ]
  }

What didn’t work so far:

• Uninstalling jest globally
• Adding "setupFiles": ["core-js"] to my jest config
• Installing core-js and adding require('core-js/stable'); at the top of my test file and the file that using map/flatMap/filter/reduce
• npx jest --clearCache
• Creating a jest.config.js file at the root of my project with the config and require('core-js/stable'); at the top and passing --config jest.config.js to my npm test script
• running npm install jest@latest --save-dev and npm install core-js@latest --save-dev
• deleting node_modules and running npm install again after all of the above

Not sure what to do next. I can obviously switch to for loops but this is killing me. Why is jest not working but the server works fine normally with map, filter, reduce, and flatMap??? So lame

I have a reactjs application that is taking a really long time to download the packages on server. When I run it with npm run dev locally, the same package with 11.6mb locally takes 0.7s while on the server is taking 11 minutes.

All my routes are already with lazy loads, I don’t know what it can be. I am running in a docker container with the same npm run dev. The same vm is running my backend service and it is working fine.

I’ll put my package.json and vite.config.js below.

{
  "name": "dashboard-front",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "files": [
    "dist"
  ],
  "main": "./dist/my-lib.umd.cjs",
  "module": "./dist/my-lib.js",
  "exports": {
    ".": {
      "import": "./dist/my-lib.js",
      "require": "./dist/my-lib.umd.cjs"
    }
  },
  "scripts": {
    "dev": "vite --host",
    "build": "vite build",
    "lint": "eslint src --ext js,jsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "@turf/turf": "^6.5.0",
    "axios": "^1.2.1",
    "date-fns": "^2.29.3",
    "dotenv": "^16.0.3",
    "firebase": "^9.21.0",
    "mapbox-gl": "^2.15.0",
    "plotly.js-dist-min": "^2.24.2",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-hook-form": "^7.41.5",
    "react-icons": "^4.8.0",
    "react-map-gl": "^7.0.25",
    "react-modal": "^3.16.1",
    "react-plotly.js": "^2.6.0",
    "react-query": "^3.39.3",
    "react-router-dom": "^6.10.0",
    "react-select": "^5.7.3",
    "react-sliding-side-panel": "^2.0.3",
    "react-svg": "^16.1.12",
    "react-table": "^7.8.0",
    "react-toastify": "^9.1.3",
    "styled-components": "^5.3.6"
  },
  "devDependencies": {
    "@types/react": "^18.0.28",
    "@types/react-dom": "^18.0.11",
    "@vitejs/plugin-react": "^4.0.0",
    "eslint": "^8.38.0",
    "eslint-plugin-react": "^7.32.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.3.4",
    "vite": "^4.3.2",
    "vite-plugin-fast-react-svg": "^0.4.0"
  }
}

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { svgPlugin } from "vite-plugin-fast-react-svg";

export default defineConfig({
  plugins: [
    react(),
    svgPlugin()
  ],
  server: {
    host: true,
    port: 3000,
    cors: false,
    watch: {
      usePolling: true
    }
  },
  preview: {
    host: 'localhost',
    port: 5000,
    strictPort: true,
    cors: false
  },
  build: {
    chunkSizeWarningLimit: 1000 * 500,
    rollupOptions: {
      output: {
        manualChunks(id) {
          if (id.includes('node_modules')) {
            return 'vendor';
          }
        },
      },
    },
  },
})

I’m working on a D3 based tool for R, and I don’t get how to move the little piece of Russia on the left side of the map to the right, or in other words I want to have a “continuous” map to avoid shading all of it.

I saw this but it doesn’t work d3.js geo worldmap – merge russia (shift small part from the left next to america to the right)

Do you have any ideas? my viz is here https://github.com/pachadotdev/d3po/blob/main/javascript/src/viz/methods/coords.js

i got two players when player1 hits twice player2 player2’s health decrease twice, but if player2 hits player1 twice player1’s health decrease once

and the two player belong to the same class
the game is made in mltifile but this is the classes files only

 class sprite {
    constructor({
        position,
        imageSrc ,
        scale = 1,
        framemax = 1 ,
        offset = {x:0,y:0}
        
    }) {
        this.position = position
        this.width = 50
        this.height = 150
        this.image = new Image()
        this.image.src = imageSrc
        this.scale = scale
        this.framemax = framemax
        this.framecurrent = 1
        this.framelapsed = 0
        this.framehold = 5
        this.offset = offset
 
    }
    draw(){
        C.drawImage(
            this.image ,
            this.framecurrent * (this.image.width / this.framemax) , 
            0,
            this.image.width / this.framemax ,
            this.image.height,

            this.position.x - this.offset.x,
            this.position.y - this.offset.y,
            (this.image.width / this.framemax) * this.scale,
            this.image.height * this.scale
            )

    }

    animateframe(){
        this.framelapsed++

        if (this.framelapsed % this.framehold ===0){

        if (this.framecurrent < this.framemax -1){
            this.framecurrent++
        }else {
          this.framecurrent = 0  
        }
        }
    }

    update(){
        this.draw()
        this.animateframe()
    }
}


class Fighter extends sprite{
    constructor({
        position,
        velocity ,
        color = 'red' ,
        imageSrc ,
        scale = 1,
        framemax = 1,
        offset = {x:0,y:0},
        sprites,
        attackbox ={offset:{},width:undefined,height:undefined}
    }) {
        super({
            position,
            imageSrc,
            scale,
            framemax ,
            offset 
        })
        
        this.velocity = velocity 
        this.width = 50
        this.height = 150
        this.lastkey
        this.attackbox = {
            position: {
                x:this.position.x , 
                y: this.position.y
            } ,
            offset : attackbox.offset,
            width: attackbox.width ,
            height : attackbox.height,
            
        }
        this.color = color
        this.isattacking
        this.health = 100
        this.framecurrent = 0
        this.framelapsed = 0
        this.framehold = 5
        this.sprites = sprites 
        this.dead = this.dead

        for (const Sprite in this.sprites) {
            sprites[Sprite].image = new Image()
            sprites[Sprite].image.src = sprites[Sprite].imageSrc
          }

        
    }

    update(){
        this.draw()
        if(!this.dead)
        this.animateframe()
    
        this.attackbox.position.x = this.position.x + this.attackbox.offset.x
        this.attackbox.position.y = this.position.y + this.attackbox.offset.y

        //C.fillRect(this.attackbox.position.x,this.attackbox.position.y, this.attackbox.width, this.attackbox.height)


        this.position.x += this.velocity.x
        this.position.y += this.velocity.y

        //gravity

        if(this.position.y + this.height +this.velocity.y >= canvas.height -97 ){
            this.velocity.y = 0
            this.position.y = 330
        }else this.velocity.y += gravity
        
       
    }

    attack2(){
      this.switchsprite('attack2')
        this.isattacking = true

    }
    
    attack1(){
      this.switchsprite('attack1')
        this.isattacking = true
    }

    takehit(){
      
      this.switchsprite('takehit')
      
      this.health -= 3

      if (this.health <= 0){
        this.switchsprite('death')
      }else this.switchsprite('takehit')
      
    }


    switchsprite(sprite) {
      if (this.image === this.sprites.death.image){
        if (this.framecurrent === this.sprites.death.framemax - 1) 
        this.dead = true
      return
    }

      if (
        this.image === this.sprites.attack1.image &&
        this.framecurrent < this.sprites.attack1.framemax - 1
        ) 
        return
      if (  this.image === this.sprites.attack2.image &&
        this.framecurrent < this.sprites.attack2.framemax - 1 )
         return

      if (
        this.image === this.sprites.takehit.image &&
        this.framecurrent < this.sprites.takehit.framemax - 1
        )
        return

      switch(sprite){
        case 'idle':
          if (this.image !== this.sprites.idle.image){
          this.image =this.sprites.idle.image
          this.framemax = this.sprites.idle.framemax
          this.framecurrent = 0
          }
          break;
        case 'run':
          if (this.image !== this.sprites.run.image){
          this.image =this.sprites.run.image
          this.framemax = this.sprites.run.framemax
          this.framecurrent = 0
          }
          break;
        case 'jump':
          if (this.image !== this.sprites.jump.image){
          this.image = this.sprites.jump.image
          this.framemax = this.sprites.jump.framemax
          this.framecurrent = 0
          }
          break;  
          case 'fall':
            if (this.image !== this.sprites.fall.image){
            this.image = this.sprites.fall.image
            this.framemax = this.sprites.fall.framemax
            this.framecurrent = 0
            }
            break;
            case 'attack2':
              if (this.image !== this.sprites.attack2.image){
              this.image = this.sprites.attack2.image
              this.framemax = this.sprites.attack2.framemax
              this.framecurrent = 0
              }
              break;
            case 'attack1':
                if (this.image !== this.sprites.attack1.image){
                this.image = this.sprites.attack1.image
                this.framemax = this.sprites.attack1.framemax
                this.framecurrent = 0
                }
                break;
            case 'takehit':
                  if (this.image !== this.sprites.takehit.image){
                  this.image = this.sprites.takehit.image
                  this.framemax = this.sprites.takehit.framemax
                  this.framecurrent = 0
                  }
                  break; 
            case 'death':
              if (this.image !== this.sprites.death.image){
              this.image = this.sprites.death.image
              this.framemax = this.sprites.death.framemax
              this.framecurrent = 0
            }
            break;      
 
      }
    }
  }

the two player hit once and the pause for .5s and then be able to hit again

In the last years I stumbled across a lot of bugs but this one is having me very confused. I tried finding the solution over and over but I can’t find what’s wrong.

I have a MongoDB database and a NodeJS server that I use to query the database. I’m currently trying to make a search API endpoint using $text. I created a text index using mongosh and everything works fine. My search query which is the following works perfectly fine in mongosh:

db.activities.find({ $text: { $search: 'museum' } }).limit(5)

So I naturally tried to implement this in my NodeJS code and I wrote this:

const client = new MongoClient(uri, {
  serverApi: {
    version: ServerApiVersion.v1,
    strict: true,
    deprecationErrors: true,
  },
});

try {
  await client.connect();
  const database = client.db("favel-test");
  const activitiesCollection = database.collection("activities");

  const activities = await activitiesCollection
    .find({ $text: { $search: "museum" } })
    .limit(5)
    .toArray();
  res.json(activities);
} catch (error) {
  console.error("Error occurred during MongoDB query:", error);
  res
    .status(500)
    .json({ error: "An error occurred during the query execution." });
} finally {
  await client.close();
}

But then I got this error:

Error occurred during MongoDB query: MongoServerError: error processing query: ns=favel-test.activities limit=5Tree: TEXT : query=musee, language=english, caseSensitive=0, diacriticSensitive=0, tag=NULL
Sort: { mainScore: -1 }
Proj: {}
 planner returned error :: caused by :: need exactly one text index for $text query
    at Connection.onMessage (/Users/dorian/Documents/Work/Favel/favel-api-v2/node_modules/mongodb/lib/cmap/connection.js:202:26)
    at MessageStream.<anonymous> (/Users/dorian/Documents/Work/Favel/favel-api-v2/node_modules/mongodb/lib/cmap/connection.js:61:60)
    at MessageStream.emit (node:events:511:28)
    at processIncomingData (/Users/dorian/Documents/Work/Favel/favel-api-v2/node_modules/mongodb/lib/cmap/message_stream.js:124:16)
    at MessageStream._write (/Users/dorian/Documents/Work/Favel/favel-api-v2/node_modules/mongodb/lib/cmap/message_stream.js:33:9)
    at writeOrBuffer (node:internal/streams/writable:399:12)
    at _write (node:internal/streams/writable:340:10)
    at Writable.write (node:internal/streams/writable:344:10)
    at TLSSocket.ondata (node:internal/streams/readable:774:22)
    at TLSSocket.emit (node:events:511:28) {
  ok: 0,
  code: 291,
  codeName: 'NoQueryExecutionPlans',
  '$clusterTime': {
    clusterTime: new Timestamp({ t: 1686696409, i: 10 }),
    signature: {
      hash: Binary.createFromBase64("A9Ve+C8NJ0e92TFmw8SXCRA8cps=", 0),
      keyId: new Long("7185945864957853715")
    }
  },
  operationTime: new Timestamp({ t: 1686696409, i: 10 }),
  [Symbol(errorLabels)]: Set(0) {}
}

As far as I understand this error suggests there is not exactly one text index in my collection but I checked multiple times and there is in fact only one text index. I am very confused and I ran out of ideas as to what may cause this error.

Any ideas?

I’m trying to automate the process of clicking on an hCaptcha checkbox that is nested inside three different iframes. I have tried various approaches, but I haven’t been successful. Here are the details of the iframes and the target checkbox:

1. The checkbox is located inside the third iframe.
2. The XPath of the first iframe: /html/body/div[1]/iframe
3. The XPath of the second iframe: /html/body/div[1]/div[4]/div/div/main/div[2]/div/div[2]/iframe
4. The XPath of the third iframe: ./html/body/div[1]/iframe
5. The ID of the target checkbox: 'checkbox'

I have tried switching to each iframe using the switch_to.frame() method and then locating the checkbox using various methods such as find_element_by_id() and find_element_by_xpath(). However, none of my attempts have been successful.

Could anyone provide guidance on how to click on the hCaptcha checkbox inside the third iframe using Python Selenium? Any help would be greatly appreciated.

first_iframe = driver.find_element(By.XPATH, "/html/body/div[1]/iframe")
driver.switch_to.frame(first_iframe)
print("1. iframe")

time.sleep(2)
second_iframe = driver.find_element(By.XPATH, "/html/body/div[1]/div[4]/div/div/main/div[2]/div/div[2]/iframe")
driver.switch_to.frame(second_iframe)
print("2. iframe")

time.sleep(2)

# Ana sayfadaki iframe'e geçiş yapın
third_iframe = driver.find_element(By.XPATH, "./html/body/div[1]/iframe")
driver.switch_to.frame(third_iframe)

print("3. iframe")
time.sleep(2)

driver.switch_to.default_content()
driver.find_element(By.XPATH, '//*[@id="checkbox"]').click()
# driver.find_element(By.ID, "checkbox").click()
time.sleep(2)


js_code = "document.getElementById('h-captcha-response-0n9nbu0cse7').style.display = 'block';"
driver.execute_script(js_code)
time.sleep(5)
captcha = driver.find_element(By.XPATH, "h-captcha-response-0n9nbu0cse7").send_keys("test")

I’m running a local server with MAMP and my URL is https://dev.mysite.io. I’m trying to set a localStorage item containing just an expiry date and use it to show/hide stuff based on that date. Now, if I’m on my home page I’m able to set the localStorage item without problems, but if I go to page https://dev.mysite.io/test-page the localStorage item is not being set, yet if I’m on a page https://dev.mysite.io/test-page/test, the item is being set.. If I’m understanding everything correctly, the localStorage should be available for all pages under the domain https://dev.mysite.io, all pages have the same origin (protocol, port, domain & etc.).
Here is my JS:

$( function() {
    const storageKey = 'show_content';
    const expiry = 7 * 24 * 60 * 60 * 1000; // should be equal to 1 week in ms
    const expiryDate = new Date().getTime() + expiry;

    // Check if the content should be displayed
    const showContent = localStorage.getItem( storageKey );
    const timeNow = new Date().getTime();

    // Show content after 1 week time
    if ( ! showContent || timeNow > showContent ) {
        $( '.content' ).show();
        localStorage.removeItem( storageKey );
    }

    // Set the localStorage and hide the content when the close button is clicked
    $( '.content__close' ).on('click', () => {
        localStorage.setItem( storageKey, expiryDate );
        $( '.content' ).hide();
    } );
} );

I am having some troubles regarding the use of a Component that can be dragged and automatically snaps to nine calculated points in the viewport (Corners: Upper Left, U. Right, Bottom Left, B. Right, as well as all Axis halway through and the center of the viewport) The draggable behaviour is achieved by using the useGesture Library. Works like a charm except for that i would like the component to adapt its position on changes of the viewport. For example the browser window being scaled down, it should always stay at the calculate point where it is snapped at the moment e.g. Bottom Middle of the screen.

Here is a pretty similar example i found, but with less snap-points, and also no responsive behaviour, but it illustrates what iam working with:
https://codesandbox.io/s/usepip-37cd9?file=/src/App.tsx:94-139

Please do not feel fooled by the rick astley gif, its not done by me 😀

Here is also how i adapted my code to snap to more than the corners:

var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};

function usePip(ref) {
    const { height, width } = useWindowDimensions();

    const [styles, set] = useSpring(() => ({
        x: (width / 2 - 160),
        y: (height - 84),


    }));
    const bind = useDrag((_a) => {

        var { event, down, last, movement: [x, y], metaKey } = _a, rest = __rest(_a, ["down", "last", "movement", "metaKey"]);
        
        let defaultX = 10;
        let defaultY = 10;
        if (last && ref.current) {
            const rect = ref.current.getBoundingClientRect();

            if (rect.x + rect.width / 2 > window.innerWidth / 4) {
                defaultX = window.innerWidth / 2 - rect.width / 2;
            }
            if (rect.x + rect.width / 2 > window.innerWidth / 1.5) {
                defaultX = window.innerWidth - 10 - rect.width;
            }
            if (rect.y + rect.height / 2 > window.innerHeight / 4) {
                defaultY = window.innerHeight / 2 - rect.height / 2;
            }
            if (rect.y + rect.height / 2 > window.innerHeight / 1.5) {
                defaultY = window.innerHeight - 10 - rect.height;
            }
        }
        set({
            x: down || metaKey ? x : defaultX,
            y: down || metaKey ? y : defaultY,
            immediate: down
        });
    }, 
    { 
        initial: () => [styles.x.get(), styles.y.get()] ,
    },
 
        );

        
      
    return [bind, Object.assign(Object.assign({}, styles), { position: "fixed", left: 0, top: 0, zIndex: 99999 })];

also i am setting the inital position in a pretty messy way by using the measurements of the container divided by 2 in order to center align it. I would love to hear suggestions on how to improve that as well.

I thought about getting the rect.width and height outside of the useDrag function but i cant get it to work. Also i tried implementing using an window event listener but without success…

Please can somebody help me out here?

Trying access a deep object props with a predefined variable name.I see the result as undefined. Can someone please suggest best way to handle it

const testObject = {
      a :{
        b: {
          c: 'hello'
        }
      }
    }
    
    const testCol = "a.b.c"
    
    console.log(testObject.testCol)

Project Background (Feel free to skip):
I am trying to make an idle game that uses SetIntervals to perform processes every so often and essentially pass an object down the line from one process to another, and so on. I am planning on having 3 levels (Purgatory, Heaven, and Hell which are all sibling components under a parent container), the objects starts and is generated in purgatory, and based on a soul’s characteristics (good or bad) you get sent from purgatory to Heaven / Hell.

I am currently stuck appending the object sent from child to parent to an array in a state object. When I am appending the object to the end of the array, I have an output in my return that displays array.length for both state queues. It seems like the component may not be fully rendering as sometimes the values update, and sometimes they dont, and I am not sure why.

I am newer to react, so there maybe an interaction that I am missing here, so any help / advice / criticisms are welcome

Component structure:

• Content
  • Heaven
  • Purgatory (Child Sending to Parent)
  • Hell

Purgatory Callback:

    
export default function Purgatory(params) {
    const { handleAscension, handleDescension } = params;

    ...
    ...

    const handleDecision = (id, decision, soul) => {
        // Here we need to do the same as above. empty the one from the queue, and move to next step. probably return an object containing both the soul and the boolean "decision"

        if (decision) {
            console.log("Final: Ascended");
            handleAscension(soul);
        } else {
            console.log("Final: Descended");
            handleDescension(soul);
        }
    };
}

Content handler methods:

    const handleDescension = (soul) => {
        let descensionData = soulsDescending;

        if (descensionData.queue.length >= descensionData.maxQueueLength) {
            console.log(
                "No room in the Ascension queue. This soul is left to roam in purgatory"
            );
            return;
        }

        descensionData.queue = [...descensionData.queue, soul];
        setSoulsDescending(descensionData);
    };

    const handleAscension = (soul) => {
        let ascensionData = soulsAscending;

        if (ascensionData.queue.length >= ascensionData.maxQueueLength) {
            console.log(
                "No room in the Ascension queue. This soul is left to roam in purgatory"
            );
            return;
        }

        ascensionData.queue = (soulsAscending) => [
            ...soulsAscending.queue,
            soul,
        ];
        setSoulsAscending(ascensionData);
    };

    return (
        <>
            <Shop />
            <Heaven soulsAscending={soulsAscending.queue} />
            <p>Heaven Queue: {soulsAscending.queue.length}</p>

            <Purgatory
                handleAscension={handleAscension}
                handleDescension={handleDescension}
            />

            <p>Hell Queue: {soulsDescending.queue.length}</p>
            <Hell soulsDescending={soulsDescending.queue} />
        </>
    );

The background image of my landing needs to be changed when the button is clicked.

I´m a newbie on wordpress and don´t know how the background image on the landing could be changed.

I know that there is a possibility to work with JavaScript but I can´t find my button in the editor. Could someone help me step to step so that I can change the background image with other random images that I could use.

So I’ve spent hours now trying to figure out what you would think should be pretty simple but isn’t. I’ve been through the inspect tool on Chrome and I don’t see any style that applies a hover of any kind for the fieldset, which is where I believe it is coming from.
So my problem is as follows… I want a simple outlined input. The border should be black and the focused border should be blue… But whenever I set this, every time I hover over the input I get a white border popping up… Great, you would think just setting on hover border to transparent would be the solution… Kinda, but nope, when you do that and when the input is in the active state, if you hover over the input, the border on the input goes transparent…
Which is not exactly the desired effect…
I want zero hover effect on my input but I can’t for the life of me find a solution for this. I looked through the docs, and StackOverflow, and googled countless phrases… I mean, come on how hard does something like this have to be? lol
Can someone please give me an idea on how to make the input border or fieldset border on hover not be a thing?

https://imgur.com/a/OCm1y27

// I want to download the above sheet in xlxs format in which the first row should be bold/

async downloadReport(): Promise<void> {const sheets = [];const dataRows = [];const payload = this.payloadService.payload['Journey1'];let response: any = this.reasonItems;response = [...new Map(response.map((item) => [item.sortData, item])).values()];

for (let i = 0; i < response.length; i++) {dataRows.push({'Column 1': response[i].data.barText,'Column 2': response[i].data.barData,'Column 3': '','Column 4': '','Column 5': '',});

for (let j = 0; j < response[i].top5.length; j++) {
  dataRows.push({
    'Column 1': '',
    'Column 2': '',
    'Column 3': response[i].top5[j].NotApprovedCpt,
    'Column 4': response[i].top5[j].text,
    'Column 5': response[i].top5[j].value,
  });
}
}

const sheetTitle = 'Sheet Title';sheets.push({ title: sheetTitle, data: dataRows });

const filters = {Timeperiod: filter1.timePeriod,Tin: payload.filter2.value || this.key,Npi: payload.filter3.value || this.key,Lob: payload.filter|| this.key,Channel: payload.channel || this.key,ServiceType: payload.serviceSetting || this.key,ServiceCategory: payload.ServiceCategory || this.key,};

this.downloadService.download({ sheets },{fileFormat: '.xlsx',fileName: 'abc',journeyName: 'def',metricName: 'ghi',filters,});}

I am attempting to make an application using Articulate Storyline that incorporates Google’s DialogFlow.

The error isn’t on the client side in Storyline, but I mention it’s what I’m using since the slides are published to https://360.articulate.com where the call is made from.

// Function to send a query to Dialogflow and retrieve the response
async function generateSentence(input) {
  const apiUrl = 'https://dialogflow.googleapis.com/v2/projects/(PROJECT_NAME)/agent/sessions/unique-session-id:detectIntent';
  const apiKey = '(API_KEY)';
  const languageCode = 'fr';

  const requestPayload = {
    queryInput: {
      text: {
        text: input,
        languageCode: languageCode,
      },
    },
  };

  try {
    const response = await fetch(apiUrl, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${apiKey}`,
      },
      body: JSON.stringify(requestPayload),
    });

    if (response.ok) {
      const data = await response.json();
      const fulfillmentText = data.queryResult.fulfillmentText;
      return fulfillmentText;
    } else {
      throw new Error('Request failed with status: ' + response.status);
    }
  } catch (error) {
    console.error('Error:', error);
    throw error;
  }
}

// Function to handle user input and display the output
async function handleInput() {
  const input = window.IATexte;
  try {
    const sentence = await generateSentence(input);
    console.log(sentence);
  } catch (error) {
    console.error('Error:', error);
  }
}

// Call the input handling function
handleInput();

(where I redacted my project name and api key)

I have verified that the API key is correct, and I have enabled the Dialogflow API in the Google Cloud Console for my project. However, when I make requests to the API using the API key, I receive the following response:

{
  "error": {
    "code": 401,
    "message": "Request had invalid authentication credentials. Expected OAuth 2 access token, login cookie or other valid authentication credential. See https://developers.google.com/identity/sign-in/web/devconsole-project.",
    "status": "UNAUTHENTICATED"
  }
}

And the following in response headers:

www-authenticate: Bearer realm="https://accounts.google.com/", error="invalid_token"

I have also ensured that the DialogFlow API is enabled for my project.