Category: javascript

Category Added in a WPeMatico Campaign

Field value is getting pushed to wrong array

In a vue app form, I have two text inputs and a file input.

What I want to happen: The text inputs should go into a fieldHeader array, and the file input should go into the fieldsArray array.

What does happen: Both text fields and the file input go into both the fieldHeader and the fieldsArray. The console.log for both arrays after clicking “add field” is 0: {field: 0, name: ‘text’, desc: ‘text’, imgOne: File}. It should be fieldHeader: 0: {field: 0, name: ‘text’, desc: ‘text’} and fieldsArray: 0: {imgOne: File}

I would think the v-model would push the items into the correct arrays, but that’s not it. The think I am working through now is to restructure the v-for as that’s the only place where I can currently see the code as mixing the two array concepts.

<template>
  <div v-for="(field, i) in fieldsArray"  :key="i" >
   <q-input
      label="Name"
      v-model="fieldHeader[i].name"
      type="text"
      dense
    />
    <q-input
      v-model="fieldHeader[i].desc"
      type="textarea"
   />
    <q-file
      v-model="fieldArray[i].imgOne"
      @update:model-value="onSelected()"
    ></q-file>
 </div>
 <div @click="handleAddField">Add Field</div>
</template>


<script>
const handleAddFields = () => {
  let i = fieldsArray.value.length;

  const item = {
    field: i,
  };
  fieldHeader.value.push(item);
  fieldsArray.value.push(item);
  
};
</script>

How to remove a subdocument from a schema when a button is clicked? – Mongoose

Unable to figure this out. My project is pretty much a website with listings that you can comment on, all the comments show through EJS. Full CRUD works, except when it comes to deleting the single comment. (listings can be deleted fine) There is a delete button for each comment.The comments are embedded into the schema. I’ve been trying various methods but it is erroring out.

My listing & comment schema:

const commentSchema = new Schema({
    content: String,
},{
    timestamps: true
});

const gigSchema = new Schema({
    title: {
        type: String,
        required: true,
    },
    price: {
        type: Number,
        required: true,
    },
    description: {
        type: String,
        required: true,
    },
    comments: [commentSchema]
}, {
    timestamps: true
});

my routes:

router.post('/:id/comments', commentsCtrl.commentsGig.create);

router.delete('/:id/comments', commentsCtrl.commentsGig.destroy);

i’ve tried

const destroy = (req, res) => {
  db.Gig.findById(req.params.id, (err, gigs)=>{
    if (err) return res.send(err);
    gigs.comments[0].remove();
    gigs.save(function(err){
      res.redirect(`/gigs/${gigs._id}`)
    })
  })

and get errors, i’ve found pull methods… but my code is not working.
I get this error when trying to ‘delete’ the comment ‘Cannot DELETE /gigs/’

this is my delete button just in case

  <form class = 'secondary-content' action="/gigs/<%= gigs.comments._id %>?_method=DELETE" method="POST">
              <input type="submit" value="Delete" /></form>

any help would be appreciated!

Document reloads after clicking “cancel” button on modal

I am building a project using HTML, bootstrap CSS and Jquery.
This is my HTML 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">

    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="node_modules/bootstrap-social/bootstrap-social.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Exo&display=swap">
    <link rel="stylesheet" href="styles.css">

    <title>TimeGuard</title>
</head>

<body>
    <div id="myModal" class="modal fade" role="dialog">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-body">
                    <form>
                        <div class="form-group row">
                            <label for="name" class="col-form-label">NAME: <input id="targetname" type="text"
                                    placeholder="Enter name of target website" style="width:350px"></label>
                            <label for="url" class="col-form-label">URL: <input id="targeturl" type="text"
                                    placeholder="Enter URL of target website"
                                    style="width:350px;margin-left:15px;"></label>
                            <div class="alert alert-info" role="alert">
                                Both the input fields are mandatory
                            </div>
                            <div>
                                <button type="submit" class="btn btn-light" id="close">Cancel</button>
                                <button type="submit" class="btn btn-dark" id="submit"
                                    disabled="disabled">Submit</button>
                            </div>

                        </div>
                    </form>
                </div>
            </div>

        </div>

    </div>

    <div class="main">
        <div>
            <nav class="navbar">
                <ul class="nav nav-tabs nav-justified" id="firstul">
                    <li class="nav-item active" style="width:200px"><a class="nav-link" href="#dashboard">DASHBOARD</a>
                    </li>
                    <li class="nav-item inactive" style="width:200px;"><a class="nav-link" href="#reports">REPORTS</a>
                    </li>
                    <li class="nav-item inactive" style="width:500px;"><a class="nav-link" href="#addict">ADDICT
                            SETTINGS</a></li>
                </ul>
            </nav>
        </div>

        <div class="tab-content" style="padding:20px;">
            <div class="tab-pane fade active show" role="tab-panel" id="dashboard">
                <div>
                    <h1>OVERVIEW</h1>
                    <div class="container-fluid box">
                        <div class="row justify-content-around">
                            <div class="overview col-3">
                                <div style="font-size:79px;">
                                    00:00:00
                                </div>
                            </div>
                            <div class="overview col-3">
                                <div style="font-size:79px;">
                                    00:00:00
                                </div>
                            </div>
                        </div>
                        <div class="row justify-content-around">
                            <div class="col-3">

                            </div>
                            <div class="col-3">

                            </div>
                        </div>
                    </div>
                </div>
                <div>
                    <h1>TARGET WEBSITES</h1>
                    <div class="box container-fluid">
                        <div class="row justify-content-center">
                            <div id="tarwebs" class="col-6">
                                
                            </div>
                            <div class="row">
                                <i id="addbtn" class="fa fa-plus-circle" type="button"
                                    style="font-size:50px;margin-left:650px;margin-top:20px;"></i>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="tab-pane fade" role="tab-panel" id="reports">
                    <h1>DAILY</h1>
                    <div class="box container-fluid">
                        <div class="row justify-content-around">

                        </div>
                    </div>
                    <h1>WEEKLY</h1>
                    <div class="box container-fluid">
                        <div class="row justify-content-around">
                            <canvas id="myChart" style="width:100%;max-width:600px"></canvas>
                        </div>
                    </div>
                    <h1>MONTHLY</h1>
                    <div class="box container-fluid">
                        <div class="row justify-content-around">

                        </div>
                    </div>
                </div>

            </div>
        </div>


        <script src="node_modules/jquery/dist/jquery.slim.min.js"></script>
        <script src="node_modules/popper.js/dist/umd/popper.min.js"></script>
        <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
        <script src="dashboard.js"></script>
</body>

</html>

This is CSS code:

body{
    font-family: 'Exo', sans-serif;
}

.main{
    background-color:rgb(4, 209, 4);
    margin:30px;    
    border-radius:10px;
    padding-top: 0px;
    padding-bottom:20px;
}

.navbar{
    background-color:white;
    padding-left:0px;
    padding-right:0px;
    margin-left:auto;
    margin-right:auto;
    padding:0px;
}

.nav-link{
    color:black;
}

li{
    font-size:25px;
    text-align:center;
}

li.active{
    background-color: rgb(4, 209, 4);
    color:black;
    border:5px double;
    border-bottom:none;
}

li.inactive{
    background-color: green;
    
}

.box{
    border:1px solid rgb(92, 86, 86);
    border-radius:10px;
    padding:20px;
}

.overview{
    background-color: white;
    padding:5px;
    justify-content:center;
    border-radius:50px;
    text-align:center;
}

#tarwebs{
    background-color: rgb(128, 183, 231);
    padding:10px;
    justify-content:center;
    border-radius:50px;
}

.targets{
    background-color: white;
    height: 40px;
    border-radius:25px;
    padding:8px 30px 8px 15px;

}

.target-input{
    background-color: antiquewhite;
    border-radius:2px;
}

.fa-star:hover{
    color:rgb(241, 241, 214);
}

.select{
    color:yellow;
}

.deselect{
    color:black;
}

This is the Javascript(Jquery) code:

$(document).ready(function () {
    $("#firstul li").on("click", function () {
        $("#firstul li").removeClass("active").addClass("inactive");
        $(this).removeClass("inactive").addClass("active");
        $(".tab-pane").removeClass("active show").addClass("d-none");
        let value = this.children[0].getAttribute("href");
        $(value).addClass("active show").removeClass("d-none");
    });
    $("#addbtn").on("click", function () {
        $("#myModal").modal("show");
    });
    $("#close").on("click", function () {
        $("#myModal").modal("hide");
    });

    $("#targeturl").on("input change", function () {
        if ($("this").val() == "")
            $("#submit").prop("disabled", true);
        else
            $("#submit").prop("disabled", false);
    });


    $(".fa-star").on("click", function () {
        $(this).toggleClass("select deselect");
    });

    $("#submit").on("click", function (e) {
        e.preventDefault();
        $("#myModal").modal("hide");
        let url = $("#targeturl").val();
        let name = $("#targetname").val();
        let domain = new URL(url);
        domain = domain.hostname;
        if (name == "") {
            name = domain;
        }
        let text = `<div class="targets" style="margin-down:10px;"><img src="https://s2.googleusercontent.com/s2/favicons?domain_url=${domain}"><b style="margin-left:10px;">${name}</b><i class="fa fa-trash" style="font-size:25px;float:right;" type="button"></i><i class="fa fa-star select" style="font-size:25px;float:right;margin-right: 10px;" type="button"></i></div>`;

        document.getElementById("tarwebs").innerHTML+=text;

    })

});

My issues are:

  1. After entering the form specified in the modal and submitting it, the document is changed as expected (A div element appears as expected) . But after opening the modal again (By clicking the plus icon below), if I click “cancel” button without entering any detail , the page reloads and all the previous div elements in the document disappear. I want that the user should retain the previous div element as well as add another div element by filling the modal again.

  2. After re-opening the modal second time, the previous inputs are retained. I have to first delete those inputs before filling another.

I would be glad if someone could solve these issues.

Next.js ISR pass additional data to getStaticProps from getStaticPaths

In SingleBlogPost.jsx i have:

export async function getStaticPaths() {
  const res = await fetch("http://localhost:1337/api/posts");
  let { data } = await res.json();

  const paths = data.map((data) => ({
    params: { slug: data.attributes.slug },
  }));

  return {
    paths,
    fallback: "blocking",
  };
}

where I generate blog pages by their slug.
But then in getStaticProps I need to fetch single post by slug but I want to do it by id.

export async function getStaticProps(context) {
  console.log("context", context);

  const { slug } = context.params;

  console.log("slug is:", slug);
  const res = await fetch("http://localhost:1337/api/posts");
  const { data } = await res.json();

  return {
    props: {
      data,
    },

    revalidate: 10, // In seconds
  };
}

And I want to keep url like /blog/:slug , I dont want to include id. in url .When I already fetch all posts in getStaticPaths how I can access post id in getStaticProps to avoid fetching by slug?

Why is my useEffect not running on first render?

So I am trying to scramble a sentence or string and push the words into an array to later join them and output this scrambled sentence but for some reason the useEffect is not running on the first render even with an empty array but when I change one line and run it again it runs as intended. I was just wondering if I was doing anything wrong and how I can change it so that it does run on the first render.

const ScrambleSentence = ({sentence}) => {
    const [words, setWords] = useState([]);
    const [scrambledSentence, setScrambledSentence] = useState('');
    let scrambledWord = [];


    function scrambleWord(n){
        var text = n.split('');
        for(var i = text.length - 1; i > 0; i--){
            var j = Math.floor(Math.random() * (i + 1));
            var temp = text[i];
            text[i] = text[j];
            text [j] = temp;
        }
        return text.join('');
    }

    useEffect(() => {
        setWords(sentence.split(' '));


        words.map(word =>{
          if(word.length <= 2){
            scrambledWord.push(word);

          }
          else{
            scrambledWord.push(scrambleWord(word));
          }
        })
        setScrambledSentence(scrambledWord.join(' '));
      }, [])


      console.log(scrambledSentence);
    return (
        <div>
            <p id='scrambled-word'>{scrambledSentence}</p>
        </div>
    )
};

export default ScrambleSentence;

Possible CORS error when looping between Twilio Functions and an external php endpoint

We’re working on a looping alert system that sends an alert to our agent, then sends a request to our external PHP endpoint to sleep for an interval, then the endpoint calls our Twilio Function/Twilio Runtime Domain Endpoint again with an AJAX request to issue an alert, and loops.

Function A –> External Sleep Function (/Sleep) –> Function A

That’s the flow that we need, and we can’t get it to work. We can receive the request from Function A at /Sleep, but then can’t get it back to Function A. We can also send request from the browser to /Sleep, then receive the request back at Function A, then receive at /Sleep but still can’t get it back to Function A.

Basically, we can’t get the loop to complete. Does anyone have experience making a system like this work?

Thank you so much.

DocumentNotFoundError: No document found for query”{id:xxx}”

hello I have a discord bot and I started to do a marriage and divorce command the case is that when I try to delete the user from the db I get the error

DocumentNotFoundError: No document found for query "{ _id: new ObjectId("61ec3c66cb5991d616c6032d") }" on model "casados"

this is my model

const casados = mongoose.Schema({
    pareja1: String,
    pareja2: String
})
module.exports = mongoose.model("casados", casados)```
my code in the marry command is

look for the model

let modelo = await casados.findOne({ $or: [{pareja1: interaction.user.id}, {pareja2: interaction.user.id}]})

If it doesn’t find it, create a new one.

        pareja1: interaction.user.id,
        pareja2: pareja.id
      })
      await modelo.save()```


then on my command divorce

look for the model again

```let modelo = await casados.findOne({ $or: [{pareja1: interaction.user.id}, {pareja2: interaction.user.id}]})```

and delete it

`await casados.findOneAndDelete({
       $or: [{
       pareja1: interaction.user.id
       },
       {
       pareja2: interaction.user.id
       }
       }).catch(e=> { console.log(e)})`

Changing position relative the other tags in css

I have 3 boxes on my page. The second (red) has to be fixed position. If the height of the green box increases, it has to increase to the top side, not to the bottom. So red one’s position has to be fixed. Also if the red one’s height increases, yellow has to move forward to the bottom. How can i do that?

enter image description here

Here is my css and html code:

#div1 {position:relative;top:0;bottom:0;right:0;background:green;width:100px;height:100px;}
#div2 {width:100px;height:140px;position:absolu;bottom:0;left:0;background:red;}
#div3 {width:100px;height:100px;position:relative;top:0;right:0;background:yellow;}
<!DOCTYPE html>
<html>
<head>
<title>HTML, CSS and JavaScript demo</title>
  
</head>
<body>
<!-- Start your code here -->
  
   <div class="parent">
       <div id="div1"></div>
       <div id="div2"></div>
       <div id="div3"></div>
</div>


<!-- End your code here -->
</body>
</html>

How would I apply a fade out animation to each of the icons in my menu within a for loop

im currently working on an animation where there’s a delay between each of the icons when fading out. The fade out animation works fine, but only on the first icon and im unsure on why this is. Could some one maybe point out the mistake im making?

Javascript code:

function closeHorizontalWindow()
{
const delay = 150;

const reasons = ['btnReady', 'btnNotReady', 'btnBreak', 'btnEmail', 'btnLunch', 
'btnComfortBreak', 'btnMeeting', 'btnChat']

for (let i = 0; i < reasons.length; i++) {   
    document.getElementById(reasons[i]).style.animation = `reasonsfadeout 0.45s ease-out 
forwards ${delay}ms` 
    delay+=150       
}

CSS code:

@keyframes reasonsfadeout
{
  from{opacity: 1; }
  to {opacity: 0; } 
}

}

Thankyou

How to use multiple Full Calendar sources with different coloring based on description?

I have been building a Google Apps Script web app to display my Google Calendar events. The calendar service won’t allow an editable calendar to be used so I have been using Full Calendar to complete this task. When I use the google calendar api to import events, they all come in but they all have the same color. The coloring is essential and depends on the event description (e.g. if “specified string” is in the event description the color is yellow, otherwise grey). I then tried to import them as JSON and limited to title & start times in an array. Using some test cases I know this works, but when I try to import the events, the calendar remains blank. What am I doing wrong?

// This Does NOT Work.
var yellowEvents = [];
var greyEvents = [];
function loadEvents(importedData) {
  // importedData is coming in as 
  //     importedData = [
  //       {title: "someTitle", start: ISODateTime, end: ISODateTime, color: "someColor"}, 
  //       {title: "someTitle", start: ISODateTime, end: ISODateTime, color: "someColor"}, 
  //      ...]
  for (var k in importedData) {
    var event = importedData[k];
    if (event.color == 'yellow') {
      yellowEvents.push({ title: event.title, start: event.start, end: event.end });
    } else {
      greyEvents.push({ title: event.title, start: event.start, end: event.end });
    }
  }
}
google.script.run.withSuccessHandler(loadEvents).getCalenderEventsAsJson();
var calendar = new FullCalendar.Calendar(calendarEl, {
  eventSources: [{
    events: yellowEvents,
    color: "yellow"
  }, {
    events: greyEvents,
    color: "blue"
  },
  ]
});



// This Works.
document.addEventListener('DOMContentLoaded', function() {
  var calendar = new FullCalendar.Calendar(calendarEl, {
    eventSources: [{
        events: [
          {title: "TEST", start: new Date().toISOString()},
        ],
        color: "red"
      }, {
        events: [
          {title: "TEST", start: new Date(2022, 0, 23, 12, 30).toISOString(), end: new Date(new Date().setHours(18)).toISOString()},
        ],
        color: "blue"
     },
     ]
   });
   calendar.render();
}

From checking the options object before calendar creation through the console, I am certain the events are making it into the calendar options. The final options look like this:

{...,
  eventSources: {
    0: {color: "yellow",
        events: [
          0: {title: 'Some Person', start: '2022-01-23T16:00:00.000Z', end: '2022-01-23T18:00:00.000Z'}, 
          1: {title: 'Some OtherPerson', start: '2022-01-24T16:00:00.000Z', end: '2022-01-24T18:00:00.000Z'},
          ...
        ]
    },
    1: {color: "grey",
        events: [
          0: {title: 'Some Person', start: '2022-01-23T12:00:00.000Z', end: '2022-01-23T14:00:00.000Z'}, 
          1: {title: 'Some OtherPerson', start: '2022-01-24T12:00:00.000Z', end: '2022-01-24T14:00:00.000Z'},
          ...
        ]
    }
  },
...}

I also see them pre & post rendering in Calendar.currentData.eventSources.{SOME_NUMBER}.meta.

javascript – combine the object if the value of its field is the same

Below is the current data

  const data = [
    { id: 1, type: "call", strike: 3000, volume: 50000 },
    { id: 2, type: "call", strike: 5000, volume: 30000 },
    { id: 3, type: "call", strike: 7000, volume: 20000 },
    { id: 4, type: "put", strike: 3000, volume: 50000 },
    { id: 5, type: "put", strike: 5000, volume: 10000 },
    { id: 6, type: "put", strike: 7000, volume: 7000 }
  ]

I want to do some processing of the data based on strike, which means the object with same value in strike will be combined, so that it becomes something like

[{strike: 3000, callVolume: 50000, putVolume: 50000 },{strike: 5000, callVolume: 30000, putVolume: 10000 }, {strike: 5000, callVolume: 20000, putVolume: 7000 }]

How should I do it in javascript?

Vue 3 + Store is not defined Vuex v4.0.0

I am trying to access my store ($store) variable by importing it from the file
import store from "../store"
but it I am getting this error while console.log(store):

Uncaught ReferenceError: store is not defined
    at eval (eval at _callee$ (functions.services.js:1:1), <anonymous>:1:1)
    at _callee$ (functions.services.js?5215:46:1)
    at tryCatch (runtime.js?96cf:63:1)
    at Generator.invoke [as _invoke] (runtime.js?96cf:294:1)
    at Generator.eval [as next] (runtime.js?96cf:119:1)
    at asyncGeneratorStep (asyncToGenerator.js?1da1:3:1)
    at _next (asyncToGenerator.js?1da1:25:1)
    at eval (asyncToGenerator.js?1da1:32:1)
    at new Promise (<anonymous>)
    at eval (asyncToGenerator.js?1da1:21:1)
eval @ VM388:1
_callee$ @ functions.services.js?5215:46
tryCatch @ runtime.js?96cf:63
invoke @ runtime.js?96cf:294
eval @ runtime.js?96cf:119
asyncGeneratorStep @ asyncToGenerator.js?1da1:3
_next @ asyncToGenerator.js?1da1:25
eval @ asyncToGenerator.js?1da1:32
eval @ asyncToGenerator.js?1da1:21
eval @ functions.services.js?5215:42
fetchF @ functions.services.js?5215:42
login @ SignIn.vue?c790:92
eval @ SignIn.vue?c790:49
eval @ runtime-dom.esm-bundler.js?830f:1457
callWithErrorHandling @ runtime-core.esm-bundler.js?5c40:6737
callWithAsyncErrorHandling @ runtime-core.esm-bundler.js?5c40:6746
invoker @ runtime-dom.esm-bundler.js?830f:357

Here is the file where I am using it: “functions.services.js”

import store from "@/store"

export function fetchF(link, body, method, isTokenNeeded = true, isJSON = true) {
    return new Promise(async (resolve, reject) => {
        var access_token = getLocalStorage("access_token");
        var refresh_token = getLocalStorage("refresh_token");
        if (!(access_token == null && refresh_token == null) || isTokenNeeded == false) {
            fetch(store.serverLink + link, {
                method,
                headers: {
                    authorization: `Bearer ${access_token} ${refresh_token}`,
                    Accept: "application/json",
                    "Content-Type": "application/json",
                },
                body: JSON.stringify(body),
            }).then((response) => response[isJSON == true ? "json" : "text"]()).then(rsp => {
                setLocalStorage("access_token", rsp.access_token);
                setLocalStorage("refresh_token", rsp.refresh_token);
                resolve(rsp);
            }).catch(error => {
                setLocalStorage("access_token", "");
                setLocalStorage("refresh_token", "");
                store.dispatch("changeData", {
                    option: "alertEl",
                    value: "Please log in, and try again",
                });
                return resolve({ isSuccess: false, err: "Please log in, and try again" });
            })
        } else {
            if (!(access_token == null && refresh_token == null) && isTokenNeeded == true) {
                store.dispatch("changeData", {
                    option: "alertEl",
                    value: "Please log in, and try again",
                });
            }
            return resolve({ isSuccess: false, err: "Please log in, and try again" });
        }
    });
}

here is the store file “index.js”:

import { createStore } from 'vuex'
var isDev = true
export const store = createStore({
  state: {
    serverLink: isDev ? "http://localhost:3000" : "http://.......:3000",
    isAuth: false,
    isInitiated: false,
    alertEl: ""
  },
  mutations: {
  },
  getters: {
    getAuthStatus: state => {
      return state.isAuth
    },
    getInitiatedStatus: state => {
      return state.isInitiated
    }

  },
  setters: {

  },
  actions: {
  },
  modules: {
  }
})

I tried to use it in router.js too, for authenticating routes before entering them but the same issue happens

Why is the loop skipped when doing a loop judgment on item 0 of the array

The condition of while loop, if it’s while (results2[nextVisit]), it log nothing

function useTime(i: number, cb: (num: number) => void) {
  setTimeout(cb, 1000 * Math.round(Math.random()), i * 2);
}

const total = 10;
const results2 = new Array(total);
let nextVisit = 0;
let countTasks = 2;

for (let i = 0; i < total; i++) {
  useTime(i, (result) => {
    results2[i] = result;

    if (results2[nextVisit] !== undefined) {
      console.log(`Tasks ${countTasks}`);
      countTasks++;
      // If the while loop condition is
      // results2[nextVisit], it log nothing
      // while (results2[nextVisit]) {
      while (results2[nextVisit] !== undefined) {
        console.log(nextVisit + "->" + results2[nextVisit]);
        nextVisit++;
      }
    }
  });
}

how to navigate to the source file when debugging js in google chrome

I am using the google chrome to debugging the javascript source file, now I could debbugging the output js file, but the output js file is not human friendly readable. It looks like this:

enter image description here

from the google chrome console, I can see the call stack, and the google chrome tips shows that the source map are avaliable. But how to navigate the the js source file with current debugging line? I already type command + P in macOS but just shows the source files, I did not know which line should to navigate. the call stack only show the output js file line number.

Agrupar objeto por mes y año

Tengo el siguiente array de objetos y me gustaría agruparlos por mes, año y U_Subrubro. Intenté con reduce pero no logro hacerlo:

const reducedDocs = array.reduce((acc, curr) => {
const { ANIO, MES, U_Subrubros, Cantidad } = curr;
const [year] = ANIO,
const [month] = MES,


if (!acc[U_Subrubros]) acc[U_Subrubros] = {};
if (!acc[U_Subrubros][year]) acc[U_Subrubros][year] = {};
if (!acc[U_Subrubros][year][month]) acc[U_Subrubros][year][month] = 0;

acc[U_Subrubros][year][month] += Cantidad;

return acc;

}, {});

console.log(‘Items Cantidad’,reducedDocs);

Mi objeto es el siguiente:

[
{
    "ANIO": 2022,
    "MES": 1,
    "BPLName": "003",
    "U_Subrubros": "00000189",
    "Cantidad": 45,
    "MontoVenta": 146446.44
},
{
    "ANIO": 2019,
    "MES": 12,
    "BPLName": "003",
    "U_Subrubros": "00000611",
    "Cantidad": 14,
    "MontoVenta": 18061.96
},
{
    "ANIO": 2019,
    "MES": 12,
    "BPLName": "003",
    "U_Subrubros": "00000189",
    "Cantidad": 43,
    "MontoVenta": 67809.81
},
{
    "ANIO": 2019,
    "MES": 12,
    "BPLName": "003",
    "U_Subrubros": "00000124",
    "Cantidad": 7,
    "MontoVenta": 21404.95
},
{
    "ANIO": 2019,
    "MES": 12,
    "BPLName": "003",
    "U_Subrubros": "00000192",
    "Cantidad": 1,
    "MontoVenta": 2479.33
},
{
    "ANIO": 2019,
    "MES": 12,
    "BPLName": "003",
    "U_Subrubros": "00000200",
    "Cantidad": 3,
    "MontoVenta": 3222
},
{
    "ANIO": 2020,
    "MES": 1,
    "BPLName": "003",
    "U_Subrubros": "00000189",
    "Cantidad": 69,
    "MontoVenta": 109338.71
},
{
    "ANIO": 2020,
    "MES": 1,
    "BPLName": "003",
    "U_Subrubros": "00000200",
    "Cantidad": 48,
    "MontoVenta": 54374.69
},
{
    "ANIO": 2020,
    "MES": 1,
    "BPLName": "003",
    "U_Subrubros": "00000124",
    "Cantidad": 10,
    "MontoVenta": 32231.4
},
{
    "ANIO": 2020,
    "MES": 1,
    "BPLName": "003",
    "U_Subrubros": "00000611",
    "Cantidad": 4,
    "MontoVenta": 5041.33
},
{
    "ANIO": 2020,
    "MES": 1,
    "BPLName": "003",
    "U_Subrubros": "00000192",
    "Cantidad": 1,
    "MontoVenta": 3719.01
},
{
    "ANIO": 2020,
    "MES": 2,
    "BPLName": "003",
    "U_Subrubros": "00000189",
    "Cantidad": 49,
    "MontoVenta": 69132.12
},
{
    "ANIO": 2020,
    "MES": 2,
    "BPLName": "003",
    "U_Subrubros": "00000200",
    "Cantidad": 14,
    "MontoVenta": 16198.28
},
{
    "ANIO": 2020,
    "MES": 2,
    "BPLName": "003",
    "U_Subrubros": "00000124",
    "Cantidad": 10,
    "MontoVenta": 32231.4
},
{
    "ANIO": 2020,
    "MES": 2,
    "BPLName": "003",
    "U_Subrubros": "00000611",
    "Cantidad": 2,
    "MontoVenta": 1776.85
},
{
    "ANIO": 2020,
    "MES": 3,
    "BPLName": "003",
    "U_Subrubros": "00000189",
    "Cantidad": 47,
    "MontoVenta": 73140.37
},
{
    "ANIO": 2020,
    "MES": 3,
    "BPLName": "003",
    "U_Subrubros": "00000611",
    "Cantidad": 7,
    "MontoVenta": 5619.8
},
{
    "ANIO": 2020,
    "MES": 3,
    "BPLName": "003",
    "U_Subrubros": "00000200",
    "Cantidad": 7,
    "MontoVenta": 8099.14
},
{
    "ANIO": 2020,
    "MES": 3,
    "BPLName": "003",
    "U_Subrubros": "00000124",
    "Cantidad": 1,
    "MontoVenta": 3471.07
},
{
    "ANIO": 2020,
    "MES": 4,
    "BPLName": "003",
    "U_Subrubros": "00000189",
    "Cantidad": 6,
    "MontoVenta": 10247.94
},
{
    "ANIO": 2020,
    "MES": 4,
    "BPLName": "003",
    "U_Subrubros": "00000124",
    "Cantidad": 2,
    "MontoVenta": 6942.14
},
{
    "ANIO": 2020,
    "MES": 4,
    "BPLName": "003",
    "U_Subrubros": "00000611",
    "Cantidad": 1,
    "MontoVenta": 826.44
},
{
    "ANIO": 2020,
    "MES": 5,
    "BPLName": "003",
    "U_Subrubros": "00000189",
    "Cantidad": 24,
    "MontoVenta": 36529.07
},
{
    "ANIO": 2020,
    "MES": 5,
    "BPLName": "003",
    "U_Subrubros": "00000200",
    "Cantidad": 1,
    "MontoVenta": 1157.02
},
{
    "ANIO": 2020,
    "MES": 5,
    "BPLName": "003",
    "U_Subrubros": "00000192",
    "Cantidad": 1,
    "MontoVenta": 3057.85
},
{
    "ANIO": 2020,
    "MES": 5,
    "BPLName": "003",
    "U_Subrubros": "00000124",
    "Cantidad": 6,
    "MontoVenta": 20826.42
},
{
    "ANIO": 2020,
    "MES": 5,
    "BPLName": "003",
    "U_Subrubros": "00000611",
    "Cantidad": 4,
    "MontoVenta": 3223.12
},
{
    "ANIO": 2020,
    "MES": 6,
    "BPLName": "003",
    "U_Subrubros": "00000124",
    "Cantidad": 16,
    "MontoVenta": 56198.27
},
{
    "ANIO": 2020,
    "MES": 6,
    "BPLName": "003",
    "U_Subrubros": "00000189",
    "Cantidad": 63,
    "MontoVenta": 104214.9
},
{
    "ANIO": 2020,
    "MES": 6,
    "BPLName": "003",
    "U_Subrubros": "00000192",
    "Cantidad": 3,
    "MontoVenta": 10909.09
},
{
    "ANIO": 2020,
    "MES": 6,
    "BPLName": "003",
    "U_Subrubros": "00000611",
    "Cantidad": 5,
    "MontoVenta": 4539.65
},
{
    "ANIO": 2020,
    "MES": 7,
    "BPLName": "003",
    "U_Subrubros": "00000189",
    "Cantidad": 46,
    "MontoVenta": 89173.48
},
{
    "ANIO": 2020,
    "MES": 7,
    "BPLName": "003",
    "U_Subrubros": "00000192",
    "Cantidad": 2,
    "MontoVenta": 7603.31
},
{
    "ANIO": 2020,
    "MES": 7,
    "BPLName": "003",
    "U_Subrubros": "00000124",
    "Cantidad": 12,
    "MontoVenta": 45206.5
},
{
    "ANIO": 2020,
    "MES": 7,
    "BPLName": "003",
    "U_Subrubros": "00000611",
    "Cantidad": 15,
    "MontoVenta": 20701.84
},
{
    "ANIO": 2020,
    "MES": 8,
    "BPLName": "003",
    "U_Subrubros": "00000189",
    "Cantidad": 62,
    "MontoVenta": 128512.34
},
{
    "ANIO": 2020,
    "MES": 8,
    "BPLName": "003",
    "U_Subrubros": "00000124",
    "Cantidad": 17,
    "MontoVenta": 66867.65
},
{
    "ANIO": 2020,
    "MES": 8,
    "BPLName": "003",
    "U_Subrubros": "00000611",
    "Cantidad": 16,
    "MontoVenta": 17768.65
},
{
    "ANIO": 2020,
    "MES": 8,
    "BPLName": "003",
    "U_Subrubros": "00000192",
    "Cantidad": 1,
    "MontoVenta": 3471.08
},
{
    "ANIO": 2020,
    "MES": 9,
    "BPLName": "003",
    "U_Subrubros": "00000189",
    "Cantidad": 73,
    "MontoVenta": 152396.63
},
{
    "ANIO": 2020,
    "MES": 9,
    "BPLName": "003",
    "U_Subrubros": "00000611",
    "Cantidad": 17,
    "MontoVenta": 17355.42
},
{
    "ANIO": 2020,
    "MES": 9,
    "BPLName": "003",
    "U_Subrubros": "00000124",
    "Cantidad": 23,
    "MontoVenta": 94851.08
},
{
    "ANIO": 2020,
    "MES": 9,
    "BPLName": "003",
    "U_Subrubros": "00000192",
    "Cantidad": 1,
    "MontoVenta": 4132.23
},
{
    "ANIO": 2020,
    "MES": 10,
    "BPLName": "003",
    "U_Subrubros": "00000611",
    "Cantidad": 15,
    "MontoVenta": 15371.94
},
{
    "ANIO": 2020,
    "MES": 10,
    "BPLName": "003",
    "U_Subrubros": "00000189",
    "Cantidad": 56,
    "MontoVenta": 117768.55
},
{
    "ANIO": 2020,
    "MES": 10,
    "BPLName": "003",
    "U_Subrubros": "00000124",
    "Cantidad": 10,
    "MontoVenta": 41239.6
},
{
    "ANIO": 2020,
    "MES": 11,
    "BPLName": "003",
    "U_Subrubros": "00000189",
    "Cantidad": 41,
    "MontoVenta": 113719.2
},
{
    "ANIO": 2020,
    "MES": 11,
    "BPLName": "003",
    "U_Subrubros": "00000611",
    "Cantidad": 23,
    "MontoVenta": 37892.67
},
{
    "ANIO": 2020,
    "MES": 11,
    "BPLName": "003",
    "U_Subrubros": "00000124",
    "Cantidad": 7,
    "MontoVenta": 31363.6
},
{
    "ANIO": 2020,
    "MES": 12,
    "BPLName": "003",
    "U_Subrubros": "00000611",
    "Cantidad": 18,
    "MontoVenta": 22892.62
},
{
    "ANIO": 2020,
    "MES": 12,
    "BPLName": "003",
    "U_Subrubros": "00000189",
    "Cantidad": 40,
    "MontoVenta": 104545.66
},
{
    "ANIO": 2020,
    "MES": 12,
    "BPLName": "003",
    "U_Subrubros": "00000124",
    "Cantidad": 7,
    "MontoVenta": 37603.3
},
{
    "ANIO": 2021,
    "MES": 1,
    "BPLName": "003",
    "U_Subrubros": "00000124",
    "Cantidad": 20,
    "MontoVenta": 107438
},
{
    "ANIO": 2021,
    "MES": 1,
    "BPLName": "003",
    "U_Subrubros": "00000611",
    "Cantidad": 23,
    "MontoVenta": 36115.79
},
{
    "ANIO": 2021,
    "MES": 1,
    "BPLName": "003",
    "U_Subrubros": "00000189",
    "Cantidad": 76,
    "MontoVenta": 192314.45
},
{
    "ANIO": 2021,
    "MES": 1,
    "BPLName": "003",
    "U_Subrubros": "00000200",
    "Cantidad": 2,
    "MontoVenta": 3305.8
},
{
    "ANIO": 2021,
    "MES": 1,
    "BPLName": "003",
    "U_Subrubros": "00000121",
    "Cantidad": 1,
    "MontoVenta": 888.43
},
{
    "ANIO": 2021,
    "MES": 2,
    "BPLName": "003",
    "U_Subrubros": "00000189",
    "Cantidad": 54,
    "MontoVenta": 142975.48
},
{
    "ANIO": 2021,
    "MES": 2,
    "BPLName": "003",
    "U_Subrubros": "00000611",
    "Cantidad": 10,
    "MontoVenta": 13512.43
},
{
    "ANIO": 2021,
    "MES": 2,
    "BPLName": "003",
    "U_Subrubros": "00000124",
    "Cantidad": 14,
    "MontoVenta": 72728
},
{
    "ANIO": 2020,
    "MES": 2,
    "BPLName": "003",
    "U_Subrubros": "00000200",
    "Cantidad": 14,
    "MontoVenta": 16198.28
},
{
    "ANIO": 2021,
    "MES": 7,
    "BPLName": "003",
    "U_Subrubros": "00000189",
    "Cantidad": 49,
    "MontoVenta": 131900.91
},
{
    "ANIO": 2021,
    "MES": 5,
    "BPLName": "003",
    "U_Subrubros": "00000611",
    "Cantidad": 2,
    "MontoVenta": 2644.62
},
{
    "ANIO": 2020,
    "MES": 6,
    "BPLName": "003",
    "U_Subrubros": "00000611",
    "Cantidad": 5,
    "MontoVenta": 4539.65
},
{
    "ANIO": 2021,
    "MES": 11,
    "BPLName": "003",
    "U_Subrubros": "00000124",
    "Cantidad": 12,
    "MontoVenta": 79338.84
},
{
    "ANIO": 2020,
    "MES": 6,
    "BPLName": "003",
    "U_Subrubros": "00000192",
    "Cantidad": 3,
    "MontoVenta": 10909.09
},
{
    "ANIO": 2020,
    "MES": 2,
    "BPLName": "003",
    "U_Subrubros": "00000611",
    "Cantidad": 2,
    "MontoVenta": 1776.85
},
{
    "ANIO": 2020,
    "MES": 3,
    "BPLName": "003",
    "U_Subrubros": "00000611",
    "Cantidad": 7,
    "MontoVenta": 5619.8
},
{
    "ANIO": 2021,
    "MES": 10,
    "BPLName": "003",
    "U_Subrubros": "00000192",
    "Cantidad": 1,
    "MontoVenta": 3305.79
},
{
    "ANIO": 2021,
    "MES": 10,
    "BPLName": "003",
    "U_Subrubros": "00000200",
    "Cantidad": 5,
    "MontoVenta": 8428.56
},
{
    "ANIO": 2020,
    "MES": 8,
    "BPLName": "003",
    "U_Subrubros": "00000124",
    "Cantidad": 17,
    "MontoVenta": 66867.65
},
{
    "ANIO": 2020,
    "MES": 9,
    "BPLName": "003",
    "U_Subrubros": "00000124",
    "Cantidad": 23,
    "MontoVenta": 94851.08
},
{
    "ANIO": 2020,
    "MES": 9,
    "BPLName": "003",
    "U_Subrubros": "00000192",
    "Cantidad": 1,
    "MontoVenta": 4132.23
},
{
    "ANIO": 2020,
    "MES": 10,
    "BPLName": "003",
    "U_Subrubros": "00000124",
    "Cantidad": 10,
    "MontoVenta": 41239.6
},
{
    "ANIO": 2020,
    "MES": 3,
    "BPLName": "003",
    "U_Subrubros": "00000200",
    "Cantidad": 7,
    "MontoVenta": 8099.14
},
{
    "ANIO": 2021,
    "MES": 4,
    "BPLName": "003",
    "U_Subrubros": "00000121",
    "Cantidad": 1,
    "MontoVenta": 3719.01
},
{
    "ANIO": 2020,
    "MES": 5,
    "BPLName": "003",
    "U_Subrubros": "00000124",
    "Cantidad": 6,
    "MontoVenta": 20826.42
},
{
    "ANIO": 2020,
    "MES": 4,
    "BPLName": "003",
    "U_Subrubros": "00000124",
    "Cantidad": 2,
    "MontoVenta": 6942.14
},
{
    "ANIO": 2020,
    "MES": 5,
    "BPLName": "003",
    "U_Subrubros": "00000200",
    "Cantidad": 1,
    "MontoVenta": 1157.02
},
{
    "ANIO": 2020,
    "MES": 11,
    "BPLName": "003",
    "U_Subrubros": "00000124",
    "Cantidad": 7,
    "MontoVenta": 31363.6
},
{
    "ANIO": 2021,
    "MES": 2,
    "BPLName": "003",
    "U_Subrubros": "00000200",
    "Cantidad": 2,
    "MontoVenta": 3305.8
},
{
    "ANIO": 2020,
    "MES": 1,
    "BPLName": "003",
    "U_Subrubros": "00000192",
    "Cantidad": 1,
    "MontoVenta": 3719.01
},
{
    "ANIO": 2021,
    "MES": 9,
    "BPLName": "003",
    "U_Subrubros": "00000200",
    "Cantidad": 3,
    "MontoVenta": 4958.68
},
{
    "ANIO": 2020,
    "MES": 8,
    "BPLName": "003",
    "U_Subrubros": "00000192",
    "Cantidad": 1,
    "MontoVenta": 3471.08
},
{
    "ANIO": 2021,
    "MES": 1,
    "BPLName": "003",
    "U_Subrubros": "00000200",
    "Cantidad": 2,
    "MontoVenta": 3305.8
},
{
    "ANIO": 2020,
    "MES": 3,
    "BPLName": "003",
    "U_Subrubros": "00000124",
    "Cantidad": 1,
    "MontoVenta": 3471.07
},
{
    "ANIO": 2021,
    "MES": 1,
    "BPLName": "003",
    "U_Subrubros": "00000121",
    "Cantidad": 1,
    "MontoVenta": 888.43
},
{
    "ANIO": 2020,
    "MES": 4,
    "BPLName": "003",
    "U_Subrubros": "00000611",
    "Cantidad": 1,
    "MontoVenta": 826.44
},
{
    "ANIO": 2021,
    "MES": 4,
    "BPLName": "003",
    "U_Subrubros": "00000192",
    "Cantidad": 1,
    "MontoVenta": 3719.01
},
{
    "ANIO": 2021,
    "MES": 11,
    "BPLName": "003",
    "U_Subrubros": "00000200",
    "Cantidad": 8,
    "MontoVenta": 13387.23
},
{
    "ANIO": 2022,
    "MES": 1,
    "BPLName": "003",
    "U_Subrubros": "00000124",
    "Cantidad": 5,
    "MontoVenta": 33057.85
},
{
    "ANIO": 2021,
    "MES": 12,
    "BPLName": "003",
    "U_Subrubros": "00000200",
    "Cantidad": 3,
    "MontoVenta": 4958.67
},
{
    "ANIO": 2021,
    "MES": 12,
    "BPLName": "003",
    "U_Subrubros": "00000124",
    "Cantidad": 8,
    "MontoVenta": 52892.56
},
{
    "ANIO": 2021,
    "MES": 2,
    "BPLName": "003",
    "U_Subrubros": "00000121",
    "Cantidad": -1,
    "MontoVenta": -888.43
}

]

Como podría hacer para agrupar por ANIO, MES y U_Subrubros? Estoy seguro que es con reduce pero no se como