Category: javascript

Category Added in a WPeMatico Campaign

How can I programmatically send the user to another page?

Given is a VueJS 3 application (based on Quasar, which is VueJS under the hood).

I want to send the user programmatically to another page.

My router looks like this:

  {
    path: '/ask',
    name: 'ask',
    component: () => import('layouts/QuestionLayout.vue'),
    children: [{ path: '', component: () => import('pages/QuestionPage.vue') }],
  },
  {
    path: '/',
    name: 'home',
    component: () => import('layouts/MainLayout.vue'),
    children: [

When I use

router.push('ask')

or

router.push({name: 'ask')}

only the URL in the Webbrowser will change to the corresponding URL, but its component will not get loaded. Instead, I see an error message in the Browser Console;

enter image description here

I need first to hard-refresh the browser in order to get the page reloaded that belongs to the URL that has been set with router.push.

I also tried window.location.href='/ask', but window is not defined anymore in a VueJS application.

With jQuery and plain vanilla javascript, this has never been a problem. How to do that in 2023?

What’s wrong with my code? My to do list don’t work (pt-br)

My to-do list doesn’t work the way I want it to. The error is in the part of clicking on finish a task, it finishes right but after that I can’t finish any more. I don’t know why this is. In addition, the “finish” starts with the last items, I need help with these two problems.

One finished task
Two finished tasks

html:

<!DOCTYPE html>
<html lang="pt-br">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Minhas Tarefas Escolares</title>
</head>

<body>
    <h1 id="titulo">MTE - Minhas Tarefas Escolares</h1>
    <p id="detalhes"></p>

    <div class="lista-tarefas">
        <input type="text" id="tarefa" placeholder="Adicione uma tarefa">
        <input type="button" value="Adicionar" id="adicionar">
        <h2>Tarefas Pendentes</h2>
        <ul id="tarefas">

        </ul>
        <br>
        <br>
        <h2>Tarefas Finalizadas</h2>
        <ul id="finalizadas">

        </ul>
    </div>







    <script type="text/javascript" src="script.js"></script>
</body>

</html>

Script:

const tarefaInput = document.getElementById("tarefa");
const btnAdc = document.getElementById("adicionar");
const listaTarefas = document.getElementById("tarefas");
const listaFinalizadas = document.getElementById("finalizadas")
btnAdc.addEventListener("click", adicionarTarefa);
tarefaInput.addEventListener("keypress", function (e) {
    if (e.key === "Enter") {
        adicionarTarefa();
    }
});
function adicionarTarefa() {
    const tarefaTexto = tarefaInput.value;
    if (tarefaTexto.trim() !== "") {
        const novaTarefa = document.createElement("li");
        novaTarefa.innerHTML = `
          ${tarefaTexto} <button class="excluir">Excluir</button> <button class="finalizar">Finalizar</button>
      `;
        listaTarefas.appendChild(novaTarefa);
        tarefaInput.value = "";

    }
    listaFinalizadas.addEventListener('mouseout', function (e) {
        if (e.target.classList.contains('finalizar')) {
            this.innerHTML = `${tarefaTexto} <button class="excluir">Excluir</button>` //não tá funcionando!!
            this.style.color ='green'
        }
    })
}


listaTarefas.addEventListener("click", function (e) {
    if (e.target.classList.contains("excluir")) {
        e.target.parentElement.remove();
    }
    if (e.target.classList.contains("finalizar")) {
        listaFinalizadas.appendChild(e.target.parentElement)
    }
});

listaFinalizadas.addEventListener("click", function (e) {
    if (e.target.classList.contains("excluir")) {
        e.target.parentElement.remove()
    }

    
})

I tried to change the way I declared the variables, the functions, but none of it worked.

How can i redirect users with onClick and useNavigate functions in react

I’m trying to make this handleDetails(id) function make the user navigate to a note on my progam passing the id of the note as parameter so the back-end can redirect him to the note based on the note_id, but the onClick function is not working
enter image description here

i already tried a lot of things, like putting a useEffect on it somehow, already did some tests like put a console.log on id, and worked fine, seems like the problem is something is not letting onClick function works and redirect me to the /moviePreview/id for some reason

How to use keycodes in an array to filter which keys are taken as input within a ‘keyup’ event listener?

I am trying to build a wordle clone, but I am running into issues when trying to filter out only the alphabet to be taken as keyboard inputs for the game.

Currently I have a Keyboard container that contains each row (of class ‘row’) of keys (of class ‘key’) and a start to a JS file that I cannot seem to move forwards in:

// Keyboard
// Listen for key being released
let key_codes = [81,87,69,82,84,89,85,73,79,80,
                  65,83,68,70,71,72,74,75,76,
                  13,90,88,67,86,66,78,77,8];
document.addEventListener('keyup', (e) => {
    if (e.keyCode in key_codes) {
        console.log(e.keyCode);
    }
});

I have made a list of all the acceptable keycodes for the game, and have tried to add an event listener to watch for keys being released but when I check ‘if (e.keyCode in key_codes)’ I don’t get an output when I should be.

I have checked the types of the list elements and the keyCodes (they match) and have tried printing ‘e.keyCode’ before that if statement, and it correctly prints whichever key I press.

I may be missing something obvious here but somehow I am unable to figure this one out for myself.

Why is the hidden attribute not working on the picture element in next.js?

I have a picture element in my component tree in a Next.js application and I am trying to use the hidden attribute on it, but it doesn’t work, all the images are still completely visible and there’s no hidden attribute when inspecting them in the browser.

The component is:

export function MemberPicture({
  member,
  active,
  id,
}: {
  member: Member;
  active: boolean;
  id: string;
}) {  

  return (
    <picture hidden={!active}>
      <source srcSet={member.images.webp} type="image/webp" />
      <Image
        src={member.images.png}
        alt={member.imageAlt}
        width="445"
        height="445"
        id={id}
        className={classnames(
          pageStyles.image,
        )}
      />
    </picture>
  );
}

I’ve tried to set the hidden attribute on all the elements inside the picture and on the picture itself using a literal boolean value of true, but it doesn’t work either.

<picture hidden={true}>
      <source srcSet={member.images.webp} type="image/webp" hidden={true} />
      <Image
        src={member.images.png}
        alt={member.imageAlt}
        width="445"
        height="445"
        id={id}
        className={classnames(
          pageStyles.image,
        )}
        hidden={true}
      />
    </picture>

The component is being used as shown:

{crew.map((member, index) => {
  return (
    <MemberPicture
      id={imagesIds[index]}
      active={index === selectedMemberIndex}
      member={member}
    />
  );
})}

Its parent’s styles and its styles are:

.imageWrapper {
  grid-area: image;
  max-width: 100%;
}

@media (min-width: 50em) and (orientation: landscape) {
  .imageWrapper {
    grid-column: span 2;
    max-width: 90%;
  }
}

.image {
  max-width: 100%;
}

@media (max-width: 35em) {
  .image {
    max-height: 320px;
  }
}

I am going to use the display property set to none as the hidden attribute is not working, but I still would like to know why setting that attribute does not work at all.

Can someone tell me where my logic is missing?

I am attempting to create a new array of object with an id, siteId, and name. However, based on my logic i am getting a siteid of 1,1,2,3. On the second office value it is incrementing the site Id, although it needs to have a siteId of 2.

var data = [["Jims Burgers", "Hallway", "6209", "Yes", "None", "Occupancy Sensors"],
            ["Jims Burgers", "Office", "6209", "Yes", "None", "Occupancy Sensors"],
            ["Johns Burgers", "Hallway", "6209", "Yes", "None", "Occupancy Sensors"],
            ["Johns Burgers", "Office", "6209", "Yes", "None", "Occupancy Sensors"]]
var siteNames = []
var areaNames= []
var id = 0
data.forEach(function (d) {
  const dm = d.filter((n) => n);
  if(dm.length === 6) {
     
    if(areaNames.find(({name}) => name === dm[1])){
      siteId +=1
      id += 1
      areaNames.push({id: id, siteId: siteId, name: dm[1]})
    }

    if(!areaNames.find(({name}) => name === dm[1])){
      id += 1
      areaNames.push({id: id, siteId: siteId, name: dm[1]})
     
    }  

    if(!siteNames.find(({ name }) => name === dm[0])) {
      siteNames.push({ name: dm[0], id: siteId });
    }
  }
    
});

Need a help about editing and reading the javascript encoding url

Hello everyone I have a probelm to read and edit the feed URL because of the diffuclt to understanding encoding … as you see below, I can’t understand this code :

(‘url’: ‘https://ww’ + ‘w.blogger.’ + ‘com/feeds/’ + _0x1dc699(0x1ee, ‘4fS5’) + _0x1dc699(0x1ef, ‘S7Sq’) + _0x1dc699(0x1f0, ‘]h%N’) + ‘ult?alt=js’ + _0x1dc699(0x1f1, ‘Olcs’) + ‘pt’,)

how can I edit and read it … if that is an encoding js how can I decoding it ?

(function(_0x22fd18, _0xf2a77e) {
    const _0x279fe6 = _0x38e5,
        _0x4f2a33 = _0x22fd18();
    while (!![]) {
        try {
            const _0x41036b = -parseInt(_0x279fe6(0x1e4, 'P9](')) / 0x1 + parseInt(_0x279fe6(0x1dd, 'Olcs')) / 0x2 * (-parseInt(_0x279fe6(0x1e5, 'tCF%')) / 0x3) + parseInt(_0x279fe6(0x1df, 'Olcs')) / 0x4 + -parseInt(_0x279fe6(0x1e0, 'mneR')) / 0x5 + -parseInt(_0x279fe6(0x1e6, '8R)A')) / 0x6 + -parseInt(_0x279fe6(0x1e2, 'Kjbx')) / 0x7 + parseInt(_0x279fe6(0x1e7, 'OlDz')) / 0x8;
            if (_0x41036b === _0xf2a77e) break;
            else _0x4f2a33['push'](_0x4f2a33['shift']());
        } catch (_0x26bd32) {
            _0x4f2a33['push'](_0x4f2a33['shift']());
        }
    }
}(_0x4aec, 0xa4d05), $(document)[_0x46f744(0x1e8, 'OlDz')](function() {
    'use strict';
    const _0x1dc699 = _0x46f744; - 0x1 === window['location'][_0x1dc699(0x1e9, '4fS5')][_0x1dc699(0x1ea, 'MUra') + 'e']()[_0x1dc699(0x1eb, 'tMxm')](_0x1dc699(0x1ec, 'HrSH')) && $['ajax']({
        'dataType': _0x1dc699(0x1ed, 'mV1('),
        'url': 'https://ww' + 'w.blogger.' + 'com/feeds/' + _0x1dc699(0x1ee, '4fS5') + _0x1dc699(0x1ef, 'S7Sq') + _0x1dc699(0x1f0, ']h%N') + 'ult?alt=js' + _0x1dc699(0x1f1, 'Olcs') + 'pt',
        'method': _0x1dc699(0x1f2, 'YU)5'),
        'success': function(_0x5e9526) {
            const _0x1a6500 = _0x1dc699;
            var _0x6a1477 = [];
            0x0 < _0x5e9526[_0x1a6500(0x1f3, 'P9](')][_0x1a6500(0x1f4, '#vc$')]['length'] && (_0x4bb8d6 = _0x5e9526[_0x1a6500(0x1f5, 'tMxm')][_0x1a6500(0x1f6, 'uFRC')][0x0]['content']['$t'], _0x1fc742 = $(_0x4bb8d6)['find'](_0x1a6500(0x1f7, 'B@TC') + 'i'), $[_0x1a6500(0x1f8, 'NU7m')](_0x1fc742, function(_0x4efc10, _0x2a1c3d) {
                const _0x4f6364 = _0x1a6500;
                _0x6a1477[_0x4f6364(0x1f9, 'JRSl')]($(_0x2a1c3d)[_0x4f6364(0x1fa, 'ZZKq')]()[_0x4f6364(0x1fb, 'ZZKq')]());
            }));
            var _0x4bb8d6, _0x1fc742 = window[_0x1a6500(0x1fc, 'F3WG')][_0x1a6500(0x1fd, 'uFRC')][_0x1a6500(0x1fe, 'pd!j') + 'e'](); - 0x1 !== $[_0x1a6500(0x1ff, 'z(2y')](_0x1fc742, _0x6a1477) ? (_0x1fc742 = $(_0x5e9526['feed'][_0x1a6500(0x1f6, 'uFRC')][0x1][_0x1a6500(0x200, '64Lc')]['$t'])[_0x1a6500(0x201, ')j8B')]('style'), $(_0x1a6500(0x202, 'Sa(F'))[_0x1a6500(0x203, 'tMxm')](_0x1fc742), _0x5e9526 = $(_0x5e9526[_0x1a6500(0x204, 'lqZW')][_0x1a6500(0x205, 'JRSl')][0x0][_0x1a6500(0x206, 'NA]q')]['$t'])[_0x1a6500(0x207, 'tMxm')](_0x1a6500(0x208, 'HrSH')), $('head')[_0x1a6500(0x209, 'mV1(')](_0x5e9526)) : (_0x4bb8d6 = $(_0x4bb8d6)[_0x1a6500(0x20a, 'rxg2')](_0x1a6500(0x20b, 'Fmaj'))[_0x1a6500(0x20c, '4fS5')]()) && $(_0x1a6500(0x20d, 'Pq$('))[_0x1a6500(0x20e, 'mneR')](_0x4bb8d6);
        }
    });
}));

Javascript encoding URL and Blogger feeds

Uncaught Type Error: allButtons.remove() is not a function?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>QuiZA</title>
<link rel="stylesheet" href="css/style.css"/>
<script src="jsapp.js"></script>
</head>
<body>
     <div class="container">
        <h1 class="frontlogo">QuiZA Logo </h1>
        <video autoplay loop src="assetsQZA3.mp4" class="Logo"></video>
        <div class="grid">
          <button id="start" class="button-56" role="button">Start</button>
          <button class="button-56" role="button">Quiz List</button>
          <button class="button-56" role="button">Contact</button>
        </div>
        <!--Loading screen will start after this-->
      <div class="splash">
        <h1 class="splash-header">Press Here...</h1>
    </div>
</div>
  
</body>
</html>

CSS

.container{
    background: white cover;
    height: 100vh;
    width: 100%;
    display: grid;
}

.grid{
    display: grid;
    grid-auto-flow: row;    
    
    margin: auto;
    gap: 1em;
    text-align: center;
    transition: all ease-in-out 0.6s;

    
}
.ButtonS:hover{
    transform: scale(1.2);
}
.ButtonC:hover{
    transform: scale(1.2);
}
.ButtonQ:hover{
    transform: scale(1.2);
}
.ButtonS{   
    background: white;
    padding: 1em;
    border-radius: 30px;
    transition: all 0.2s ease-in-out;
}
.ButtonC{
    background: white;
    padding: 1em;
    border-radius: 30px;
    transition: all 0.2s ease-in-out;
}
.ButtonQ{
    background: white;
    padding: 1em;
    border-radius: 30px;
    transition: all 0.2s ease-in-out;
}
.button-56{
    align-items: center;
    background-color: rgb(74, 227, 36);
    border: 2px solid #111;
    border-radius: 8px;
    box-sizing: border-box;
    color: #111;
    cursor: pointer;
    display: flex;
    font-size: 16px;
    height: 48px;
    justify-content: center;
    line-height: 24px;
    max-width: 100%;
    padding: 0 25px;
    position: relative;
    text-align: center;
    text-decoration: none;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
}
.button-56:after{
    background-color: #111;
    border-radius: 8px;
    content: "";
    display: block;
    height: 48px;
    left: 0;
    width: 100%;
    position: absolute;
    top: -2px;
    transform: translate(8px, 8px);
    transition: transform .2s ease-out;
    z-index: -1;
}
.button-56:hover:after{
    transform: translate(0, 0);
}
  
.button-56:active{
    background-color: #ffdeda;
    outline: 0;
}
  
.button-56:hover{
    outline: 0;
}
  
 @media (min-width: 768px){
    .button-56 {
      padding: 0 40px;
    }
}
.splash-header{
    color: white;
    transition: all ease-in-out 0.6s;
}
.splash-header:hover{
    transform: scale(1.5);
}
.frontlogo{
    height: 90%;
    color: white;
    display: flex;
    justify-content: center;
    align-content: center;
}
.Logo{ 
    display: flex;
    border-radius: 50%;
    max-height: 300px;
    justify-content: center;
    align-content: center;
    margin: auto;
    transition: all 2s ease;
}

JS

const startButton = document.getElementById("start");
const allButtons = document.querySelectorAll('button-56');
const logoButton = document.getElementsByClassName("Logo");

addGlobalEventListener("click", ".button-56", e => {
    startGame();
})

function addGlobalEventListener(type, selector, callback){
    document.addEventListener(type, e => {
        if (e.target.matches(selector)) callback(e)
    })
}

function startGame(){
    allButtons.remove();
    logoButton.remove();
}

I am continuing a quiz application project and I am running into the above error code on line 16 of my JS. It does not display this error in the compiler and it runs, when I inspect my document I get the error listed in the title.

I am attempting to utilize, allButtons.remove(); and `logoButton.remove(); to on the event that a user clicks the start button all of the buttons and the logo would be removed from the document creating a fresh canvas for me to display a quiz question and a user input of some sort like multiple choice or scanner.

(https://jsfiddle.net/vqc1onap/2/#&togetherjs=0OdOatkR6z)
I have tried using different selectors and tried a different variable name I haven’t found a solution yet.

Implementing a Pagination Component in React

I’m working on a React project and need to implement a pagination component for a list of items. I’ve looked into various libraries and approaches, but I’m struggling to find a solution that fits my requirements.

Here are my specifications:

I need to display 10 items per page.
The component should show a maximum of 5 page numbers at a time for navigation.
The current page should be highlighted, and clicking on a page number should update the displayed items accordingly.
I’m fetching data from an API, and I want to make sure the pagination works smoothly with asynchronous calls.

I’ve tried [mention any libraries or approaches you’ve already attempted], but I’m facing issues with [describe the specific challenges].

Could someone please provide a clear example or guide me through implementing a pagination component in React that meets these requirements? Any help or code snippets would be greatly appreciated!

I have implemented the SSO in angular using okta then I got some errors

The requested feature (Interaction Code flow) isn’t enabled in this environment. Ensure that you have Okta Identity Engine enabled and the Interaction Code flow enabled for this application and authorization server. ; Zone: ; Task: Promise.then ; Value: OAuthError: The requested feature (Interaction Code flow) isn’t enabled in this environment. Ensure that you have Okta Identity Engine enabled and the Interaction Code flow enabled for this application and authorization server.

Calculating the Millionth Fibonacci Number Using JavaScript and Matrix Implementation

I am trying to calculate nth Fibonacci number where n is larger than 1 million. The program works fine even for the 1 millionth Fibonacci number (it is really slow though). So to optimize, I added a new function, in which you multiply the last result by itself. But since the number is too great I can not figure out how many operations I need to perform.

Here is my code.

function multiplyByResult(result, baseMatrix) {
  //[[0,1],[2,3]] [[0,1],[2,3 ]]
  return {
    0: baseMatrix[0] * result[0] + baseMatrix[1] * result[2],
    1: baseMatrix[0] * result[1] + baseMatrix[1] * result[3],
    2: baseMatrix[2] * result[0] + baseMatrix[3] * result[2],
    3: baseMatrix[2] * result[1] + baseMatrix[3] * result[3],
  };
}

function matrixSquare(matrix) {
  //[[0,1],[2,3]] [[0,1],[2,3 ]]
  return {
    0: matrix[0] * matrix[0] + matrix[1] * matrix[2],
    1: matrix[0] * matrix[1] + matrix[1] * matrix[3],
    2: matrix[2] * matrix[0] + matrix[3] * matrix[2],
    3: matrix[2] * matrix[1] + matrix[3] * matrix[3],
  };
}

function matrixMultiplication(baseMatrix, mulitplierMatrix) {
  //[[0],[2]]
  return {
    0:
      baseMatrix[0] * mulitplierMatrix[0] + baseMatrix[1] * mulitplierMatrix[2],
    2:
      baseMatrix[2] * mulitplierMatrix[0] + baseMatrix[3] * mulitplierMatrix[2],
  };
}

function matrixSolution(n) {
  // [[0,1],[1,1]]
  const baseMatrix = { 0: 0n, 1: 1n, 2: 1n, 3: 1n };
  //[[0],[1]]
  const mulitplierMatrix = { 0: 0n, 2: 1n };

  let result = matrixSquare(baseMatrix);

  if (n < 1000000)
    for (let i = 2; i < n; i++) {
      result = multiplyByResult(result, baseMatrix);
    }
  else {
    let count = 1;
    while (count < Math.log10(n)) {
      result = matrixSquare(result);
      count++;
    }
  }

  return matrixMultiplication(result, mulitplierMatrix);
}

function fib(n) {
  if (n === 0) return 0n;
  if (n < 2 && n > 0) return 1n;

  const count = n > 0 ? n : n * -1;
  const res = matrixSolution(count);

  if (n < 0 && n % 2 === 0) return res[0] * -1n;
  return res[0];
}

This is the matrix implementation to find nth Fibonacci. I used JavaScript objects to represent matrices. The real problem is in matrixSolution function, I don’t know how many times I should loop over to get the right result. Figuring out this entire code was already hard, and at this point I don’t know what to think.

Merge objects inside array into one object combining values

I have the following need regarding an array of objects from an order. The array is composed by shipment numbers and items like this:

[
{
    "shipment_numb": "H06369496704",
    "items": [
        {
            "name": "FILTRO DE COMBUSTIBLE TOYOTA 23300-38010 (UNIDAD)",
            "sku_lv": "LV-02989",
            "quantities": 1,
            "prices": 14.67852864,
            "costs": 8.9112,
            "stock_locations": "Valera (Toyoandina, S.A.)",
            "stock_ids": 3
        },
        {
            "name": "TAPA RADIADOR 0.9 ALTA TOYOTA 16401-63010 (UNIDAD)",
            "sku_lv": "LV-03066",
            "quantities": 3,
            "prices": 24.708,
            "costs": 15,
            "stock_locations": "Valera (Toyoandina, S.A.)",
            "stock_ids": 3
        }
    ]
},
{
    "shipment_numb": "H53261290649",
    "items": [
        {
            "name": "BUJE GEMELO INFERIOR BAFLEX 90385-T0010 (KIT / JUEGO)",
            "sku_lv": "LV-07353",
            "quantities": 1,
            "prices": 19.99999964,
            "costs": 17.241379,
            "stock_locations": "Caracas (Baflex)",
            "stock_ids": 34
        },
        {
            "name": "BUJE BARRA ESTABILIZADORA DELANTERA BAFLEX 48815-26020 (KIT / JUEGO)",
            "sku_lv": "LV-07374",
            "quantities": 1,
            "prices": 19.99999964,
            "costs": 17.241379,
            "stock_locations": "Caracas (Baflex)",
            "stock_ids": 34
        }
    ]
},
{
    "shipment_numb": "H47072837723",
    "items": [
        {
            "name": "ACEITE DE MOTOR MOTUL 5W-30 (1L)",
            "sku_lv": "LV-00003",
            "quantities": 1,
            "prices": 19.18016152,
            "costs": 11.6441,
            "stock_locations": "Ciudad Guayana (Automotriz Yocoima, C.A.)",
            "stock_ids": 1
        },
        {
            "name": "GEMELOS PROSHOCK GEM01 (PAR)",
            "sku_lv": "LV-00082",
            "quantities": 1,
            "prices": 46.32834007199999,
            "costs": 29.6058,
            "stock_locations": "Ciudad Guayana (Automotriz Yocoima, C.A.)",
            "stock_ids": 1
        }
    ]
}

]

So, what I would like to obtain is a combined object for all the products contained in every shipment, leaving each “items” like this:

"items": [{
            "name": "FILTRO DE COMBUSTIBLE TOYOTA 23300-38010 (UNIDAD)","TAPA RADIADOR 0.9 ALTA TOYOTA 16401-63010 (UNIDAD)",
            "sku_lv": "LV-02989","LV-03066"
            "quantities": 1,3,
            "prices": 14.67852864,24.708,
            "costs": 8.9112,15,
            "stock_locations": "Valera (Toyoandina, S.A.)","Valera (Toyoandina, S.A.)",
            "stock_ids": 3,3,
        }]

Any idea on how can I join these keys in one object? Thanks in advance!

Javascript issue: photos loading as undefined.jpg [closed]

I am having some trouble while calling my image names in this Javascript code. using a function to call my images for a web project and it keeps pulling them as undefined. I read online that something is undefined but I cant figure it out. I would greatly appreciate any help. Here is a snippet of my JS:

 function getChatPic(attr){
         var chart = "<img class='popup-chart-pie' src='charts/"+attr.CONST_NO_1+"_2.jpg'>";
            chart += "<br>";
         return chart+= "<img class='popup-chart-bar' src='charts/"+attr.CONST_NO_1+"_1.jpg'>";
     }

Here is my codepen:

https://codepen.io/chesouye/pen/VwgqXEm

I have been reading online and doing some trial and error but I really cant figure it out and its about to drive me crazy.

Next.js: console gets cleared automatically, preventing me from seeing the output

in my Next.js app, I have a form defined like this:

  <form onSubmit = {
    async() => await getCertificate(id)
    .then(resp => resp.json())
    .then(data => console.log(data))
  }>

The problem is that when an error occurs, it displays for a split second in the console and then the console is instantly cleared (thus preventing me from reading the error).

I tried adding .catch(e => console.error(e)) to the end of the call, but this doesn’t fix the issue.

How can I prevent the console from getting automatically cleared like this?

Aggregating data using vanilla JavaScript or another JavaScript library (e.g., lodash)

Could you help me with the following scenario?

I’d like to build a stacked bar chart that shows homicide percentages in Latin America per year. Countries with high homicide percentages will be shown, whereas the remaining countries will appear as others and have their respective homicide percentages added up.

Here’s an example.

Let’s suppose my data array is:

const data = [ 
  { year: '2020', country: 'Brazil', homicides: 0.60 },
  { year: '2020', country: 'Argentina', homicides: 0.10 }, 
  { year: '2020', country: 'Venezuela', homicides: 0.09 }, 
  { year: '2020', country: 'Uruguay', homicides: 0.08 }, 
  { year: '2020', country: 'Paraguay', homicides: 0.04 }, 
  { year: '2020', country: 'Bolivia', homicides: 0.03 }, 
  { year: '2020', country: 'Peru', homicides: 0.02 }, 
  { year: '2020', country: 'Chile', homicides: 0.02 }. 
  { year: '2020', country: 'Equador', homicides: 0.02 }, 
  { year: '2021', country: 'Brazil', homicides: 0.70 }, 
  { year: '2021', country: 'Venezuela', homicides: 0.10 }, 
  { year: '2021', country: 'Ecuador', homicides: 0.08 }, 
  { year: '2021', country: 'Argentina', homicides: 0.06 }, 
  { year: '2021', country: 'Paraguay', homicides: 0.02 }, 
  { year: '2021', country: 'Uruguay', homicides: 0.02 }, 
  { year: '2021', country: 'Chile', homicides: 0.01 },   
  { year: '2021', country: 'Peru', homicides: 0.01 }
];

If maxCategories = 6, the result array should be:

const aggregatedData = [
  { year: '2020', country: 'Brazil', homicides: 0.60 },
  { year: '2020', country: 'Argentina', homicides: 0.10 },
  { year: '2020', country: 'Venezuela', homicides: 0.09 },
  { year: '2020', country: 'Uruguay', homicides: 0.08 },
  { year: '2020', country: 'Paraguay', homicides: 0.04 },
  { year: '2020', country: 'others', homicides: 0.09 },
  { year: '2021', country: 'Brazil', homicides: 0.70 },
  { year: '2021', country: 'Venezuela', homicides: 0.10 },
  { year: '2021', country: 'Ecuador', homicides: 0.08 },
  { year: '2021', country: 'Argentina', homicides: 0.06 },
  { year: '2021', country: 'Paraguay', homicides: 0.02 },
  { year: '2021', country: 'others', homicides: 0.04 } 
];

I tried to use this question’s answer but the code doesn’t allow me to set the maximum number of categories.

Thank you!