How to update a javascript object keys value using the index of an object

I have an array of object like

const test = [{id: 1, text: "Test"}, { id: 2 , text: "Test 2" } ]
const index =  test.findIndex((listItem) => listItem === test[0])

Here I am trying to update the value of text key using the index.

I have a solution like this:

 const editItemText = (value) => {
    const newList = replaceItemAtIndex(todoList, index, {
      ...item,
      text: value,
    });

    setTodoList(newList);
  };
  
const replaceItemAtIndex =  [...arr.slice(0, index), newValue, ...arr.slice(index + 1)];

is there any other option to do so ? Also How does the given solution works ?

Thanks.

Creating and accessing unique html div via javascript

Part of my script using the below to create the div.

days += <div class="day${i}">${i}</div>;

My question is how do I access it?

document.querySelector(“.day8”).addEventListener(“click”, () => {

Using this method works with other divs I have created but doesn’t seem to work with divs inside divs… The structure is “day” inside of “days”.

Sorry if this is not clear.

can i get selected option country from intl-tel-input (PHP EDIT DATA)

I’m new and right now i’m practicing create form with two fields (phone number and country). I’m using intl-tel-input from https://github.com/jackocnr/intl-tel-input and i wonder can i get selected option country using PHP while the data using intl-tel-input. Here’s my HTML & PHP code

<div class="form-group">
    <label for="exampleFormControlInput1">Country of Origin</label>
    <select class="custom-select" id="country" name="country" value="<?=$pecah2['origin_country'] ?>" <?php if($pecah2['origin_country'] = $pecah2['origin_country']){echo 'selected="selected"';} ?>></select>
</div>
<div class="form-group">
    <label for="exampleFormControlInput1">Phone Number</label><br>
    <input type="text" class="form-control" name="phonenumber" id="phone" required value="<?= $pecah2['phone_number'] ?>">
</div>

JS

<script src="https://code.jquery.com/jquery-3.6.0.min.js" type="text/javascript"></script>
<script src="assets/build/js/intlTelInput.js" type="text/javascript"></script>
<script src="assets/build/js/intlTelInput.min.js" type="text/javascript"></script>
<script>
   var input = document.querySelector("#phone");
   var countryData = window.intlTelInputGlobals.getCountryData();
   var addressDropdown = document.querySelector('#client_country');
   var iti = window.intlTelInput(input, {
       utilsScript :'assets/build/js/utils.js'
   });
   for (var i = 0; i < countryData.length; i++){
       var country = countryData[i];
       var optionNode = document.createElement("option");
                        optionNode.value = country.iso2;
       var textNode = document.createTextNode(country.name);
                        optionNode.appendChild(textNode);
                        addressDropdown.appendChild(optionNode);
                       }

      addressDropdown.value = iti.getSelectedCountryData().iso2;
                       
      input.addEventListener('countrychange',function(){
                        addressDropdown.value = iti.getSelectedCountryData().iso2;
                       });

      addressDropdown.addEventListener('change', function(){
                        iti.setCountry(this.value);
                       });
</script>

i’m practicing by different youtube videos by the way

please, I can’t handle the eventlistener

I’m working on my college’s project and it’s kinda like a web-text-based game, where the player come and play. so I’m interesting in a click event on a document to change the context and I did it with the code below…. the problem is that it’s keep repeating everything and I can’t even type in the input!!

const homepage = document.querySelector('#homepage')

document.addEventListener('click',function(){
/*I console.log to check that the function is still repeating*/
console.log('check')
homepage.innerHTML = `<div> hello what's your name? </div>`
document.addEventListener('click',function() {
homepage.innerHTML = `<div> my name is <br> 
<input id="name"> </input> <br>
<button> submit </button<
`
})
})
#homepage {
  text-align: center;
}
<body>
<div id = "homepage"> click to change the content </div>

What do I put in my form action when the router.post() has an :id

I am not sure how to submit data to my update form and what I have to put in the action field as the router.post has an :id. Below is my code:

router.post('/gymupdate/:id',async(req,res) => {

    
      let gymName = req.body.firstname;
      let location = req.body.city;
      let phoneNumber = req.body.mobile;
      let priceRange = req.body.price;
      let id = req.params.id;

      
     try{
      check2(gymName,location,phoneNumber,priceRange);
      if(!id) throw 'Pleaase provide an id';
      var checkForHexRegExp = new RegExp("^[0-9a-fA-F]{24}$");
      if(checkForHexRegExp.test(id)===false) throw 'Not a valid objectid';
      
    
      const updategym = await gymData.update(id,gymName,location,phoneNumber,priceRange)
      if(updategym)
        res.status(200).redirect('/gyms')
      else {
          res.status(500).render('gymbars/updategym', {title: "Error", error: 'Internal Server Error'})
      }
    }
    catch(e){
      res.status(400).render('gymbars/updategym', {title: "Error", error: e})
    }
  });

Form:

<form method="POST" action="/gyms/gymupdate/:id" id="signup-form" class="signup-form"></form>

The content in the action does not work, so how do I add id field to the action part similar to the router.post method?

Form Input Value not updating from script

I have a text input as follows:

<td><input type="text" class="form-control assetID" autocomplete="off" placeholder="Asset ID" name="assetID[]"></td>

and a script that runs when the first input field is modified. I would like to update the value of the 2nd input when this script runs:

 $this.closest('tr').children('.form-control assetID').val(assetID);

with the value of the asset variable. I can’t get the form input to update here when this script runs and can’t see the issue here? I will have a series of similar inputs that are added dynamically so I’m not using an id for these but targeting them by the class.

Get total values from checkbox, add them, and display the result in reactjs

I have data in JSON format and it has a price. I mapped it in the table with a checkbox per row.

this is my data

{
    "CartID": "61a9d0251202a1a40825924e",
    "ShopCartList": [
        {
            "ShopID": "610a29e1d51ba524b7f949d0",
            "productCartList": [
                {
                    "ProductID": "610a40a7d51ba524b7f949f4",
                    "VariationSKU": "062104338N",
                    "Price": 478.44,
                    "Count": 1,
                    "Attribute": {
                        "Weight": "1.64",
                        "Size": "15.00"
                    },
                    "CreatedDate": "2021-12-06T07:15:59.895Z",
                    "CreatedBy": "61a9d0251202a1a40825924e",
                    "LastUpdatedDate": "2021-12-06T07:15:59.895Z",
                    "LastUpdatedBy": "61a9d0251202a1a40825924e"
                }
            ]
        }
    ]
}

I want to get the sum of the price of the checked box I selected same as Shoppee. I am using react js. How can I do this? Plz teach and help me on this thank you.

How to fix Sweetalert 2 NOT working in Google Chrome

I am trying to utilize SWEETALERT2 via php on my project but when i try to run my file in google chrome it doesn’t work. The buttons are clickable and it records the data but sweetalert doesn’t display anything just a clickable submit button.

Things that i want to achieve on this project is to use sweetalert display when i successfully record new user. When i need to update the record or to delete a file.

Submit button should not be clickable if input box has no value.

index.php

 <div class="modal-body">
<form action="add_main_users.php" id="form">
<div class="controls">
<label for="recipient-name" class="control-label" style="color: Grey">Full Name:</label>
<input type="text" class="form-control" name="fname" required data-validation-required-message="This field is required">

</div>
<div class="controls">
<label for="recipient-name" class="control-label" style="color: Grey">Username:</label>
<input type="text" class="form-control" name="uname" required data-validation-required-message="This field is required">
</div>

div class="controls">
<label for="recipient-name" class="control-label" style="color: Grey">Email:</label>
<input type="email" class="form-control" name="email" required data-validation-required-message="This field is required">
</div>

<div class="controls">
<label for="recipient-name" class="control-label" style="color: Grey">Default Password:</label>
<input type="text" class="form-control" name="dpass" required data-validation-required-message="This field is required">
</div>
                                                    
<div class="controls">
<label for="recipient-name" class="control-label" style="color: Grey">Role:</label>
<select class="form-control custom-select" name="role" required data-validation-required-message="This field is required">

<option value="Administrator">Administrator</option>
<option value="Editor">Editor</option>
</select>
</div>
<div class="controls">
<label for="recipient-name" class="control-label" style="color: Grey">Branch Assigned:</label>
<select class="form-control custom-select" name="bassign" required data-validation-required-message="This field is required">
<option value="0">1Warehouse</option>
<option value="1">2Warehouse</option>
<option value="2">3Warehouse</option>
</select>
</div>
</div>

<div class="modal-footer">
<button type="button" class="btn btn-primary" id="btnSubmit">Submit</button>
</div>
</div>
</form>
</div>
</div>```

    
add_main_users.php 
<?php
    $request = $_REQUEST; 
    $fname = $request['fname'];
    $uname = $request['uname']; 
    $email = $request['email'];
    $dpass = $request['dpass'];

    $servername = "localhost"; 
    $username = "root"; 
    $password = ""; 
    $dbname = "dims";

    $mysqli = new mysqli($servername, $username, $password, $dbname);

    if ($mysqli->connect_errno) {
      echo "Failed to connect to MySQL: " . $mysqli->connect_error;
      exit();
    }

    $sql = "INSERT INTO users (u_name, u_username, u_email, u_password)
    VALUES ('".$fname."', '".$uname."', '".$email."', '".$dpass."')";

    if ($mysqli->query($sql)) {
      echo "New user has been created.";
    } else {
      return "Error: " . $sql . "<br>" . $mysqli->error;
    }

    $mysqli->close();
?>

js



function save() 
{
    $("#btnSubmit").on("click", function() {
        var $this           = $(this); //submit button selector using ID
        var $caption        = $this.html();// We store the html content of the submit button
        var form            = "#form"; //defined the #form ID
        var formData        = $(form).serializeArray(); //serialize the form into array
        var route           = $(form).attr('action'); //get the route using attribute action

        // Ajax config
        $.ajax({
            type: "POST", //we are using POST method to submit the data to the server side
            url: route, // get the route value
            data: formData, // our serialized array data for server side
            beforeSend: function () {//We add this before send to disable the button once we submit it so that we prevent the multiple click
                $this.attr('disabled', true).html("Processing...");
            },
            success: function (response) {//once the request successfully process to the server side it will return result here
                $this.attr('disabled', false).html($caption);

                // Reload lists of employees
                all();

                // We will display the result using alert
                Swal.fire({
                  icon: 'success',
                  title: 'Success.',
                  text: response
                });

                // Reset form
                resetForm(form);
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                // You can put something here if there is an error from submitted request
            }
        });
    });
}

function resetForm(selector) 
{
    $(selector)[0].reset();
}

$(document).ready(function() {

    
    // Submit form using AJAX To Save Data
    save();

});

How would you map fields values from different tables from Azure Table Query in nodeJS?

I am trying to find the best way to solve How I can add the data from one table to another. I was thinking the best way would be to create an array in the client function and .push the client names + id to that array. From there, compare that array to the other table data.

Here are pictures of what the tables look like
[first Table][1]
[Second Table][2]
[1]: https://i.stack.imgur.com/O2BBz.png
[2]: https://i.stack.imgur.com/WU4oz.png

How to send javascript list from template to request.POST (django framework)

I have the javascript below that gets all checked box and it works well.

<script>
                function addlist() {
                    var array = []
                    var checkboxes = document.querySelectorAll('input[type=checkbox]:checked')

                    for (var i = 0; i < checkboxes.length; i++) {
                        array.push(checkboxes[i].value);
                    }
                    document.write(array);
                }
</script>

I want to know how to submit the list array to views.py and get it via request.POST[”]

Any suggestions?

Trying to extend webpack’s webpack-bundle-tracker so it doesn’t show path

I have a webpack.config.js file here. I’m trying to modify or overwrite the writeOutput method of the webpack-bundle-tracker app (saved as BundleTracker) so that when the webpack-stats-prod.json file is created it creates this (‘no path’):

{
  "status": "done",
  "assets": {
    "78d4aa4961e00276aa1fe5487f7fcae4.eot": {
      "name": "78d4aa4961e00276aa1fe5487f7fcae4.eot",
      "path": "no path"
    },

instead of this (absolute path):

{
  "status": "done",
  "assets": {
    "78d4aa4961e00276aa1fe5487f7fcae4.eot": {
      "name": "78d4aa4961e00276aa1fe5487f7fcae4.eot",
      "path": "/Users/name/static/webpack/bundles/prod/78d4aa4961e00276aa1fe5487f7fcae4.eot"
    },

I’m trying to do this by copying the webpack-bundle-tracker app into a new variable (NoPathBundleTracker) and then overwriting the writeOutput method.

So far I’m getting this error: TypeError: Class constructor BundleTrackerPlugin cannot be invoked without 'new' but I’m wondering if this is the best way to achieve my custom output.

const path = require('path');
const webpack = require('webpack');
const BundleTracker = require('webpack-bundle-tracker');

const config = require('./webpack.base.config.js');

var NoPathBundleTracker = function(options) {
  BundleTracker.call(this, options);
};

// Edit webpack-bundle-tracker to not show path
NoPathBundleTracker.prototype = Object.create(BundleTracker.prototype);
NoPathBundleTracker.prototype.writeOutput = function (compiler, contents) {
    
    var chunks = contents['chunks'];

    if (chunks) {
      for (var chunk in chunks ) {
        var chunkArray = chunks[chunk];
        var i;
    
        for (i = 0; i < chunkArray.length; ++i) {
          var chunkObject = chunkArray[i];

          for ( var chunkinfo in chunkObject ) {
            chunkObject['path'] = 'no path';
          }
        }
      }
    }

    BundleTracker.prototype.writeOutput.call(this, compiler, contents);
};

config.output.path = path.resolve('./bundles/prod');

config.plugins = config.plugins.concat([
  new NoPathBundleTracker({
    filename: './webpack-stats-prod.json'
  }),

  new webpack.DefinePlugin({
    'process.env': {
    'NODE_ENV': JSON.stringify('production')
  }}),

]);

module.exports = config;

Fetching data in loop next js

I am attempting to use the data from 1 endpoint to call another endpoint that is filtered by id. I am planning on fetching both calls using getServerSideProps and passing the data to another component.

The first call will return an array of categories which then I am attempting to loop and fetch articles that is filtered by id.

I am able to successfully get back the array of categories but when I am attempting to loop and fetch articles I am getting a value of undefined How can I achieve this?

Here is an example of my index.js

import ArticleList from "../../components/ArticleList";


const Index = ({ categories, articles }) => {


  return (
    <>
      <ArticleList categories={categories} articles={articles} />
    </>
  )
}

export async function getServerSideProps (context) {
   // console.log('index - getserversideprops() is called')
   try {
     let articles = []
    let response = await fetch('https://example.api/categories')
    const categories = await response.json()

    for (let i = 0; i < categories.results.length; i++) {
      response = await fetch (`https://example.api/articleid/` + categories.results[i].id)
      articles = await response.json()
    }

    console.log(articles,'33')


    if (!categories ) {
        return {
            notFound: true,
        }
    }

    return { 
      props: { 
        categories: categories,
        articles: artices
      }
    }
  } catch (error) {
      console.error('runtime error: ', error)
  }
}

export default Index

Here is an example of my console.log(categories.results) array:

[ {
"id": 2,
"name": "Online"
},
{
"id": 11,
"name": "Retail"
},
{
"id": 14,
"name": "E-Commerce"
}]

I am expecting articles to be 3 separate arrays of data. Is this something that is possible if I am passing the data to another component? If not what will be a better way of handling this?