Category: javascript

I’m trying to get the price of a crypto coin using bitquery gql. I’m a total beginer.

I have a query that is working, and a node server.

My js code is in app.js and when i run node app.js, i get: { data: { ethereum: { dexTrades: [Array] } } } i don’t know what this means… Is my information inside of that array, or is it just not working properly? How do i go about getting just the “quotePrice” part of my query into a variable?

This is my query that works on graphql.bitquery.io/ide :

{
  ethereum(network: bsc) {
    dexTrades(
      options: {limit: 1, asc: "timeInterval.minute"}
      date: {since: "2020-11-01"}
      exchangeName: {in: ["Pancake", "Pancake v2"]}
      baseCurrency: {is: "0x860947ae09058cc028aaf2ac75258060c61f2dfd"}
      quoteCurrency: {is: "0xbb4cdb9cbd36b01bd1cbaebf2de08d9173bc095c"}
    ) {
      timeInterval {
        minute(count: 5)
      }
      baseCurrency {
        symbol
        address
      }
      baseAmount
      quoteCurrency {
        symbol
        address
      }
      quoteAmount
      trades: count
      quotePrice
      maximum_price: quotePrice(calculate: maximum)
      minimum_price: quotePrice(calculate: minimum)
      open_price: minimum(of: block, get: quote_price)
      close_price: maximum(of: block, get: quote_price)
    }
  }
}

Here is my app.js file:

import fetch from "node-fetch";

const query = `
  {
  ethereum(network: bsc) {
    dexTrades(
      options: {limit: 1, asc: "timeInterval.minute"}
      date: {since: "2020-11-01"}
      exchangeName: {in: ["Pancake", "Pancake v2"]}
      baseCurrency: {is: "0x860947ae09058cc028aaf2ac75258060c61f2dfd"}
      quoteCurrency: {is: "0xbb4cdb9cbd36b01bd1cbaebf2de08d9173bc095c"}
    ) {
      timeInterval {
        minute(count: 5)
      }
      baseCurrency {
        symbol
        address
      }
      baseAmount
      quoteCurrency {
        symbol
        address
      }
      quoteAmount
      trades: count
      quotePrice
      maximum_price: quotePrice(calculate: maximum)
      minimum_price: quotePrice(calculate: minimum)
      open_price: minimum(of: block, get: quote_price)
      close_price: maximum(of: block, get: quote_price)
    }
  }
}

`;
const url = "https://graphql.bitquery.io/";
const opts = {
    method: "POST",
    headers: {
        "Content-Type": "application/json",
      "X-API-KEY": " my bitquery api key "
    },
    body: JSON.stringify({
        query
    })
};
fetch(url, opts)
    .then(res => res.json())
    .then(console.log)
    .catch(console.error);

Is there a way I can get all the getters results on the instance without specific invoking?
I want to get all class getters as simple members on the class by looping on the class member.

I have a class like this:

export class Test {
  constructor() {}

  get foo() {
    return 1
  }

  get bar() {
    return 2
  }
}

The use is create a new instance: const test = new Test()

Is there a way I can get all the getters as simple class variable members and not as functions? so I can pass the object from server to client.

Thanks!

I’m in custom module for Drupal, and i need to use JWT in javascript.

So i tried npm i jsonwebtoken and import jwt from "../node_modules/jsonwebtoken/index.js"; on my js/index.js

But i have the following error : Uncaught SyntaxError: The requested module '../node_modules/jsonwebtoken/index.js' does not provide an export named 'default'

I dont understand what to do and how i can load my library jsonwebtoken.

Sorry i’m really a beginner in javascript.

If possible, I would like javascript to first get an element by an ID that is placed into a table. Then add/place said element into the inline style (width=”XX%”) of a different div.

Note: I do not have control over the ID’s output. Just know that said value will determine the width of the percentage bar.

getelementbyid:
<span id=”per-girls“>95

place element into inline css:

         $(function(){
             $("#dTable").dataTable({
                 "columns": [
                         {
                             "title":"Languages"
                         },
                         {
                             "title":"Votes",
                             "render": function(data, type, row, meta){
                                 return parseInt(row[1], 10) + parseInt(row[2], 10) + parseInt(row[3], 10)
                             }
                         },
                         {
                             "visible":false
                         },
                         {
                             "title": "Positive/Neutral/Negative",
                             "sortable":false,
                             "render": function(data, type, row, meta){
                                 return $("<div></div>", {
                                     "class": "bar-chart-bar"
                                 }).append(function(){
                                     var bars = [];
                                     for(var i = 1; i < Object.keys(row).length; i++){
                                         bars.push($("<div></div>",{
                                             "class": "bar " + "bar" + i
                                         }).css({
                                             "width": row[i] + "%"
                                         }))
                                     }
                                     return bars;
                                 }).prop("outerHTML")
                             }
                         }
                 ]
             });
         });

         .bar-chart-bar {
         background-color: #e8e8e8; 
         display: block; 
         position:relative; 
         width: 100%; 
         height: 40px;
         }
         .bar {
         position: absolute;
         float: left; 
         height: 100%; 
         }
         .bar1 {
         background-color: #007398;
         z-index: 40;
         }
         .bar2 {
         background-color: #00b0b9;
         width: 100%; 
         z-index: 20;
         }

      <div class="col-sm-12">
         <table id="dTable" cellspacing="0" width="100%" role="grid" aria-describedby="dTable_info">
            <tbody>
               <tr role="row">
                  <td style="width: 20%;"> % of girl gamers</td>
                  </td>
                  <td style="width: 10%;"> <span id="per-girls">95</span>% </td>
                  <td>
                     <div class="bar-chart-bar bar-girl">
                        <div class="bar bar1" style="width: 20%;"></div>
                        <div class="bar bar2"></div>
                     </div>
                  </td>
               </tr>
               <tr role="row">
                  <td> % of boy gamers</td>
                  </td>
                  <td><span id="per-boy">57</span>% </td>
                  <td>
                     <div class="bar-chart-bar bar-boy">
                        <div class="bar bar1" style="width: ;"></div>
                        <div class="bar bar2"></div>
                     </div>
                  </td>
               </tr>
            </tbody>
         </table>
      </div>

Here is a snippet of my code:

const CategoryPage = () => {
    const { category } = useParams();
    const [loading, setLoading]=useState(true);
    const [loading2, setLoading2]=useState(true);
    const [categoryinfo, setCategoryinfo]=useState("")
    const [categoryname, setCategoryname]=useState("")

    useEffect(() => {

      const showjokes = ({category}) => {
    
    try {
    fetch(`https://fakeurl.herokuapp.com/categorypage/${category}/`, {
    method: "GET",
    mode: "cors",
    headers: {
    "Content-Type": "application/json",
    },
    })
    .then(res => res.json())

    .then(data => {
        console.log('chisora', JSON.parse(data.jokes))
        setLoading2(false)
        const categoryjokes = JSON.parse(data.jokes)
        console.log("categoryjokes", categoryjokes)
        setCategoryinfo(categoryjokes)
        console.log(JSON.parse(data.jokes), "<==== here is data")
        getcatname({category})
    })
    } catch (error) {
    console.log("update, error time!", error);
    return false;
    }
    };
      showjokes({category})


      const getcatname = ({category}) => {
    
    try {
    fetch(`https://fakeurl.herokuapp.com/getcatname/${category}/`, {
    method: "GET",
    mode: "cors",
    headers: {
    "Content-Type": "application/json",
    },
    })
    .then(res2 => res2.json())

    .then(data2 => {
        console.log('parker', JSON.parse(data2.categoryname))
        const categorynombre = JSON.parse(data2.categoryname)
        console.log("categorynombre", categorynombre.category)
        setCategoryname(categorynombre.category)
        setLoading(false)
        //console.log(JSON.parse(data.categoryname), "<==== here is data")
    })
    } catch (error) {
    console.log("update, error time!", error);
    return false;
    }
    };



    },[]);

    console.log("checking loading",loading, loading2)
    //console.log("the stuff",categoryinfo[0].joke_category)
    const stuff = categoryinfo
    console.log('stuff', stuff)
    console.log('categoryname', categoryname)
    if ( loading2 || loading ) return <p>loading</p>

    return (
    <IonPage>
        <h1>{categoryname} jokes</h1>
                        <IonGrid className={ styles.bottomContainer }>
                    <IonRow>
                        <IonCol size="12" className="ion-padding-start">
                            <IonCardSubtitle className={ styles.heading }>
                                {categoryname} jokes
                            </IonCardSubtitle>
                        </IonCol>
                    </IonRow>

As you can see there are two functions in the useEffect. One to get an array of joke data and the other to get the name of the category the joke is in.

This is my error message:

Error: Objects are not valid as a React child (found: object with keys {joke, joke_name, joke_owner, joke_category, id}). If you meant to render a collection of children, use an array instead.

And it points to setLoading(false) within the getcatname function. The object that is referred to in the error is referring to the object that I get from the showjokes function.

The console.logs right before I check the two loading hooks log the data just perfectly. In other words, the functions in the useEffect do their job as far as the end product is concerned.

There is a lot I don’t understand here. What is the “React child” that is being referred to? When I look around for solutions it seems to come up in render functions, but my error is simply pointing to the setLoading hook part. Why am I getting an error that seems to be referencing what is going on in another function but the error is within the other function?

I am trying to configure a geospatial index for performant intersect querying on an Ignite Cache. I am able to set the field as queryable, and have set the index using the recommended syntax .setIndexes(new QueryIndex("columnName").

However, when I perform an “EXPLAIN SELECT” SqlFieldsQuery on the cache I am seeing .__SCAN instead of the indexed column. I believe this means it is scanning the entire cache instead of using the index, but could not find documentation on this.

'SELECTn' +
    '    "__Z0"."EXAMPLESTRING" AS "__C0_0",n' +
    '    "__Z0"."EXAMPLESPATIAL" AS "__C0_1"n' +
    'FROM "mySpatialGeometryCache"."EXTENDEDPOINT" "__Z0"n' +
    '    /* mySpatialGeometryCache.EXTENDEDPOINT.__SCAN_ */n' +
    'WHERE INTERSECTS("__Z0"."EXAMPLESPATIAL", ?1)'

Here is the queryEntity I have configured:

new QueryEntity()
      .setValueTypeName("ExtendedPoint")
      .setFields([
        new QueryField("exampleString", "java.lang.String"),
        new QueryField("exampleSpatial", "java.lang.String"),
      ])
      .setIndexes(new QueryIndex("exampleSpatial"))
  );

I am not getting any errors or console warnings, and I am able to query the exampleSpatial field just fine, but I want to ensure that an index is being used so that it performs best when the cache is at a higher volume.

I’m trying to pan-zoom with the mouse a <div> that contains a PDF document.
I’m using PDF.js and panzoom libraries (but other working alternatives are welcome)

The snippet below basically does this task, but unfortunately, after the <div> is panzoomed, the PDF is not re-rendered, then its image gets blurry (pan the PDF with the mouse and zoom it with the mouse-wheel):

HTML

<script src="https://mozilla.github.io/pdf.js/build/pdf.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@panzoom/[email protected]/dist/panzoom.min.js"></script>

<div id="panzoom-container">
  <canvas id="the-canvas"></canvas>
</div>

<style>
#the-canvas {
  border: 1px solid black;
  direction: ltr;
}
</style>

JAVASCRIPT

// Loaded via <script> tag, create shortcut to access PDF.js exports.
var pdfjsLib = window['pdfjs-dist/build/pdf'];
// The workerSrc property shall be specified.
pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://mozilla.github.io/pdf.js/build/pdf.worker.js';

var pdfDoc = null,
    canvas = document.getElementById('the-canvas'),
    ctx = canvas.getContext('2d');

var container = document.getElementById("panzoom-container")

function renderPage(desiredHeight) {
  pdfDoc.getPage(1).then(function(page) {
    var viewport = page.getViewport({ scale: 1, });
    var scale = desiredHeight / viewport.height;
    var scaledViewport = page.getViewport({ scale: scale, });
    canvas.height = scaledViewport.height;
    canvas.width = scaledViewport.width;
    // Render PDF page into canvas context
    var renderContext = {
      canvasContext: ctx,
      viewport: scaledViewport
    };
    page.render(renderContext);
  });
}

// Get the PDF
var url = 'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf';
pdfjsLib.getDocument(url).promise.then(function(pdfDoc_) {
pdfDoc = pdfDoc_;
  // Initial/first page rendering
  renderPage(250);
});

var panzoom = Panzoom(container, {
  setTransform: (container, { scale, x, y }) => {
    // here I can re-render the page, but I don't know how
    // renderPage(container.getBoundingClientRect().height);
    panzoom.setStyle('transform', `scale(${scale}) translate(${x}px, ${y}px)`)
  }
})

container.addEventListener('wheel', zoomWithWheel)

function zoomWithWheel(event) {
  panzoom.zoomWithWheel(event)
}

https://jsfiddle.net/9rkh7o0e/5/

I think that the procedure is correct, but unfortunately I’m stuck into two issues that must be fixed (then I ask for your help):

1. I don’t know how to re-render correctly the PDF after the panzoom happened.
2. consecutive renderings have to be queued in order to make this work properly (so that the PDF doesn’t blink when panzooming)
   How could I fix 1 and 2 ? I could not find any tool for doing that on a PDF, apart the panzoom lib.

Thanks

I’m trying to add a button to be able to delete posts from a log. For some reason, the delete button I’ve made only works for the top entry. Can anyone tell what I’m doing wrong?

(The X button itself is added in the script as well, because I intend on making it only accessible from a backend later)

<script>
            $(function(){

                $('.entry').each(function() {
                    $(this).children('#date').after('<span id="X" class="button">X</span>');
                });
                $("#X").click(function() {
                    $(this).parent('.entry').remove();
                });
            });
        </script>
        <script src="js/filename.js"></script>
    </head>
    <body >
        <div class="posts">
            <div class="entry" id = "4" style="white-space: normal">
            <span id="date">１２．１７．２０２１</span>
            <hr>
                post 4
            </div>
        
            <div class="entry" id = "3" style="white-space: normal">
            <span id="date">１２．１７．２０２１</span>
            <hr>
                post 3
            </div>
            
            <div class="entry" id = "2" style="white-space: normal">
            <span id="date">１２．１７．２０２１</span>
            <hr>
                post 2
            </div>
            
            <div class="entry" id = "1" style="white-space: normal">
            <span id="date">０８．０７．２０２１</span>
            <hr>
                post 1
            </div>
        </div>
        
        </br>
    </body>

Here’s a live version of the page with CSS intact if that helps: https://s-miranda.github.io/log.html

buffer = m.quoted ? m.quoted : m;
if (!/image/gi.test(buffer.m)) return reply(`Reply Gambar dengan caption ${prefix + command}`);
bufferImage = await buffer.download();
upload = await __uploader.default(bufferImage);
buff = await getBuffer(`https://api.lolhuman.xyz/api/creator1/wanted?img=${upload}&apikey=Yadi-apikey`);
filType = await fromBuffer(buff);
if (filType == undefined) {
  reply(Bug);
} else {
  reply(Waiting);
  sendImage(from, buff)
}
break;

I am in my final steps of placing my react application on the internet, everything works perfect on my localhost. Only when it is online, my application will not render and in the console I get this error.

Uncaught TypeError: Object(...) is not a function
    y AuthProvider.js:64
    React 12
    80 index.js:8
    u (index):1
    t (index):1
    r (index):1
    <anonymous> main.9b7fd734.chunk.js:1
AuthProvider.js:64:36
    y AuthProvider.js:64
    React 12
    80 index.js:8
    u (index):1
    t (index):1
    r (index):1
    <anonymous> main.9b7fd734.chunk.js:1

What I see is that this error tells me that there is al fault in my setSession-function, but I can not find it.

import { createContext, useState, useMemo, useEffect } from "react";
import { useCallback, useContext } from "react/cjs/react.development";
import config from '../config.json';
import * as usersApi from '../api/users';
import * as api from "../api";

const JWT_TOKEN_KEY = config.token_key;
const AuthContext = createContext();

function parseJwt(token) {
    if (!token) return {};
    const base64url = token.split('.')[1];
    const payload = Buffer.from(base64url, 'base64');
    const jsonPayload = payload.toString('ascii');
    return JSON.parse(jsonPayload);
}

function parseExp(exp) {
    if (!exp) return null;
    if (typeof(exp) !== 'number') exp = Number(exp);
    if(isNaN(exp)) return null;
    return new Date(exp * 1000);

}

const useAuth = () => useContext(AuthContext);

export const useSession = () => {
    const { loading, error, token, user, ready, hasRole } = useAuth();
    return { loading, 
        error, 
        token, 
        user, 
        ready,
        isAuthed: Boolean(token),
        hasRole,
    };
}

export const useLogin = () => {
    const { login } = useAuth();
    return login;
}

export const useLogout = () => {
    const { logout } = useAuth();
    return logout;
}

export const useRegister = () => {
    const { register } = useAuth();
    return register;
}

export const AuthProvider = ({
    children
}) => {
    const [ready, setReady] = useState(false);
    const [loading, setLoading] = useState(false);
    const [error, setError] = useState('');
    const [token, setToken] = useState(localStorage.getItem(JWT_TOKEN_KEY));
    const [user, setUser] = useState(null);

    const setSession = useCallback(async (token, user) => {
        const { exp, userId } = parseJwt(token);
        const expiry = parseExp(exp);
        const stillValid = expiry >= new Date();
    
        if (stillValid) {
          localStorage.setItem(JWT_TOKEN_KEY, token);
        } else {
          localStorage.removeItem(JWT_TOKEN_KEY);
          token = null;
        }
    
        api.setAuthToken(token);
        setToken(token);
        setReady(token && stillValid);
    
        if (!user && stillValid) {
          user = await usersApi.getById(userId);
        }
        setUser(user);
      }, []);

    useEffect(() => {
        setSession(token, null);
    }, [setSession, token]);

    const login = useCallback( async (email, password) => {
        try {
            setError('');
            setLoading(true);
            const {token, user} = await usersApi.login(email, password);
            await setSession(token, user);
            return true;
        } catch (error) {
            setError(error);
            return false;
        } finally {
            setLoading(false);
        }
    }, [setSession]);

    const logout = useCallback(() => {
        setSession(null, null);
    }, [setSession]);

    const register = useCallback( async ({name, email, password}) => {
        try {
            setError('');
            setLoading(true);
            const {token, user} = await usersApi.register({name, email, password});
            await setSession(token, user);
            return true;
        } catch (error) {
            setError(error);
            return false;
        } finally {
            setLoading(false);
        }
    }, [setSession]);

    const hasRole = useCallback((role) => {
        if (!user) return false;
        return user.roles.includes(role);
    }, [user])

    const value = useMemo(() => ({
        loading, 
        error,
        token,
        user,
        ready,
        login,
        logout,
        register,
        hasRole,
    }), [loading, error, token, user, ready, login, logout, register, hasRole]);

    return(
        <AuthContext.Provider value={value}>
            {children}
        </AuthContext.Provider>
    );
};

I don not think this matters, but the backend I wrote is running on heroku.

I am gradually rewriting an application with React to TypeScript into ReScript.
I’ve already implemented few components in ReScript, but this is the first one, where I use ReactDOM.Style.t as property to my component.

Here is my minimized component code:

@genType
@react.component
let make = (~sx: option<ReactDOM.Style.t>=?) => {
  <div></div>
}

ReScript compiles fine (except a warning that sx is not used, but we can ignore it).

I have the following bs.js generated, which seems to be fine:

// Generated by ReScript, PLEASE EDIT WITH CARE

import * as React from "react";

function InhypedIcon(Props) {
  return React.createElement("div", undefined);
}

var make = InhypedIcon;

export {
  make ,

}
/* react Not a pure module */

And the following corresponding .gen.tsx file, which causes the problem:

/* TypeScript file generated from InhypedIcon.res by genType. */
/* eslint-disable import/first */


import * as React from 'react';

// @ts-ignore: Implicit any on import
import * as InhypedIconBS__Es6Import from './InhypedIcon.bs';
const InhypedIconBS: any = InhypedIconBS__Es6Import;

import type {Style_t as ReactDOM_Style_t} from '@rescript/react/src/ReactDOM.gen';

// tslint:disable-next-line:interface-over-type-literal
export type Props = { readonly sx?: ReactDOM_Style_t };

export const make: React.ComponentType<{ readonly sx?: ReactDOM_Style_t }> = InhypedIconBS.make;

This does not compile, I am getting TypeScript error:

TypeScript error in /app/src/icons/InhypedIcon.gen.tsx(11,48):
Cannot find module '@rescript/react/src/ReactDOM.gen' or its corresponding type declarations.  TS2307

     9 | const InhypedIconBS: any = InhypedIconBS__Es6Import;
    10 |
  > 11 | import type {Style_t as ReactDOM_Style_t} from '@rescript/react/src/ReactDOM.gen';
       |                                                ^
    12 |
    13 | // tslint:disable-next-line:interface-over-type-literal
    14 | export type Props = { readonly sx?: ReactDOM_Style_t };

I do understand, that TS can not find rescript/react/src/ReactDOM.gen, however I am not really know why.
Any ideas how this can be fixed?

My package versions:

node: v16.6.2

"typescript": "^4.1.2"
"rescript": "^9.1.4"
"@rescript/react": "^0.10.3"

Thank you.

This is my command:

//comando button test
    if(prefix&&comando === 'button'){
        const embMessage = new discord.MessageEmbed()
        .setTitle('Teste de botões')
        .setDescription('Esse é um teste de botões')

        const yes = new MessageButton()
        .setStyle('green')
        .setLabel('Sim')
        .setID('smart')

        const no = new MessageButton()
        .setStyle('red')
        .setLabel('Não')
        .setID('dumbass')

        message.channel.send({embeds:[embMessage], buttons:[yes, no]})
    }

But I’m having this issue:

class sendAPICallback extends dAPIMessage {
                              ^

TypeError: Class extends value undefined is not a constructor or null

In that case, I can’t run the bot code. 🙁

"discord-buttons": "^4.0.0"

How do I set multiple variables to the returned values of a function in javascript?
This method does not work, names is undefined.

function data() {
    var names = ["logan", "harry", "josh", "harris", "jacob"]
    var nameFind = "harris"
    return names, nameFind
}

names, nameFind = data()

I’m getting this error with a plain vanilla javascript app that will be deployed to firebase. My images are not displaying inside the questionImageElement. I’ve been searching online but have not had any luck finding an answer for my particular situation. Here is the error stacktrace:

Here are the pertinent files:

            function showQuestion(questions) {
                console.log("Inside showQuestion")
                questionCount++
                console.log("questionCount: ", questionCount)
                console.log("selectedQuestions.length: ", selectedQuestions.length)
                progressText.innerText = `Question ${questionCount} of ${selectedQuestions.length}`
                progressBarFull.classList.remove('hide')
                progressBarFull.style.width = `${(questionCount / selectedQuestions.length) * 100}%`
                const img1 = document.createElement('img1')
                img1.src = "../images/loop_question1.png"
                const img2 = document.createElement('img2')
                img2.src = "../images/circle_question1.png"
                const img3 = document.createElement('img3')
                img3.src = "../images/variables_question1.png"
                // Display the current shuffled question
                questionElement.innerText = questions.question

                // Insert an image at the appropriate question index.
                if (questions.id === 10) {
                    console.log("inside question 10 img1")
                    questionImageElement.appendChild(img1)
                }
                if(questions.id === 11) {
                    console.log("inside question 11 img2")
                    questionImageElement.appendChild(img2)
                }
                if(questions.id === 15) {
                    console.log("inside question 15 img1")
                    questionImageElement.appendChild(img3)
                }
                
            }

            //sample question format:

             {
                    id: 10,
                    question: ' The following loop draws 3 circles on the screen. If I wanted to alter this loop to draw 10 circles, ' +
                        'how many lines would my code be? ',

                    answers: [
                        {text: ' 1 line ', correct: false},
                        {text: ' 3 lines', correct: true},
                        {text: '10 lines', correct: false},
                        {text: ' None of the above ', correct: false}

                    ]
                },
                
                
                
            //index.html

            <!doctype html>
            <html lang="en">
            <head>
              <meta name="viewport" content="width=device-width">
              <link href="styles.css" rel="stylesheet">
              <script type="module" src="bundle.js"></script>-->
              <title>Quiz App</title>
            </head>

            <body class="correct">
            <div class="container">
              <div id="game" class="justify-center flex-column"></div>
              <div id="hud">
                <div class="hud-item">
                  <p id="progressText" class="hud-prefix">

                  </p>
                  <div id="progressBar">
                    <div id="progressBarFull" class="hide"></div>
                  </div>
                </div>
                <div class="hud-item">
                  <p class="hud-prefix">
                    Score
                  </p>
                  <h1 class="hud-main-text" id="score">
                    0
                  </h1>
                </div>
              </div>
              <div id="question-container" class="hide"></div>
              <div id="question">Question</div>
              <div id="question-image" class="imgBox"></div>
              <div id="answer-buttons" class="btn-grid">
                <button class="btn"></button>
                <button class="btn"></button>
                <button class="btn"></button>
                <button class="btn"></button>
              </div>
              <div class="controls">
                <button id="start-btn" class="start-btn btn">Start</button>
                <button id="next-btn" class="next-btn btn hide">Next</button>
              </div>
            </div>
            <script type="module" src=">bundle.js"></script>
            </body>
            </html>


            //webpack.config
            const path = require('path')

            module.exports = {
                mode: 'development',
                entry: '/public/index.js',
                output: {
                    path: path.resolve(__dirname, 'dist'),
                    filename: 'bundle.js'
                },
                watch: true
            }

            //package.json
            {
              "hosting": {
                "public": "public"
              },
              "name": "quiz_app3",
              "version": "1.0.0",
              "main": "bundle.js",
              "scripts": {
                "test": "echo "Error: no test specified" && exit 1",
                "build": "webpack",
                "dev": "webpack serve"
              },
              "dependencies": {
                "express": "^4.17.1",
                "firebase": "^9.6.1"
              },
              "devDependencies": {
                "webpack": "^5.65.0",
                "webpack-cli": "^4.9.1"
              },
              "keywords": [],
              "author": "Joseph Brown",
              "license": "ISC",
              "description": "Quiz_App version 3"
            }

Thanks in advance.

I am using the tty-table plugin to print a table in my console application

The actual result of table contains many columns with somes contains “0” as a data , see example below

I would like to hide columns that have 0 as data for all the rows.
Result should be:

In my code each row is an array, so the result of rows is an array of arrays : example

[
["Samsung S20",0,"Germany",0],
["Iphone 13",0,"England",0],
["Samsung A71",0,"US",0],
["SOne",0,"UK",0],
]

Can you help me to have something like this :

[
["Samsung S20","Germany"],
["Iphone 13","England"],
["Samsung A71","US"],
["SOne","UK"],
]

Important: The header of table is an array of objects :

[{value:"Product"} , {value:"Stock"} ,{value:"Country"} ,{value:"Price"} }

the appearance of columns depends on their existing on the header array