Category: javascript

I’m building a chrome extension to change the favicon of the newly opened tabs to differentiate them (to know that I did not read them yet), it works generally well except when CSP is applied. but a strange thing is happening:

I open for example a site using a strict CSP like: https://developer.mozilla.org/en-US/docs/Learn/HTML

I use this code to load and image in the page and as favicon

let FAVICON_URLl =  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAAXNSR0IArs4c6QAABQZJREFUaEPtmX0sXXcYx7+mJFI0wRLXmqDJvNz1ermk1jD1siij5i3ewtxis1l0hEZL2mjKmKtdbTo6zChTwzRVw4pttJZ6f2u5ltQqXbououvKtAzL73fiTu927z2J3LPI7vPPPfee53ee3+f3POec7/O7GuvAOraxaagB/uPsaTxvZLK9S0gNoC6hra2A+h7Y2vptffT/OwO6uroQOthLl/Hpk6fQ0tpBv4+MjGFhYUHuEltYvAhjnjE9v7K8Ak3N5+jx48cLGB0dY52aLWUgKioSZz8U02CLi4uQSKYhFDJAB718MTw8IncinV3tEAj20vNNTZcRGBhAj8kYMpatbQmguqYSXl6v0ljNzS0w4fHg4ChUCrB79wsYHLoJDQ0N6ns0LR3igg+4BdDR0cGUZBzkk1hi4hHExYpYAcTHx+L93NN03KNHvyMsNAJt7S3cAvj6vYaKilIadHV1FXy+Lb6oqWIF0NhYh1dcXejYhvpGlJSUoqOzjVuAoqJChIaF0KA9PTcQHBSK1tZmpQC7dunj9uS49GaPi30Ld+/OcgugqamJW7dHYGBgQAEyM06itLScFUBISBA+Kf6YjlteXoaVpQB79phzC+DsvB9NlxukDwpHh/2YnZ1lBVBWfgH+/n50bEdHFyIjomFjI+AW4HR2FhIS3qSTmJi4BQ93L3qsrIS0tbUxOTUGPT096p+Wmo6qqmruAfoHemFqakonIRafhTj/DCsAT08P1F66SH3X1tZga+OABw9+5RaAz7fGd993SMvH0+MgxscnWAGIC/IQExNNfQcHhuDjc4gec1pCqanJSD92lAa+d+9nOAidsL7ONHWKSoi8tIZH+mFiwqO+2dm5+KiwiHuAax2tsLW1oYHLyj5DxvET0mwoAiCaqa3tqtTXxdkN09M/cgvA4xljZHRAKgGCg8PQ032dFUBm5jG8l5xEfWdmfoLTPmfpOM5KKDZOhLy8HBqYSAC+tQArK3+yAui5/i0sLS2o7/miYpw6lc09QH19LQ64udLADQ1fIfEdZkU3TF4JmZub4WbfDamfn28A+vr6uQXQ19ejEkBbW4sGjo9LwJUrf9e0ops48d23kZXF3Ctzc3MQ7BVS/bRhnJRQUFAASi6cpzE3JIBswyIvA81Xm+DktI+OrampRUpy2jOZ4wTg09JiBAT408CdnV2ICGee58pKyMjICOMTQyD6iVh0lAjt7de4BSBtIikfoiSJkQaksrKaFUBkZDjOFTJv6qWlJSreyOdmU3kG3N3dUPdlDY1JXlp2to64f/8XVgBVFyvg7c1opa9bWiESxf9jnMoB8vNzITr8Bg08NDgMb29GTSoroakpyTNdW1JSMuou1XMLICsBcnLyUHiO0fPKAMiuQ2VlOXUjT52X+HaYn5/nFsDe3g7t3zD9KrHNEkAZwOHYGISHh1K33t4fEPA608HJmkpL6HhGOlJSjtCYshJAEYCP9yFU13wOQ0ND6nbyRBbtfTkH6O7uhJW1FY0rKwEUAZBmpeAMs1VC7GUnF9y5M8MtgJmZKfr6e6VBZSWAIoDGxiYEBwdSl8nJKRxw9fzXyZMfVVZC5LlvZmYmDUzax80SQHZGRKzt1N1Jf35Cthl3MNuMDx/+RntmeUb2lqz5TJYXF/+AZEoi11f2xJZ25lhHUaGjGkCFi8vq0uoMsFomFTqpM6DCxWV1afIPw/b+p14NwCrRqnP6CxZh0hrAol2VAAAAAElFTkSuQmCC';


// test1: load it in page
const imgg1 = document.createElement('img');
imgg1.src = FAVICON_URLl;
imgg1.style.cssText = 'position:absolute;top:0;border:2px solid black;width:80px;height:80px;z-index:99999;';
document.body.appendChild(imgg1);

// test2: load it as a favicon
const linkk = document.createElement('link');
linkk.type = 'image/png';
linkk.rel = 'icon';
linkk.href = FAVICON_URLl;
document.head.appendChild(linkk);

test1 gaves no error and the picture is displayed without any CSP error.
but test2 gaves this CSP error at document.head.appendChild(linkk);

Refused to load the image
‘data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADA…..’ because it
violates the following Content Security Policy directive: “img-src
‘self’ *.githubusercontent.com .googleusercontent.com .gravatar.com
mozillausercontent.com firefoxusercontent.com profile.stage.mozaws.net
profile.accounts.firefox.com mdn.dev
interactive-examples.mdn.mozilla.net
interactive-examples.mdn.allizom.net wikipedia.org
upload.wikimedia.org https://.google-analytics.com
https://.googletagmanager.com www.gstatic.com”.

conclusion:
the image can be used and be displayed on the web page visually when we use it as img.src even if CSP block them, but cannot be used in head link rel tag <link rel="icon" href="...."> if CSP does not allow it.

here they say:

By default, browsers enforce the same-origin policy to prevent a web
page from accessing cross-origin resources. For example, when a
cross-origin image is loaded, even though it’s displayed on the web
page visually, the JavaScript on the page doesn’t have access to the
image’s data. The resource provider can relax restrictions and allow
other websites to read the resource by opting-in with CORS.
https://web.dev/articles/security-headers

But what I do not understand is why in <link rel="icon" href= is not allowed, it is not javascript, and I’m not accessing it with javascript, so the browser should not block it because of CSP, it should be treated like img.src! no?

Why is this happening? I had read all what I could find about CSP but could not find anything that mentions this behavior. If this is expected, please do you have any source about this behavior? or an explanation at least?

I have a cloud mask raster in Google Earth Engine that consists of pixels with values 0 (= cloud) and 1 (= not cloud) and want to count the number of cloud pixels in order to only export images with less than a certain percentage of cloud coverage.

Using ee.reduceRegion(), I am able to create an object that includes the information I am looking for, but I can’t seem to figure out how to extract the pixel counts in a way that could be used in an if-statement later on. This is my code:

var count = mask_raster.reduceRegion({
  reducer: ee.Reducer.histogram(),
  geometry: geometry,
  scale: 30,
  maxPixels: 1e9
})

print(count);

The output in the console looks like this:

Now I would like to simply get the number of pixels under the histogram property in a format that could be used in a statement along the lines of:

if pixel_count_0 < 5000:
    Export.image.toDrive({
       ...
       })
else:
    pass

I am pretty new to Earth Engine, and usually code in Python, so I am a bit confused about how ee.Objects work. I tried to convert count into a string or list or access the data the way I would access a dictionary in Python using a key, but nothing seems to work – am I thinking about variables in Earth Engine incorrectly?

In my pet project i have few files to test.
My employees.js controller is

let employees = [
  { id: '1', name: "Edmon D'antes", status: 'worker' },
  { id: '2', name: 'Alluri Sitarama Raju', status: 'hero' },
  { id: '3', name: 'Roman Shukhevych', status: 'hero' },
  { id: '4', name: 'Ptn Pnh', status: 'huylo' },
]

export const getAll = (req, res) => {
  res.status(200).json(employees)
}

export const create = (req, res) => {
  const newEmployee = {
    id: Date.now().toString(),
    ...req.body,
  }
  employees.push(newEmployee)
  res.status(201).json(newEmployee)
}

export const remove = (req, res) => {
  let message = 'Employee has been dismissed.'
  employees = employees.filter((e) => {
    if (e.id === req.params.id && e.status === 'hero') {
      message = 'You must respect heroes!'
      return true
    }
    return e.id !== req.params.id
  })
  res.json({ message })
}

My employees.test.js test is

import * as employeesModule from './employees.js'

let mockEmployees = [
  { id: '1', name: "Mocked Edmon D'antes", status: 'worker' },
  { id: '2', name: 'Mocked Alluri Sitarama Raju', status: 'hero' },
  { id: '3', name: 'Mocked Roman Shukhevych', status: 'hero' },
  { id: '4', name: 'Mocked Ptn Pnh', status: 'huylo' },
]

beforeEach(() => {
  jest.spyOn(employeesModule, 'getAll').mockImplementation((req, res) => {
    return res.status(200).json(mockEmployees)
  })
  jest.spyOn(employeesModule, 'create').mockImplementation((req, res) => {
    const newEmployee = {
      id: '5',
      ...req.body,
    }
    mockEmployees.push(newEmployee)
    return res.status(201).json(newEmployee)
  })
  jest.spyOn(employeesModule, 'remove').mockImplementation((req, res) => {
    let message = 'Employee has been dismissed.'
    mockEmployees = mockEmployees.filter((e) => {
      if (e.id === req.params.id && e.status === 'hero') {
        message = 'You must respect heroes!'
        return true
      }
      return e.id !== req.params.id
    })
    return res.json({ message })
  })
})

describe('employees controller', () => {
  it('getAll method should return all employees', () => {
    const req = {} // Provide an empty object for req
    const res = { status: jest.fn().mockReturnThis(), json: jest.fn() }
    employeesModule.getAll(req, res)
    expect(res.status).toHaveBeenCalledWith(200)
    expect(res.json).toHaveBeenCalledWith(mockEmployees)
  })

  it('create method should create a new employee', () => {
    const req = { body: { name: 'New Employee', status: 'working' } }
    const res = { status: jest.fn().mockReturnThis(), json: jest.fn() }
    employeesModule.create(req, res)
    const newEmployee = mockEmployees.find((e) => e.id === '5')
    expect(res.status).toHaveBeenCalledWith(201)
    expect(res.json).toHaveBeenCalledWith(newEmployee)
  })

  it('remove method should remove the employee if not a hero', () => {
    const req = { params: { id: '4' } }
    const res = { json: jest.fn() }
    employeesModule.remove(req, res)
    expect(res.json).toHaveBeenCalledWith({
      message: 'Employee has been dismissed.',
    })
  })

  it('remove method should not remove the employee if a hero', () => {
    const req = { params: { id: '2' } }
    const res = { json: jest.fn() }
    employeesModule.remove(req, res)
    expect(res.json).toHaveBeenCalledWith({
      message: 'You must respect heroes!',
    })
  })
})

As you can see I’ve covered with tests every controller exported method. And test works, but the issue is that my test verifies its own implementation version, not version provided by controller. To test version provided by controller I need access to employees collection spying or mocking the one. After that I’d have chance to check collection changes or calls. Is there ideas how to fix the test without changing the controller?

P.S.

I know how to make it working exporting employees collection from the employees.js, but you know that’s improper change.

I’m trying to render a list of to-do items in a html table in react. I’m currently doing this by iterating through my database rows for each to-do item:

todoLogs.forEach(todoLog => {
        tableHtmlContent += `
          <tr>
            <td>${todos.find(x => x.id === todoLog.id).title}</td>
            <td><input type="checkbox" ${todoLog.d09_04_24 ? "checked" : "unchecked"}></input></td>
            <td><input type="checkbox" ${todoLog.d08_04_24 ? "checked" : "unchecked"}></input></td>
            <td><button onClick=${deleteTodo}><i class="material-icons">delete</i></button></td>
          </tr>
        `
      })

using that to update a variable that holds a template string:

  var tableHtmlContent = `
  <tr ref={tableHeaderContainer} className='border-2 border-black ml-2'>
    <th>Habit</th>
    <th>09/04</th>
    <th>08/04</th>
  </tr>
  `

and rendering that variable inside a table:

<table
        className='mt-3 border-2 [&>tr]:border-2 [&>tr>td]:border-2 [&>tr>th]:border-2 [&>tr>th]:px-1 text-center'
        dangerouslySetInnerHTML={ { __html: tableHtmlContent}}
      >
      </table>

What I now need to do is add onClick functionality to the button in the table, to allow me to delete todos:

<button onClick=${deleteTodo}><i class="material-icons">delete</i></button>

– but at the moment this isn’t working and I get the error: async is not defined

The way of doing this using template strings right now seems inefficient anyway, aside from the issue with the button, so I’m wondering if there is a better way to do this?

Here is what the table looks like also:

enter image description heImage of the table

To solve this, I’ve already looked into:

• useRef in react

• the .innerHTML() function

• useState()

• useEffect()

– but couldn’t find anything workable. Any help would be much appreciated?

I’m trying to solve the problem with my audio files delay. All files are very light – weighted (25-55kb).

I’ve created basic battleship game to play against computer and for more pleasant experience added sounds for menu button clicks as well as attack(hit/miss) sounds.

During the development stage all the files were loading on time. But after deploying in to gitHub pages, few weeks later I decided to revisit this project and found out that there’s delay literally to each sound. And all of them have quite same delay time, to my calculation it’s about 2 sec. Only computer attack on miss sound played on time from time to time (even thought logic and function that renders hits and playing sounds is same)

Here’s is my soundsController module.

import cannonHit from './audio/cannon_hit.mp3';
import cannonAttack from './audio/cannon_attack.mp3';
import startClick from './audio/startClick.mp3';
import menuClick from './audio/menu_click.mp3';
import victory from './audio/victory.mp3';
import defeat from './audio/defeat.mp3';

const cannonAttackSound = new Audio(cannonAttack);
const cannonHitSound = new Audio(cannonHit);
const menuClickSound = new Audio(menuClick);
const defeatSound = new Audio(defeat);
const startClickSound = new Audio(startClick);
const victorySound = new Audio(victory);

export const audioObjects = [
    cannonAttackSound,
    cannonHitSound,
    menuClickSound,
    defeatSound,
    startClickSound,
    victorySound,
];

audioObjects.forEach((audio) => {
    audio.preload = 'auto';
});

let soundBtn = document.querySelector('.sound-button');

soundBtn.addEventListener('click', () => {
    toggleMute();
    soundBtn.classList.toggle('off');
});

function toggleMute() {
    audioObjects.forEach((audio) => {
        audio.muted = !audio.muted;
    });
}

And this is function which plays sounds for attacks:

function updateCellHits(grid, x, y, target) {
        if (grid[x][y].ship !== null) {
            audioObjects[1].play();
            target.classList.add('hit');
            target.dataset.hit = 'true';
            target.style.pointerEvents = 'none';
        } else {
            audioObjects[0].play();
            target.classList.add('miss');
            target.dataset.hit = 'true';
            target.style.pointerEvents = 'none';
        }
    }

Here is example on how I play use sound for menu buttons:

startGameBtn.addEventListener('click', () => {
        audioObjects[4].play();
        initiatorContainer.style.display = 'none';
        initGameStart();
    });

This is GitHub pages for the app: https://ljoskold.github.io/battleship/

Thank you for spending your time reading about my problem!

I’ve tried to use chatGPT and searching google, but seems like couldn’t find any relative answers. So I decided to create my first stack overflow question myself.

I also enabled preload for each of them, and judging by Chrome DevTools they are indeed downloaded after loading the page.

I’m trying to figure out how to dinamically adjust iframe height based on content. I don’t want to see a scrolling behaviour o the iframe on mobile, it’s not very UX friendly.
I’ve tried to set 100% as height, but nothing changed.

Here’s the page so you can see what I’m talking about
https://flypont.com/a320-basic-2
(it’s the section where you can click “Scegli giorno e ora” or “data aperta”. The below content is an iframe. This is the code:

<iframe id="calendario" src="https://app.acuityscheduling.com/catalog.php?owner=31548557&amp;category=A320+Basic" width="100%" height="1000px" frameborder="0"></iframe>

How can i do the customisation?

I tried this but with no result.

<script>
   var iframe = document.getElementById("calendario");
   iframe.width = iframe.contentWindow.document.body.scrollWidth;
   iframe.height = iframe.contentWindow.document.body.scrollHeight;
</script>

'use client'
import Link from "next/link";
import { useState,useEffect} from "react";

export default function Teacher ({params}){
  const {teacherId}= params.teacher

    const [teacher , setTeacher] = useState([])
    
    useEffect(()=>{
        getData(teacherId)
    },[]) 
    
    async function getData (){
        try{
            
            const response = await fetch("http://localhost:8000/teachers");
            const data = await response.json();
            setTeacher(data)
            
        } catch(error){
            console.log(error);
        }
    }
    console.log(teacherId); // output: undefined
    return(
        <div className="mt-20 text-center text-2xl">
           
           <section className="view-contact-intro p3">
        <div className="container">
          <div className="row my-2 text-center">
            <p className="h3 fw-bold">
              Teacet Information
            </p>
          </div>
        </div>
            </section>
            <section className="view-contact mt-e">
       <div
         className="container p-2"
       >
         <div className="row align-items-center">
           <div className="col-md-3">
             <img
               src={teacher.profileImg}
               alt=""
               className="img-fluid rounded"
             />
           </div>
           <div className="col-md-9">
             <ul className="list-group">
               <li className="list-group-item list-group-item-dark">
                 Name:
                 <span className="fw-bold">{teacher.firstname}</span>
               </li>
               <li className="list-group-item list-group-item-dark">
                 Phone:
                 <span className="fw-bold">{teacher.mobile}</span>
               </li>
               <li className="list-group-item list-group-item-dark">
                 Email: 
                   <span className="fw-bold">{teacher.email}</span>
               </li>
               <li className="list-group-item list-group-item-dark">
                 Job: 
                <span className="fw-bold">{teacher.job}</span>
               </li>
             </ul>
           </div>
         </div>
         <div className="row my-2">
           <div className="d-grid gap-2 col-6 mx-auto">
             <Link
               href={"/teachers"}
               className=""
             >
               HOME
             </Link>
           </div>
         </div>
       </div>
            </section>
        </div>
    )
}

in Nextjs 14 I try to show the details of Teacher Info in other route But when I log ‘params’ in line 25, show to me ‘undefined’ and I do not use the data in jsx. please help me to resolve it.in Nextjs 14 I try to show the details of Teacher Info in other route But when I log ‘params’ in line 25, show to me ‘undefined’ and I do not use the data in jsx

I’m trying to make this (see screenshot)

And this is what where i landed

But the main problem is, these empty spaces has to be covered automatically (see screenshot)

I’ve tried this but it didn’t work as expected..
https://mona01.medium.com/learn-to-create-flowers-grid-in-css-6cf8772b8fc5

i have a problem, regarding a multiple select.

I have a Multiple Select like bleow.

echo '<td valign="top" nowrap="nowrap" style="padding: 10px">
    <select  class="js-example-basic-multiple" name="status[]" multiple size="5"  style="width: 140px">
            <option value="OPEN">Open</option>
            <option value="ONHOLD">On Hold</option>
            <option value="ONGOING">Ongoing</option>
            <option value="CHANCELED">Chanceled</option>
            <option value="CLOSED">Closed</option>
    </select>
    </td>';

To plot a Canvasjs with the Filter of the Multiple Selection i’m getting the array via json_encode into an Variable:

var status = <?php echo json_encode($_REQUEST['status']); ?>;

Then i handed it over to the graph, to use it as Filter

$.getJSON("fertigung/graph/mes/autocomplete/getdata_downcases_daily.php?type=json", {status: status}, function(data) {
        for( var i = 0; i < data.length; i++) {
            dataPoints1.push({ x: data[i].x, y: data[i].y }); 
        }
        chart1.render();
    });

Everything is working as long as something is selected and the status [] array is not empty.
Now here is the Problem, if nothing is selected the array is not there or empty.
How can i set the array to an Value of ‘%’ before using json_encode.

Big thanks in advance for your help.

Best Regards

I tried to fill the Array with a Value if nothing is selected, but was not succesful so far.

I want to send multiple XMLHttpRequests to my server, collect the results in an array, then use this array to populate the HTML of the target element, in this case a Popover.

My code is a mixture of pure JS and JQuery and looks like this:

$('.commentary-word').on('shown.bs.popover', function() {
        var popElement = '#' + $(this).attr('aria-describedby');
        var comm_urns = $(this).attr('comm-passages').split('%');
        var comm_passages = [];
        comm_urns.forEach(function(comm_urn) {
            var urn = comm_urn.split(';')[0]
            var target = comm_urn.split(';')[1]
            var request = new XMLHttpRequest();
            request.onreadystatechange = function() {
                if (this.readyState == 4) {
                    if (this.status == 200) {
                        comm_passages.push(this.responseText)
                    } else {
                        alert("Passage " + urn + ':' + target + " not found")
                    }
                }
            };
            request.open('GET', '/snippet/' + urn + '/subreference/' + target + '?source=ntPassage', true);
            request.send()
        });
        $(popElement).children('.popover-body').html(comm_passages.join('<br>'));
    })

I was expecting that the .popover-body would be filled with the joined results from the multiple XHR results. Instead I get an empty string.
When I print comm_passages to the console, it looks like this:

Array []​
0: "CJHNT Commentary on 1 Timothy 1.1"​
1: "CJHNT Commentary on 1 Timothy 1.1a"​
length: 2​

And when I try to access, e.g., comm_passages[0] I get undefined. I don’t know enough to figure out if this is a problem with the interaction between JQuery and JS or whether something else is going on.
Thanks a lot for your help in advance.

I am using ngx-capture library where it is not loading properly for the first time
but the subsequent time it works fine.

@if (freeze) {
<ngx-capture #ngxCapture [target]="screen" (resultImage)="saveImage($event, template)"></ngx-capture>
}

freeze: boolean = false
takeScreenshot() {
    this.freeze = !this.freeze
  }

ngx-capture is loaded in dom. when i set freeze true and vice-versa.But the drag and select option not working for the first time but the next subsequent times it works.

I have an open topped cylinder with a material that is double sided in a Three.JS scene.

What I am trying to achieve is one color on the front of the cylinder, and another color on the inside of the cylinder.

To get this working I have created a new material class that extends THREE.MeshStandardMaterial, and I am modifying the vertex and fragment shaders in the onBeforeCompile hook.

at the end of the main method in the fragment shader I have this:

gl_FragColor = vec4(faceNormal.rgb, sampledDiffuseColor.w);

if(gl_FrontFacing == false) {            
    gl_FragColor = vec4(0.0,0.0,0.0, sampledDiffuseColor.w);

}

But for whatever reason that I can’t really figure out, gl_FrontFacing is always set to true.
To my knowledge this is not something I am setting or modifying and it is something that webGL sets for me. But shouldn’t it be false for all inside faces?

Or am I doing something wrong here?

To simplify it for myself I updated the onBeforeCompile hook

onBeforeCompile(shader: any) {
    shader.vertexShader = /* glsl */ `
    void main() {
        gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
    }
    `;
    shader.fragmentShader = /* glsl */`
    void main() {
        gl_FragColor = gl_FrontFacing ? vec4(1.0, 0.0, 0.0, 1.0) : vec4(0.0, 0.0, 1.0, 1.0);
    }
    `;
}

and it shows up as red both inside and outside

I am looking for a way to check how much JS my app is loading. I was pretty sure I can do it in the Network–>JS tab in Chrome, but every time I refresh the page the numbers are completely different:

Similar situation when i console.log performance.memory:

What am I doing wrong?

The motivation for this is to check how the bundle changes if I optimize the app with some things.

  let locationFilter
    if (lat && log) {
        locationFilter = AND ST_Distance_Sphere(
    tb_executive.pincodeCoordinates,
    ST_GeomFromText('POINT(${log} ${lat})', 4326)
) <= ${distance} * 1000`;
    } 

    const list = await this.exicutiveRepository
        .query(`SELECT
    tb_executive.engineerId,
    tb_executive.referenceId,
    tb_executive.name,
    tb_executive.emailId,
    tb_pincode.pincode,
    tb_executive.engineerType,
    tb_executive.activeStatus
    FROM tb_executive
    INNER JOIN tb_pincode 
    ON tb_pincode.pincodeId = tb_executive.pincode
    WHERE tb_executive.isApproved = '1' 
    AND tb_executive.activeStatus = '1'
    AND tb_executive.status ='1' ${locationFilter} `)`

this query is working properly when it runs in msql 5.7, but now i am using mysql 8.0 but now thus function is not working or not calculating accurate data

I need to know how to do this with msql 8.0

Issue with excessive requests in Place Autocomplete JavaScript implementation and seeking optimization using PHP session method

I have implemented Place Autocomplete in JavaScript, but I’m facing an issue where it makes too many requests with every keypress. I’m looking to optimize the request rate by implementing a session-based method in PHP.

When a user searches in the text box, the recommendations are not appearing, and I want to return the pin, district, city, and state in JavaScript. I’ve managed to retrieve all this information, but the API is not working as expected.

Here’s my current PHP code:

$url =[APIURL](https://maps.googleapis.com/maps/api/place/autocomplete/json?input={$input}&key=API_KEY)
$input = urlencode($_GET['autocomplete']);
$curl = curl_init();
curl_setopt_array($curl, array(
    CURLOPT_URL => $url,
    CURLOPT_RETURNTRANSFER => true,
    CURLOPT_FOLLOWLOCATION => true,
    CURLOPT_TIMEOUT => 30,
    CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
    CURLOPT_CUSTOMREQUEST => "GET",
));
$response = curl_exec($curl);
$err = curl_error($curl);

curl_close($curl);

if ($err) {
    echo "cURL Error #:" . $err;
} else {
    $data = json_decode($response, true);
    $predictions = $data['predictions'];
    if ($predictions) {
        foreach ($predictions as $prediction) {
            echo $prediction['description'] . "<br>";
        }
    } else {
        echo "No predictions found.";
    }
}

However, I want the recommendations to be displayed in text format, and the response should include city, pin, state, and country information.

I’ve attempted to achieve this using PHP, but my aim is to reduce the request rate. Can anyone please assist me with this task?