I want to set a loading state whenever the page is fetching the firestore data .
I am using this :
const [isLoading, setIsLoading] = React.useState(true)

const fetchGames=async()=>{
    let promises = []
    const dataDB = await db.collection('event')
    const eventsFromDb = []
    const DB =await db.collection('event').get()
    DB.docs.forEach((item,index)=>{
      const promise = dataDB
      eventsFromDb[index]= item.data()
      promises.push(promise);
     })
     setEvents(eventsFromDb)
     Promise.all(promises)
     .then(setIsLoading(false));
    }
useEffect(()=>
    {
      fetchGames()
      if(!isLoading)
      {
        console.log("HEY")
      }

    }, [])

I cannot get the HEY in my console , how to fix this ?

I have a div called a-text-box. And i want to display an arrow after a section. I have 4 sections. Section = 2 words. But when i set a width for my a-text-box, the arrow disappears.I dont really know how to fix that. The arrow it’s supposed to be displayed after ‘Jonathan’.

JSX:

  return (
    <Transitions>
      <div className={styles.about}>
        <h1>Who am I?</h1>
        <div className={styles["a-container"]}>
          <Undraw1 class={styles.svg} />
          <div className={styles["a-text__box"]}>
            <Element text="Name" text2="Jonathan" />
            <BsFillArrowRightCircleFill className={styles.arrow} />
            <Element text="Age" text2="18" />
            <Element text="Nationality" text2="Brazilian" />
            <Element text="Experience" text2="Junior" />
          </div>
        </div>
        <Btn name="Details" class={styles.btn} />
      </div>
    </Transitions>
  );

CSS:

@media (max-width: 992px) {
  .a-container {
    width:90%;
    .svg{
      transform:scale(0.8);
    }
    .a-text__box {
     width:40%;
      display: flex;
      background-color: var(--primary-color);
      border-radius: 27px;
      align-items: center;
      overflow: scroll;

      div {
        margin-inline: 20%;
        align-items:center;
        font-size: 2rem;
        display: flex;
        flex-direction: column;

        .arrowRight {
          display: none;
        }
        .space {
          display: none;
        }
      }

      .arrow {
        display: block;
      }
    }
  }
}

I’m new to React and I’m trying to make a route to keep the user logged in after registering, so that I can use their user details to populate fields in the homepage. I first tried doing this the way I used to before I started learning react, by saving the data in res.locals, but this doesn’t seem to work in react. Now I’m trying to do it with local storage. First, I send a post request when the user submits a form:

    onSubmit(e) {
        e.preventDefault();

        const newUser = {
            userName: this.state.userName,
            userEmail: this.state.userEmail,
            userPassword: this.state.userPassword,       
        }
        console.log(newUser);

        axios.post('http://localhost:5000/user/signup', newUser)
            .then(res => localStorage.setItem("CurrentTeacher", (res.data));                     
            console.log(localStorage.getItem("CurrentUser"));
        }

The post request works fine and the user is added to my DB with no issues, but localStorage.getitem line always returns undefined. Below is my post request in my userRoute.js file (I’m using Passport to register my user):

router.route('/signup').post(async (req, res) => {
    const username = req.body.userName;
    const userEmail = req.body.userEmail;
    const password = req.body.userPassword;
    try{
       const newUser = new User({userEmail,username});
  
       const registeredUser = await User.register(newUser,password);
       req.login(registeredUser,err=>{ 
          if(err) console.log(err);      
          console.log("NEW USER: " + req.user)     
       })
    } catch(e){
        console.log(e.message)
    }
  });

I’ve tried several different things, like adding JSON.stringify to my res.data. Infact, it doesn’t even look like my .then code is firing because when I run a simple console.log with .then, I get nothing.

My page is displaying user data, which he can edit.
I’m working with views, on a small project. I want to do form validation with regex, but nothing happens. Exemple, When I write an email that does not respect the syntax of a regex no message is displayed.
When the regex is valid the validation message also does not appear.

<script>
import UsersDataService from "../Service/UsersDataService";
import VueJwtDecode from "vue-jwt-decode";
export default {
  name: "ProfilConnect",
  data() {
    return {
      user: {},
      firstname: "",
      lastname: "",
      email: "",
    };
  },

  watch: {
    email(email) {
      this.email = email;
      this.validateEmail(email);
    },
  },

  methods: {
    validateEmail(email) {
      //**** Regex pour l'email***/
      if (
        /^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:.[a-zA-Z0-9-]+)*$/.test(
          email
        )
      ) {
        //******Message d'alerte******/
        this.msg["email"] = "Valid";
      } else {
        this.msg["email"] = "Email no valid";
      }
    },
    updateProfil() {
      let data = {
        firstname: this.user.firstname,
        lastname: this.user.lastname,
        email: this.user.email,
      };
      UsersDataService.putUser(data);
      this.$store
        .dispatch("logout")
        .then((response) => {
          this.user.email = this.email;
          this.$router.push("/login");
          console.log("Data: ", response.data);
        })
        .catch((error) => {
          console.error("Something went wrong!", error);
        });
    },
  
  },

  mounted() {
    this.getProfilUser();
    this.email = "";
  },
};
</script>
                    
            

  <form class="background-style">
                      <div class="form-group">
                        <label class="form-label">Prénom</label>
                        <input
                          type="text"
                          class="form-control"
                          :value="user.firstname"
                        />
                      </div>
                      <div class="form-group">
                        <label class="form-label">Nom</label>
                        <input
                          type="text"
                          class="form-control"
                          :value="user.lastname"
                        />
                      </div>

                      <div class="form-group">
                        <label for="email" class="form-label">Email</label>

                        <input
                          type="email"
                          class="form-control"
                          :value="user.email"
                        />
                      </div>

                      <div class="btn rounded p-1">
                       

                        <button
                          class="rounded p-2"
                          @click.prevent="updateProfil"
                        >
                          Update
                        </button>
                      </div>
                    </form>

I want to see if the index of the array item is even, if it is then it should carry out a block of code;

var num = 122345643345673;
var convNum = num.toString();
var aftertoString = convNum.split(" ");
function luhnsAlg() {
for (let i = 0; i < aftertoString.length; i++) {
    if (aftertoString[i] == 2) {
        console.log("wow");
    }else{
        console.log("ohh");
    }
  }
}

Syntax Error

I am using an API to get contacts from a CRM based on tags. I am using POSTMAN for now to test the api but getting syntax error. I am assuming the documentation has the syntax error as I am copy/pasting but can’t see the issue.

Here is the link to the documentation: https://github.com/agilecrm/rest-api#121-get-contacts-by-dynamic-filter

Here is a screenshot of my response via POSTMAN.

My headers are:
Accept: application/json
Content-Type: application/x-www-form-urlencoded

Can anyone see something here that would be causing a syntax error in my POST request?

Help in understanding below line:
return { …acc, [firstLetter]: […(acc[firstLetter] || []), cur] };

// Write a function that takes an array of strings as argument
// Group those strings by their first letter
// Return an object that contains properties with keys representing first letters
// The values should be arrays of strings containing only the corresponding strings
// For example, the array [‘Alf’, ‘Alice’, ‘Ben’] should be transformed to
// { a: [‘Alf’, ‘Alice’], b: [‘Ben’]}

function myFunction(arr) {
  return arr.reduce((acc, cur) => {
  const firstLetter = cur.toLowerCase().charAt(0);
  return { ...acc, [firstLetter]: [...(acc[firstLetter] || []), 
  cur] };
  }, {});
  }

Test Cases:

myFunction([‘Alf’, ‘Alice’, ‘Ben’])
Expected { a: [‘Alf’, ‘Alice’], b: [‘Ben’]}

myFunction([‘Ant’, ‘Bear’, ‘Bird’])
Expected { a: [‘Ant’], b: [‘Bear’, ‘Bird’]}

myFunction([‘Berlin’, ‘Paris’, ‘Prague’])
Expected { b: [‘Berlin’], p: [‘Paris’, ‘Prague’]}

I’m trying to do a for loop in a array like this:

 a0C7X0000056xmxUAA: {
   attributes: {
     type: 'GRD__c',
     url: '/services/data/v53.0/sobjects/GRD__c/a0C7X0000056xmxUAA'
   },
   Id: 'a0C7X0000056xmxUAA',
   Name: 'Lote-6155066',
   Guia__c: [ a0Y7X000006RUHxUAO: [Object], a0Y7X000006RUI2UAO: [Object] ]
 },
 a0C7X0000056x9EUAQ: {
   attributes: {
     type: 'GRD__c',
     url: '/services/data/v53.0/sobjects/GRD__c/a0C7X0000056x9EUAQ'
   },
   Id: 'a0C7X0000056x9EUAQ',
   Name: 'Lote-6155065',
   Guia__c: []
 },
 a0C7X0000056x99UAA: {
   attributes: {
     type: 'GRD__c',
     url: '/services/data/v53.0/sobjects/GRD__c/a0C7X0000056x99UAA'
   },
   Id: 'a0C7X0000056x99UAA',
   Name: 'Lote-6155064',
   Guia__c: [
     a0Y7X000006RSSvUAO: [Object],
     a0Y7X000006RST0UAO: [Object],
     a0Y7X000006RST1UAO: [Object]
   ]
 },
 a0C7X0000056x8YUAQ: {
   attributes: {
     type: 'GRD__c',
     url: '/services/data/v53.0/sobjects/GRD__c/a0C7X0000056x8YUAQ'
   },
   Id: 'a0C7X0000056x8YUAQ',
   Name: 'Lote-6155063',
   Guia__c: [ a0Y7X000006RSR9UAO: [Object], a0Y7X000006RSREUA4: [Object] ]
 },
 a0C7X0000056wmxUAA: {
   attributes: {
     type: 'GRD__c',
     url: '/services/data/v53.0/sobjects/GRD__c/a0C7X0000056wmxUAA'
   },
   Id: 'a0C7X0000056wmxUAA',
   Name: 'Lote-6155062',
   Guia__c: [ a0Y7X000006RSR4UAO: [Object] ]
 },
 a0C7X0000056wmsUAA: {
   attributes: {
     type: 'GRD__c',
     url: '/services/data/v53.0/sobjects/GRD__c/a0C7X0000056wmsUAA'
   },
   Id: 'a0C7X0000056wmsUAA',
   Name: 'Lote-6155061',
   Guia__c: [ a0Y7X000006RSQzUAO: [Object] ]
 },
 a0C7X0000056wmnUAA: {
   attributes: {
     type: 'GRD__c',
     url: '/services/data/v53.0/sobjects/GRD__c/a0C7X0000056wmnUAA'
   },
   Id: 'a0C7X0000056wmnUAA',
   Name: 'Lote-6155060',
   Guia__c: [ a0Y7X000006RSQpUAO: [Object], a0Y7X000006RSQuUAO: [Object] ]
 },
 a0C7X0000056wmYUAQ: {
   attributes: {
     type: 'GRD__c',
     url: '/services/data/v53.0/sobjects/GRD__c/a0C7X0000056wmYUAQ'
   },
   Id: 'a0C7X0000056wmYUAQ',
   Name: 'Lote-6155059',
   Guia__c: [ a0Y7X000006RSQLUA4: [Object], a0Y7X000006RSQQUA4: [Object] ]
 },
 a0C7X0000056wmTUAQ: {
   attributes: {
     type: 'GRD__c',
     url: '/services/data/v53.0/sobjects/GRD__c/a0C7X0000056wmTUAQ'
   },
   Id: 'a0C7X0000056wmTUAQ',
   Name: 'Lote-6155058',
   Guia__c: [
     a0Y7X000006RSQGUA4: [Object],
     a0Y7X000006RSQVUA4: [Object],
     a0Y7X000006RSQaUAO: [Object],
     a0Y7X000006RSQfUAO: [Object],
     a0Y7X000006RSQkUAO: [Object]
   ]
 },
 a0C7X0000056wmOUAQ: {
   attributes: {
     type: 'GRD__c',
     url: '/services/data/v53.0/sobjects/GRD__c/a0C7X0000056wmOUAQ'
   },
   Id: 'a0C7X0000056wmOUAQ',
   Name: 'Lote-6155057',
   Guia__c: [ a0Y7X000006RSQBUA4: [Object] ]
 }
]

but when I try to do a loop nothing happens, i’m doing like this because during the execution i need to add new keys like Guia__c and inside of Guia__c i need to put i new one, this already happen but the problem is to do the loop, and when i try to convert the array to a string nothing returns

First of all, I have never successfully built an AJAX call that worked. This is my first real try at doing this.

I am working on building a function to update existing records in a SQL database. I am using ASP.NET Core (.NET 6) MVC but I also use JavaScript and jQuery. I cannot have the page refresh, so I need to use ajax to contact the Controller and update the records.

I have an array that was converted from a NodeList. When I debug step by step, the collectionsArray looks perfectly fine and has data in it.

//Create array based on the collections list
    const collectionsArray = Array.from(collectionList);

    $.ajax({
        method: 'POST',
        url: '/Collections/UpdateCollectionSortOrder',
        data: collectionsArray,
    })
        .done(function (msg) {
            alert('Sent');
        });

However, when I run the application and debug the code, the array is received in the Controller as {string[0]}.

Here is the method which is in the Controller, with my mouse hovered over the parameter:

Do not pay attention to the rest of the code in the controller method. I have not really written anything in there of importance yet. I plan to do that once the data is correctly transferred to the Controller.

I have tried dozens of ideas including what you see in the Controller with the serialize function, just to see if it processes the junk data that is getting passed, but it hasn’t made a difference.

I have been Googling the issue & reading other StackOverflow posts. I’ve tried things like adding/changing contentType, dataType, adding ‘traditional: true‘, using JSON.stringify, putting ‘data: { collections: collectionsArray }‘ in a dozen different formats. I tried processing it as a GET instead of POST, I tried using params.

I am out of ideas. Things that have worked for others are not working for me. What am I doing wrong? I’m sure it’s something minor.

I am a final year highschool. For my project, we decided to make front-end css for our game sensitivity converter website.

I have copied code from this website https://sensitivityconverter.com/

But on jsfiddle, my code is not working. I can see the form but I couldn’t figure out how to make the calculation works like on original website.

https://jsfiddle.net/60jyo4hz/ enter code here

Please forgive me for my poor grammar.

How can I change my java scrip to work if the selected has multiple words, for example bellow the value has two words “Online Events” the div class is two words “Online Events” however it will remain hidden as the current Jquery will only look for the value if matches the class as one word.

let $j = jQuery.noConflict();

$j(document).ready(function($j) {
  $j("#event-drop").change(function() {
    let opt = $j(this).val();
    if (opt === "all") {
      $j(".event_div").show();
    } else {
      $j(".event_div").hide();
      $j("." + opt).show();
    }
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select id="event-drop" style="margin-bottom:20px">
  <option value="all">All</option>
  <option value="Online Events">online</option>
  <option value="Ofline Events">online</option>
</select>

<div class="card-deck col-4 pb-5 Online Events event_div" style="">
  <div class="card top-line-grey">
    <small class="card-header bg-transparent border-0 font-weight-bold text-uppercase" style="color: #8D8CAB">here titlke</small>
    <div class="card-body">
      <h5 class="card-title text-capitalize pb-2">Sub title</h5>
    </div>
    <div class="card-footer bg-transparent border-0">
      <small class="float-left font-weight-bold text-uppercase">
                                            small text                                            </small>
      <small class="float-right font-weight-bold text-uppercase">
                                                January 4, 2022                                            </small>
    </div>
    <div class="card-footer bg-transparent border-0">
      <a class="btn-link text-uppercase" href="http://www.google.com" target="_blank">
                                                    More info                                                </a>
    </div>
  </div>
</div>

In the code:

let nextInterval = function(){  
    if(score % 10 === 0) {
        speed -= 10;
    }
    if(internalScore === 20) {
        clearInterval(2);
        catchingEggs();
    }
    if(heartIndex<0) {
        clearInterval(2);
        return
    }
    eggIndex = Math.floor(Math.random()*4); 
    fallingEggs(allEggs[eggIndex], speed);
    }

setInterval(function(){  
    if(score % 10 === 0) {
        speed -= 10;
    }
    if(internalScore === 20) {
        clearInterval(1);
        setInterval (nextInterval,speed*3.5);
        return
    }
    if(heartIndex<0) {
        clearInterval(1);
        return
    }
    eggIndex = Math.floor(Math.random()*4); 
    fallingEggs(allEggs[eggIndex], speed);
    }, speed*3.5); 

when internalScore === 20 both intervals start running together, simultaneously. I use clearInterval() to stop the interval with ID 1, but as the nextInterval starts, the first one starts again.

I want to be able to reuse the same interval code (ideally with different variables). I tried starting new interval outside the function and upon a conditional, but that didn’t work either, JS simply goes through the code once, sees the conditional === false and don’t call second interval at all and if i put that conditional in a while loop, it crashes the browser.

so the above code is the closest i got to what i’m trying to do, but still not quite there.

I’m struggling with a big JSON Object and I got into a weird problem:
My Object has the following structure:

const bar = {
  arr: []
}

If I try to set its value in this way bar.arr.foo = 'ciao' it doesn’t give me any error. The result object is this

What is that strange “Array(0)” that the Chrome dev tools are pointing out? If I try to type typeof bar.arr it says “object”

But doing JSON.stringify(bar, null, 2) results in '{n "arr": []n}'

Website URL – https://cci-logistics.com/
Website and Company Name – CCI Logistics
Website Bio – CCIL specializes in customized transport solutions, with competency in road and rail while air is managed through various partner organizations.
No- +91-022 6781 8500
Email –[email protected]
add- 202-B, Corporate Center,
Andheri – Kurla Road,
Marol Pipeline, Andheri East,
Mumbai – 400059. INDIA

I am trying to get this subcollection’s ref id
[1]: https://i.stack.imgur.com/4Ato6.png
I am following this tutorial however :
[2]: https://www.pluralsight.com/guides/consume-data-from-firebase-firestore-in-a-react-app
I want to get the hBYWvZ3KN3NLLrucTpryeTQZnHz2 from the firestore :

 const HighlightDbId =  await db.collection('highlights').doc('2SCS2S0JnzngWEiYkHNk').collection('hBYWvZ3KN3NLLrucTpryeTQZnHz2')

Please how can I possible get that id ??