Category: javascript

So I am trying to edit one field in an embed.
The fetched embed looks like this:

MessageEmbed {
  type: 'rich',
  title: null,
  description: null,
  url: null,
  color: 5763719,
  timestamp: null,
  fields: [
    { name: 'Suggestie', value: 'test1', inline: false },
    { name: 'Status', value: 'Open', inline: true },
    { name: 'ID', value: 'SPogb', inline: true },
    { name: 'User ID', value: '291272018773671937', inline: true },
    {
      name: 'Opmerking van staff:',
      value: 'Geen opmerking',
      inline: false
    }
  ],
  thumbnail: null,
  image: null,
  video: null,
  author: {
    name: 'Nigel#7777',
    url: undefined,
    iconURL: 'https://cdn.discordapp.com/avatars/291272018773671937/b2637472f4502b2b2280b6302d3f666c.webp',
    proxyIconURL: 'https://images-ext-1.discordapp.net/external/I_MfeMd6YbK_NxsY_kG-k7P6hiytpXx3tNk9ZJdd9lg/https/cdn.discordapp.com/avatars/291272018773671937/b2637472f4502b2b2280b6302d3f666c.webp'
  },
  provider: null,
  footer: null
}

I am trying to edit the Status field value from Open to Approved, but I have no idea how to achieve this. I currently have:

const kanaal = interaction.guild.channels.cache.get(config.kanalen.suggestieKanaal)
        const ID = interaction.options.getString('id');
        let correcteSuggest;
        kanaal.messages.fetch({limit: 50}).then(messages => {
            const botMessages = messages.filter(msg => msg.author.bot);
            botMessages.forEach(msg => {
                if(msg.embeds[0].fields[2].value === interaction.options.getString('id')) {
                    correcteSuggest = msg;
                }
            })
            console.log(correcteSuggest.embeds[0].fields)
            // correcteSuggest.edit(embeds[0].fields[1] = ({name: "Status", value: "Approved", inline: true}))
            // const editedEmbed = new Discord.MessageEmbed(correcteSuggest.embeds[0]).fields[3]



        })

The commented stuff I tried but did not seem to work. I have seen other people get the embed and do like .setDescription, but I don’t know how that would work with .setField since there are more then one fields.

I’ve created a d3 Map which works fine in a standalone html file – locally and on a live website but now it’s been added into a work-in-progress theme, it stops when it hits the d3.json line.

d3 is working as the initial SVG and divs are created properly, but the actions within the d3.json function are now not running (though nothing I can see has changed). The same wordpress template file renamed .html and opened locally still works fine (php ignored).

Is there any reason why this d3 visualisation is failing? Here’s the start of the d3.json..

// build the globe
d3.json("https://unpkg.com/[email protected]/world/110m.json", (error, world) => {
    if (error) { 
        console.log("%cMap d3.json error:", "color: red; font-weight: bold;");
        throw error;
    };
    // draw the land using TOPOJSON package
    var land = topojson.feature(world, world.objects.land);

    // d3 flat map projection
    var projection = d3.geoMercator()
        .scale(339)
        .translate( [width / 2, height / 1.45]);

    // create projection of flat earth
    var path = d3.geoPath()
                .projection(projection);

    // draw countries
    var earth = g.append("path")
        .datum(land)
        .attr("d", path)
        .style("fill", "#4b4f53");

I’m not able to share the wordpress as it’s not live, but here is the working map: https://mikechalmers.co.uk/map/ and here is the version on worpress (with styling and php / ACF parts removed for brevity)

<div id="map"></div>

<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/topojson.v2.min.js"></script>

<script>

document.addEventListener('DOMContentLoaded', function() {

// d3 world map by Mike Chalmers https://mikechalmers.co.uk 2022

// margin calculations
const width = 1440,
    height = 1440;
let viewBox = "0 0 " + height + " " + width;

// add an SVG to the body and a g group
var svg = d3.select("#map").append("svg")
    .attr("viewBox", viewBox)
    .classed("svg-content", true);
var g = svg.append("g");

// add a div for the hover popups
var officePop = d3.select("#map").append("div")
    .attr("class", "office-popup")
    .style("opacity", 0)
var officePopImage = officePop.append("img")
    .attr("class", "office-popup-image")
    .attr("src", "https://placeimg.com/640/480/arch")
var officePopTitle = officePop.append("div")
    .attr("class", "office-popup-title")
    .text("City")

// build the globe
d3.json("https://unpkg.com/[email protected]/world/110m.json", (error, world) => {
    // draw the land using TOPOJSON package
    var land = topojson.feature(world, world.objects.land);

    // d3 flat map projection
    var projection = d3.geoMercator()
        .scale(339)
        .translate( [width / 2, height / 1.45]);

    // create projection of flat earth
    var path = d3.geoPath()
                .projection(projection);

    // draw countries
    var earth = g.append("path")
        .datum(land)
        .attr("d", path)
        .style("fill", "#4b4f53");

    // list of locations - reverse the lat / long numbers as Google present them!
    var locale = [
        [31.2273214, 30.0352233, "Cairo", "https://placeimg.com/501/501/arc", "http://act.is"], // Cairo
        [18.0942349,-33.9142626, "Cape Town", "https://placeimg.com/620/580/arc", "http://act.is"], // Cape Town
        [76.812386, 28.6466758, "Delhi", "https://placeimg.com/440/480/arc", "http://act.is"], // Delhi
        [54.9468679, 25.0757582, "Dubai", "https://placeimg.com/640/444/arc", "http://act.is"], // Dubai
        [113.9872706, 22.3526629, "Hong Kong", "https://placeimg.com/500/500/arc", "http://act.is"], // Hong Kong
        [27.9698125, -26.1715045, "Johannesburg", "https://placeimg.com/600/380/arc", "http://act.is"], // Johannesburg
        [3.3983055, 6.4628925, "Lagos", "https://placeimg.com/390/380/arc", "http://act.is"], // Lagos
        [-0.2420245, 51.5285578, "London", "https://placeimg.com/620/422/arc", "http://act.is"], // London
        [5.5715358, 49.8139418, "Luxembourg", "https://placeimg.com/633/430/arc", "http://act.is"], // Luxembourg
        [39.7423519, -20.2030759, "Mauritius", "https://placeimg.com/700/780/arc", "http://act.is"], // Mauritius
        [-99.2840423, 19.3906797, "Mexico City", "https://placeimg.com/440/484/arc", "http://act.is"], // Mexico City
        [72.7407565, 19.0821976, "Mumbai", "https://placeimg.com/646/505/arc", "http://act.is"], // Mumbai
        [36.7069666, -1.303205, "Nairobi", "https://placeimg.com/666/666/arc", "http://act.is"], // Nairobi
        [-74.2605525, 40.6971478, "New York", "https://placeimg.com/680/440/arc", "http://act.is"], // New York
        [-46.8761786, -23.6821592, "Sao Paulo", "https://placeimg.com/555/444/arc", "http://act.is"], // Sao Paulo
        [126.8491222, 37.5650168, "Seoul", "https://placeimg.com/777/777/arc", "http://act.is"], // Seoul
        [120.9149227, 31.2231278, "Shanghai", "https://placeimg.com/555/555/arc", "http://act.is"], // Shanghai
        [103.7038198, 1.3139961, "Singapore", "https://placeimg.com/645/580/arc", "http://act.is"], // Singapore
    ];

    // preload images
    // for (let i = 0; i < locale.length; i++) {
    //     new Image().src = locale[i][3];
    //     console.log("Image pre-loaded: " + locale[i][3]);
    // }

    // draw circles at locale locations
    g.selectAll("rect")
    .data(locale).enter()
    .append("a")
    .attr("xlink:href", function (d) { return (d[4]); })
    .append("rect")
    .attr("x", function (d) { return (projection(d)[0] - 14); })
    .attr("y", function (d) { return (projection(d)[1] - 14); })
    .attr("data-city", function (d) { return (d)[2]; })
    .attr("width", "28px")
    .attr("height", "28px")
    .attr("transform", function (d) { 
        let rotate = 45;
        let x = projection(d)[0];
        let y = projection(d)[1];
        let transform = "rotate (" + rotate + " " + x + " " + y + ")"
        return transform;
        })
    .attr("fill", "#fc511f")
    // hover effects
    .on('mouseover', function (d, i) {
        let city = d[2];
        let image = d[3];
        // dot bounce
        d3.select(this).transition()
            .duration('1000')
            .ease(d3.easeElastic) 
            .attr("width", "50px")
            .attr("height", "50px")
            .attr("x", function (d) { return (projection(d)[0] - 25); })
            .attr("y", function (d) { return (projection(d)[1] - 25); })
        // popup appear
        officePop.transition()
            .duration('150')
            .style("opacity", 1);
        // console.log(this);
        officePop
            .style("left", (d3.event.pageX - 70) + "px")
            .style("top", (d3.event.pageY - 170) + "px");
        officePopImage
            // .attr("src", image);
        officePopTitle
            .html("<span>" + city + "</span>" + "<span style='font-family: serif; font-size: 12px;'>&#9658;</span>");
    })
    .on('mouseout', function (d, i) {
        // dot shrink
        d3.select(this).transition()
            .duration('100')
            .attr("width", "28px")
            .attr("height", "28px")
            .attr("x", function (d) { return (projection(d)[0] - 14); })
            .attr("y", function (d) { return (projection(d)[1] - 14); })
        // popup disappear
        officePop
            .style("left", "-140px")
            .style("top", "0px");
        officePop.transition()
            .duration('100')
            .style("opacity", 0);
    })
  });
});

Thanks for any help!

i want to show image slider , the images from api so i want show two image by two with time interval like post slider but with 2 image .
that’s my code

HTML AND CSS CODE :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            padding: 0 150px;
        }
        .container {
            display: flex;
            justify-content: space-between;
        }

        .container img {
            height: 500px;
            width: 400px;
        }
    </style>
</head>
<body>
    </div>
    <script src="mainTest.js"></script>
</body>
</html>

Javascript code :

const url = 'http://localhost:3000/slider' ;
const containerG = document.querySelector('body') ; 
const container = document.querySelectorAll('.container') ; 

const nextSlideDelat = 3000;
let curentImageCounter = 0 ; 

let out = '' ; 
fetch(url)
.then(res =>res.json())
.then(data => {
    for(pic in data){
        out += `
        <div class="container">
            <div class="resultEnfant">
                <img src="${data[pic].photoEnfant}" alt="">
            </div>
            <div class="resultParent">
                <img src="${data[pic].photoPere}" alt="">
            </div>
        </div>
        ` ;
    };

    containerG.innerHTML = out ;

    container[curentImageCounter].style.display = "block"; 
    setInterval(nextContainer,nextSlideDelat);

    function nextContainer() {
        container[curentImageCounter].style.display = "none"; 
        curentImageCounter = (curentImageCounter =1)  % container.length ;  
        container[curentImageCounter].style.display = "block"; 
    }

})

when i run the code the result is all the image displayed and i got Console error :

mainTest.js:28 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'style')
    at mainTest.js:28:35

I need to remove ‘http://’ or ‘https://’ from a string if it exists, and also any trailing slashes at the end of a string.

So, with a string like ‘https://yourdomain.com//////’, it should return yourdomain.com.

Currently I have the following two regex patterns separately, but I don’t know how to combine them.

url.replace(/^https?:///, '');

url.replace(//+$/, '');

const Product = () => {

const router = useRouter()


useEffect(() => {
 
    setParam({
        key:router.query.key,
        url:router?.query?.url || 'sheet',
    })
    getComment()
    ProductColor()
    getProd()
    getQuestion()
}, []);


const [prod, setProd] = useState({});
const [loading, setLoading] = useState(false);
const [param, setParam] = useState({key:'' , url:'sheet'});
const [question, setQuestion] = useState([]);
const [productcolor , setProductColor] = useState([]);
const [comment , setComment] = useState([]);
const [sort , setSort] = useState('new'); 
const [sortt , setSortt] = useState('new');
const [limit , setLimit] = useState(10);
const [limitt , setLimitt] = useState(10);
const [lm , setLm] = useState(false);
const [ld , setLd] = useState(false);


async function getProd(){
    setLoading(true)
    await axios.get(`${baseUrl()}/products/one/${param.url}/${param?.key || router?.query?.key}`)
    .then(res => {
    console.log(res);
        setLoading(true)
        if(!res?.data?.code && res.data.Product){
            setProd(res.data.Product)
        }
    })
    .catch(err => {
        setLoading(false)
        console.log(err);
        setProd(null)
    })
} 


async function getQuestion(s=sortt ,v=limitt){
    setLoading(true)
    setLd(true)


    await axios.get(`${baseUrl()}/products-q-a/${param.url}/${param?.key || router?.query?.key}?offset=0&limit=${v}&sort=${s}`)
    .then(res => {
       localStorage.setItem('key', 'url');
        setLoading(false)
        if(!res?.data?.code && res.data){
            //TODO
            setQuestion(res.data)
            setLd(false)
        }
    })
    .catch(err => {
        setLoading(false)
        console.log(err);
        setQuestion([])
    })
} 

If you can, please answer my questionIf you can, please answer my questionIf you can, please answer my questionIf you can, please answer my questionIf you can, please answer my questionIf you can, please answer my questionIf you can, please answer my questionIf you can, please answer my questionIf you can, please answer my questionIf you can, please answer my questionIf you can, please answer my questionIf you can, please answer my questionIf you can, please answer my questionIf you can, please answer my questionIf you can, please answer my questionIf you can, please answer my questionIf you can, please answer my questionIf you can, please answer my questionIf you can, please answer my questionIf you can, please answer my questionIf you can, please answer my questionIf you can, please answer my questionIf you can, please answer my questionIf you can, please answer my questionIf you can, please answer my questionIf you can, please answer my questionIf you can, please answer my questionIf you can, please answer my questionIf you can, please answer my questionIf you can, please answer my questionIf you can, please answer my questionIf you can, please answer my questionIf you can, please answer my questionIf you can, please answer my questionIf you can, please answer my questionIf you can, please answer my questionIf you can, please answer my questionIf you can, please answer my questionIf you can, please answer my questionIf you can, please answer my questionIf you can, please answer my questionIf you can, please answer my questionIf you can, please answer my questionIf you can, please answer my questionIf you can, please answer my questionIf you can, please answer my questionIf you can, please answer my questionIf you can, please answer my questionIf you can, please answer my questionIf you can, please answer my questionIf you can, please answer my question

  var today = moment().format("MMM D, YYYY");
  var lastDate = moment(today).add(10, 'days').format("MMM D, YYYY");

I want to list all the days between these 2 dates.

Just like this
Feb 20, 2022
Feb 21, 2022
Feb 22, 2022
Feb 23, 2022
Feb 24, 2022
Feb 25, 2022
Feb 26, 2022
Feb 27, 2022
Feb 28, 2022
Feb 29, 2022

how to make autoslide for this function with setinterval please help me with this question

$(document).ready(function() {
    const next = document.querySelector(".next"),
    back = document.querySelector(".back"),
    slideshow = document.querySelector(".slideshow__images");
  let angle = 0;

  next.addEventListener("click", () => {
    angle -= 45;
    slideshow.style.transform = `translateZ(-25rem) rotateY(${angle}deg)`;
  });

  back.addEventListener("click", () => {
    angle += 45;
    slideshow.style.transform = `translateZ(-25rem) rotateY(${angle}deg)`;
  });
});

I am sending form to backend by using FormData and using multer on backend to recieve the data, it works fine on my web app but on doing the same axios call to submit data in react-native shows that data fields are being received on backend in following form

{ _parts: [ [ 'firstname', 'fahad' ], [ 'firstname', 'RAO' ] ] }

i am doing following call in my web app (which works there) and in my expo app

const testFOrmData = ()=>{
        
        var data = new FormData()
        data.append("firstname","fahad")
        data.append("firstnae","RAO")
        const adata  = {
            firsn:"rew"
        }
axios.post("http://192.168.10.8:3309/api/testform",data)
.then((res)=>{
    console.log(res)
})
alert("SANS")
    }

How to receive it in object form such that i dont have to make changes in my existing code in backend as i have so many forms and i have submitted them using form data in my web app and have to do same in mobile app but i dont want to submit without FormData(by sending object in axios)

my backend

router.post("/testform",upload.none(),(req,res)=>{
    console.log(req.body)
    res.json({resp:req.body})
})

I am really struggling with this:
What I am trying to do is create an array that is stored in chrome.sync with the url of unique pages a user visits. Adding the url to the array works fine – what I am struggling with is how to check if that url already exists in the array. This is what I have currently:

function getURL(array) {
    chrome.tabs.query({active: true, lastFocusedWindow: true, currentWindow: true}, tabs => {
        let tabUrl = tabs[0].url;
        addArr(tabUrl, array);
    });
}

function addArr(tabUrl, array) {
    array.map((x) => {
        let urlCheck = x.url;
        console.log(urlCheck);
        if(urlCheck != tabUrl) {
           array.push(tabUrl);
           chrome.storage.sync.set({data: array}, function() {
               console.log("added")
           });
        }
    })
}

The annoying thing I can’t work out is that it works when I remove anything to do with the the map and only keep the:

           array.push(tabUrl);
           chrome.storage.sync.set({data: array}, function() {
               console.log("added")
           });

This makes even less sense because when I inspect the array by inspecting the popup and then looking at console, there is no error only an empty data array. The error that it gives me, however, when I inspect the popup (actually right click on extension) is

Error handling response: TypeError: Cannot read properties of
undefined (reading ‘url’) at
chrome-extension://jkhpfndgmiimdbmjbajgdnmgembbkmgf/getURL.js:31:30

That getURL.js line 31? That is part of the code that gets the active tab. i.e

let tabUrl = tabs[0].url;

which isn’t even in the same function.

Any ideas? I am totally stumped.

I’m hosted a static html file on netlify here is the url…
https://laughing-lewin-eb42f8.netlify.app/

I’m successfully download the images when I trying to open it it show that it appears that we don’t support this file format

I didn’t understand why it’s happening and can anyone tell me please how can I fix this issue.

Based on the following code and description here:

Add Bullets to Each New Line within a textarea

const bullet = "u002a";
const bulletWithSpace = `${bullet} `;
const enter = 13;


const handleInput = (event) => {
    const { keyCode, target } = event;
    const { selectionStart, value } = target;

    if (keyCode === enter) {
        //console.log('debug');
        target.value = [...value]
            .map((c, i) => i === selectionStart - 1
                ? `n${bulletWithSpace}`
                : c
            )
            .join('');
        //console.log(target.value);

        target.selectionStart = selectionStart+bulletWithSpace.length;
        target.selectionEnd = selectionStart+bulletWithSpace.length;
    }

    if (value[0] !== bullet) {
        target.value = `${bulletWithSpace}${value}`;
    }
}

How can this be modified to work in the opposite way?

Instead of adding the target to the first position of each new line. Change the target position to the end.

Note: I replaced the bullet unicode to * for testing

Original code does this:

* text
* new line

Changing the code to do instead:

text *  
new line *  

* = bullet in my example code

when I run the command to build the react project:

yarn build

show error:

➜  react-admin git:(master) ✗ yarn build
yarn run v1.22.17
$ webpack --mode production --config config/webpack.build.config.js
assets by status 1.48 KiB [cached] 1 asset
./src/index.js 39 bytes [built] [code generated] [1 error]

ERROR in ./src/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error [ERR_MODULE_NOT_FOUND]: Cannot find package '@babel/plugin-preset-react' imported from /Users/xiaoqiangjiang/source/reddwarf/frontend/react-admin/babel-virtual-resolve-base.js
    at new NodeError (/Users/xiaoqiangjiang/source/reddwarf/frontend/react-admin/node_modules/@babel/core/lib/vendor/import-meta-resolve.js:2552:5)
    at packageResolve (/Users/xiaoqiangjiang/source/reddwarf/frontend/react-admin/node_modules/@babel/core/lib/vendor/import-meta-resolve.js:3208:9)
    at moduleResolve (/Users/xiaoqiangjiang/source/reddwarf/frontend/react-admin/node_modules/@babel/core/lib/vendor/import-meta-resolve.js:3242:18)
    at defaultResolve (/Users/xiaoqiangjiang/source/reddwarf/frontend/react-admin/node_modules/@babel/core/lib/vendor/import-meta-resolve.js:3281:13)
    at /Users/xiaoqiangjiang/source/reddwarf/frontend/react-admin/node_modules/@babel/core/lib/vendor/import-meta-resolve.js:3304:14
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (/Users/xiaoqiangjiang/source/reddwarf/frontend/react-admin/node_modules/@babel/core/lib/vendor/import-meta-resolve.js:63:103)
    at _next (/Users/xiaoqiangjiang/source/reddwarf/frontend/react-admin/node_modules/@babel/core/lib/vendor/import-meta-resolve.js:65:194)
    at /Users/xiaoqiangjiang/source/reddwarf/frontend/react-admin/node_modules/@babel/core/lib/vendor/import-meta-resolve.js:65:364
    at new Promise (<anonymous>)

I have tried to delete the node_modules folder and reinstall but did not work. this is the package.json about babel:

    "@babel/core": "^7.17.5",
    "@babel/preset-react": "^7.16.7",
    "@fingerprintjs/fingerprintjs": "^3.3.2",
    "@svgr/webpack": "4.3.3",
    "@typescript-eslint/eslint-plugin": "^2.10.0",
    "@typescript-eslint/parser": "^2.10.0",
    "animate.css": "^3.7.2",
    "antd": "^4.17.4",
    "axios": "^0.19.0",
    "babel-eslint": "10.1.0",
    "babel-jest": "^24.9.0",
    "babel-loader": "^8.2.3",
    "babel-plugin-named-asset-import": "^0.3.6",
    "babel-preset-react-app": "^9.1.2",

why did this error happen? what should I do to fix this problem?

I am trying to return a file for a user to download when they click a download button on the page. The trick is I am downloading the file from an internal URL service. I have it set up as follows

The Download controller a function I call to return the File()

    public class DownloadController : ControllerBase
    {
        public FileResult DownloadFile(string url)
        {
            WebClient internalDownload = new WebClient();
            byte[] bytes = internalDownload.DownloadData(url);

            return File(bytes, "application/octet-stream", "test" + ".txt");
        }
    }

The API Controller this is what the JS calls

    public class TickController : ApiController
    {
        [Route("api/Tick/Download")]
        [HttpPost]
        public async Task<IActionResult> Download([FromBody] string ID)
        {

            string url = await GetFile("D00023974");
            DownloadController downloader = new DownloadController();

            return downloader.DownloadFile(url);

            

        }
    }

The Javascript I have for testing purposes at the moment

The API Manager Javascript which sends the request to the above Controller:

export class ApiCall {
    static post(controller: string, action: string, data: any, qString?: string) {
        var url = '/api/' + controller;
        if (action != null)
            url += '/' + action;
        if (querystring != null)
            url += "?" + qString;
        return $.ajax({
            url: url,
            data:JSON.stringify(data),
            method: 'POST',
            dataType: 'json',
            contentType: 'application/json; charset=utf-8',
        });
    }
}

And the current test call and checking if its returning anything

async downloadAttach(ID: any) {
        window.open(await WebApiManager.post('Incident', 'Download', ID));
}

The above returns an object as follows:

[[Prototype]]     Object
ContentType       application/octet-stream
FileContents      //Filled with Base64
FileDownloadName  test.txt
_proto_           Object

However I’m not sure how to initiate the download on the client side of the returned file. Any help would be greatly appreciated.

I am trying to create a cascading dropdown using Vuejs.
I want to set the data on the second dropdown based on the Item chosen from the first dropdown.
I don’t know how filter the data based on the chosen item
I’ve tried to use computed but didn’t succeed.
I need some help please.
Thanks in advanced.

<template>
  <b-container class="my-2">
    <b-row>
      <b-col col="12" md="6" lg="3">
        <b-form-group id="fieldset" :label="$t('tradingCalculators.fields.currencyPair')" label-for="currency-first" label-size="lg">
              <v-select
                id="assetPair"
                @click="changeAssetClass(assetPair)"
                v-model="assetPair"
                :searchable="true"
                :options="assetSymbols"
              />
            </b-form-group>
          </b-col>
          <b-col cols="12" md="6" lg="3">
            <b-form-group id="fieldset-1"               :label="$t('tradingCalculators.fields.currencyPair')" label-for="currency-pair" label-size="lg">
              <v-select id="symbolsPair" v-model="symbolsPair" :searchable="true" :options="currencyArray" />
            </b-form-group>
      </b-col>
    </b-row>
  </b-container>
</template>

export default {
data() {
assetPair: ‘Forex’,
symbolsPair: ”,
currencyArray: [],
assetsSymbols: [{
text: ‘Forex’,
id: 1
},
{
text: ‘Metal’,
id: 2
},
{
text: ‘Indices’,
id: 3
},
],
symbolsPair: {
1: [{
text: ‘AUDCAD’,
id: 1,
},
{
text: ‘AUDCHF’,
id: 2,
},
{
text: ‘AUDJPY’,
id: 3,
},
],
2: [{
text: ‘XAUUSD’,
id: 1,
},
{
text: ‘XAGUSD’,
id: 2,
},
],
3: [{
text: ‘GER30Cash’,
id: 1,
},
{
text: ‘US30Cash’,
id: 2,
},
{
text: ‘EU50Cash’,
id: 3,
},
],
}
},
computed() {
changeAssetClass(e) {
return this.currencyArray.push(this.symbolsPair[e])
}
}
}

I have attached three different variables to window Object. But why devTools show same retained size for them?

  let a = 23;

  let b = {
    'a': 1,
    'b': 2,
    'c': 3
  };

  let c = () => {
    console.log('I am a simple function')
  };
  
  Window.myNnum = a;
  Window.myObj = b;
  Window.myFunc = c;

Result: They all have 20 Bytes in Retained-Size and Shallow-Size, as below picture: