Category: javascript

On my pages it repeats short content like image licenses, or other things. The convenience would also be to be able to edit them all at the same time by typing just one. I know it’s against SEO, but I don’t really care about search engine penalties.
I can’t get this javascript to work. And yet I think I wrote it right.

<script type='text/javascript'>
//<![CDATA[
  var x = document.getElementById("license").document.querySelectorAll("#license");
  var i;
  var text = "Hello world";
    for (i = 0; i < x.length; i++){
     x[i].innerHTML = text; 
  }
//]]> 
</script>

In my programming in Node.JS I made some code that worked, but I want to understand the concept of how it works.

In the code in question I use knex to retrieve information from a MySQL database. I import the knex module for that:

const config = {...}
const knex = require('knex')(config)

So far nothing new, only this time I needed to do a nested query and it was the first time. In this case, I consulted the sales data and then the sale items. I did it as follows:

const getSales = async () => {
    await knex("tbl_vendas")
        .select(knex.raw("tbl_vendas.id_vendas, tbl_vendedores.nome AS vendedor, " +
            "tbl_clientes.nome_razaosocial AS cliente, tbl_vendas.data, tbl_vendas.hora, " +
            "tbl_vendas.cupom, tbl_vendas.total"))
        .leftOuterJoin("tbl_vendedores", "tbl_vendedores.id_vendedores", "tbl_vendas.id_vendedores")
        .leftOuterJoin("tbl_clientes", "tbl_clientes.id_clientes", "tbl_vendas.id_clientes")
        .then(sales => {
            const rows = sales.map(sale => {
                return knex("tbl_vendas_itens")
                    .select("tbl_vendas_itens.id_vendas_itens AS id_item", "tbl_produtos.descricao",
                        "tbl_vendas_itens.qtde", "tbl_vendas_itens.vl_unitario", "tbl_vendas_itens.desconto",
                        "tbl_vendas_itens.vl_total")
                    .leftOuterJoin("tbl_produtos", "tbl_vendas_itens.id_produtos", "tbl_produtos.id_produtos")
                    .where("tbl_vendas_itens.id_vendas", "=", sale.id_vendas)
                    .then(sales_items => {
                        const newRow = { ...sale, itens: [...sales_items] }
                        return newRow
                    })
            })
            return Promise.all(rows)
        })
        .then(console.log);
}

Writing this code was pretty intuitive and it worked, but then I was amazed that I used the knex constant twice, one inside the other, and it didn’t hurt.

I ran a console.log(typeof(knex)) to find out what it was and it returned that it is a function.

Could someone explain the theory behind the use of knex inside the other and help me understand why it is okay to do this?

I am working on an accordion; however, I have two intertwined but different tasks to accomplish the first is how to get the “buttons” to automatically close when another element is opened. I’m not using an existing framework (i.e. bootstrap) as the environment I’m developing in can’t use external resources for displaying content. The other issue I’m trying to solve is how to add rows of information into accordioned spaces, I’m looking for a more effective method that using a table; however, if the table element seems to be the best method that would be acceptable. I have included the HTML, CSS and JavaScript I’ve been using to develop this element and would appreciate any assistance that could be provided.

document.querySelectorAll('.accordion__button').forEach(button => {
    button.addEventListener('click', () => {
      const accordionContent = button.nextElementSibling;

      button.classList.toggle('accordion__button--active');

      if (button.classList.contains('accordion__button--active')) {
        accordionContent.style.maxHeight = accordionContent.scrollHeight + '100%';
      } else {
        accordionContent.style.maxHeight = 0;
      }
    });
  });

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
.search-title {
  box-sizing: border-box !important;
  display: block !important;
  margin: 0 0 30px 0;
  padding: 0;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  font-size: 2.6em !important;
  color: #18467F !important;
}

.subsection-title {
  box-sizing: border-box !important;
  display: block !important;
  margin: 0 0 5px 0;
  padding: 0;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 2.3em;
  font-weight: 600;
  color: #C6B66D !important;
}

.update-article {
  padding-left: 25px;
  padding-right: 25px;
}

.search-sub-title {
  box-sizing: border-box;
  display: block;
  margin: 0 0 15px 0;
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  font-size: 2em;
  color: #C6B66D;
}

.search-text {
  font-size: 1.35rem !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 300;
  line-height: 1.75 !important;
}

.search-heading {
  box-sizing: border-box;
  display: block;
  margin: 0 0 15px 0;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 1.3em;
  color: #18467F;
}

.presidential-search-link a {
  color: #18467F;
  text-decoration-color: #C6B66D !important;
}

.accordion {
  border: none !important;
}

.accordion__button {
  box-sizing: border-box !important;
  display: block !important;
  width: 100%;
  padding: 25px;
  border: none;
  outline: none;
  cursor: pointer;
  background: #18467F;
  font-family: "Roboto Condensed", sans-serif !important;
  font-size: 20px !important;
  font-weight: 800;
  color: #FFF;
  text-align: left;
  transition: background 0.2s ease all;
}

.accordion__button::after {
  content: '25be';
  float: right;
  transform: sclae(1.5);
  color: #C6B66D;
}

.accordion__button--active {
  background: #2771CC;
}

.accordion__button--active::after {
  content: '25b4';
}

.accordion__content {
  box-sizing: border-box !important;
  overflow: hidden !important;
  max-height: 0;
  transition: max-height 0.2s ease all;
  padding: 0 15px;
  margin-bottom: 15px;
  font-family: sans-serif;
  font-size: 18px;
  line-height: 1.5;
  background: #D0D5D9;
}

.hc-collection-list {
  box-sizing: border-box !important;
  display: grid !important;
  grid-column-gap: 16px !important;
  grid-row-gap: 16px !important;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)) !important;
}

.hc-day-events {
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}

.hc-collection-item-1,
.hc-collection-item-2,
.hc-collection-item-3,
.hc-collection-item-4,
.hc-collection-item-5,
.hc-collection-item-6,
{
  box-sizing: border-box !important;
  display: flex !important;
  width: 100% !important;
  min-height: 350px !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  align-content: center !important;
}

.event-date {
  box-sizing: border-box !important;
  margin-top: 10px !important;
  margin-bottom: 10px !important;
  font-family: sans-serif !important;
  font-size: 52px !important;
  text-transform: uppercase !important;
  color: #888b8d !important;
  text-align: left !important;
}

.hc-event-details {
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: wrap !important;
  justify-content: space-between !important;
  padding-left: 30px !important;
  padding-right: 30px !important;
  padding-bottom: 30px !important;
}

.hc-event-details-no-link {
  box-sizing: border-box !important;
  margin-top: -220px !important;
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: wrap !important;
  justify-content: space-between !important;
  padding-left: 30px !important;
  padding-right: 30px !important;
  padding-bottom: 30px !important;
}

.event-name {
  box-sizing: border-box !important;
  background: #18467F;
  padding: 10px 10px;
  line-height: 1 !important;
  margin-top: 20px !important;
  margin-bottom: 10px !important;
  color: #FFF !important;
  text-transform: uppercase !important;
  font-family: sans-serif !important;
  font-size: 24px !important;
  font-weight: 600;
  text-decoration: none !important;
}

.event-location {
  box-sizing: border-box !important;
  margin-top: 5px !important;
  margin-left: -15px;
  color: #18467F !important;
  font-family: sans-serif !important;
  font-size: 18px !important;
  text-transform: none !important;
}

.event-location.subset {
  box-sizing: border-box !important;
  margin-top: 5px !important;
  margin-left: -15px;
  color: #18467F !important;
  font-family: sans-serif !important;
  font-size: 18px !important;
  text-transform: none !important
}

.event-location li {
  box-sizing: border-box !important;
  margin-bottom: 20px !important;
  color: #18467F;
  font-family: sans-serif !important;
  line-height: 1.15 !important;
  font-weight: 600;
}

.event-location.subset li {
  box-sizing: border-box !important;
  margin-bottom: 20px !important;
  color: #18467F;
  font-family: sans-serif !important;
  line-height: 1.15 !important;
  font-weight: 100 !important;
  list-style: none;
}

span.item-details {
  box-sizing: border-box !important;
  margin-top: 15px;
  font-weight: 100 !important;
  text-decoration: underline;
  font-family: sans-serif !important;
  font-size: 18px !important;
  text-transform: none !important;
}

span.address {
  font-weight: 100 !important;
}

.event-location a {
  box-sizing: border-box !important;
  color: #18467F;
  text-decoration: none !important;
  line-height: 1.15 !important;
  transition: all 0.6s ease;
}

.event-location a:hover {
  color: #888B8D;
  text-decoration: underline !important;
}

.event-location.subset li::before {
  content: "";
  width: 8px;
  height: 8px;
  display: inline-block;
  float: left;
  transform: skew(-10deg);
  transform-origin: left bottom;
  background-color: #888B8D;
  margin: 5px 10px 0px -20px;
}

.hc-collection-item-1 {
  box-sizing: border-box !important;
  background-position: 50% 50% !important;
  background-size: cover !important;
}

.visit__campus__title {
  box-sizing: border-box !important;
  display: block !important;
  width: 100% !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 600 !important;
  font-size: 32px !important;
  letter-spacing: 0.01em !important;
  color: #18467F !important;
  line-height: 1.1 !important;
  text-transform: uppercase !important;
  margin-bottom: 30px !important;
}

.visit__campus__text {
  box-sizing: border-box !important;
  display: block !important;
  color: #262626 !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  line-height: 1.95 !important;
  margin-bottom: 15px !important;
}

.count__up {
  box-sizing: border-box !important;
  width: 100% !important;
  height: auto !important;
  margin: 30px auto 30px auto !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  padding: 60px 20px !important;
  background-image: url(https://bluetigerportal.lincolnu.edu/image/image_gallery?uuid=9d96d0d7-1d1b-4d7d-96da-37abb1485ebb&groupId=6616610&t=1599054711875) !important;
  background-position: 50% 50% !important;
  background-size: auto !important;
  overflow: auto !important;
}

.statistics__container {
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)) !important;
  grid-row-gap: 30px !important;
  grid-column-gap: 15px !important;
}

.statistics__details {
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  justify-content: space-between !important;
}

.stat1,
.stat2,
.stat3 {
  box-sizing: border-box !important;
  display: flex !important;
  width: 100% !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  align-content: center !important;
}

.text__1 {
  box-sizing: border-box !important;
  position: relative !important;
  left: -15px !important;
}

.text__2 {
  box-sizing: border-box !important;
  position: relative !important;
  left: -38px !important;
}

.text__3 {
  box-sizing: border-box !important;
  position: relative !important;
  left: -65px !important;
}

.counter {
  box-sizing: border-box !important;
  display: block !important;
  float: left !important;
  width: auto !important;
  margin: 0 auto !important;
  color: #F5C431 !important;
  font-size: 4.5rem !important;
  font-family: 'Montserrat', sans-serif !important;
}

.info {
  box-sizing: border-box !important;
  display: block !important;
  width: auto !important;
  margin: auto 15px auto auto !important;
  color: #FFF !important;
  text-transform: uppercase !important;
  font-size: 1.5rem !important;
  font-family: 'Montserrat', sans-serif !important;
  line-height: 1.5 !important;
  text-align: left !important;
}

.tour__information__wrapper {
  box-sizing: border-box !important;
  margin-bottom: 30px !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}

.information {
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(50vh, 1fr)) !important;
  grid-row-gap: 15px !important;
  grid-column-gap: 15px !important;
}

.left-column .image {
  box-sizing: border-box !important;
  display: inline-block !important;
  width: 100% !important;
  min-width: 350px !important;
  height: auto !important;
  min-height: 350px !important;
}

.right-column .video {
  box-sizing: border-box !important;
  display: inline-block !important;
  width: 100% !important;
}

.video {
  width: 100% !important;
  height: 100% !important;
  min-height: 350px !important;
}

.tour__url {
  box-sizing: border-box !important;
  display: inline-block !important;
  width: 100% !important;
  padding-top: 15px !important;
  padding-left: 15px !important;
  padding-bottom: 15px !important;
  color: #18467F !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 1.6rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  cursor: pointer !important;
  background: rgba(136, 139, 141, 0.6) !important;
}

<div class="accordion">
  <h3 class="search-title">Academic Calendar</h3>
  <button type="button" class="accordion__button">List</button>
  <div class="accordion__content">
    <div class="list__container">
      <div class="list__item">
        <div class="list__item__content">
          <section class="update-article">
            <div class="table_container">
              <div class="table_heading">
                <h2 class="admissions__steps">Columned List of Values</h2>
              </div>
              <div class="row">
                <div class="column left"></div>
                <div class="column right"></div>
              </div>
            </div>
          </section>
          <section class="update-article">
            <div class="table_container">
              <div class="table_heading">
                <h2 class="admissions__steps">Columned List of Values</h2>
              </div>
              <div class="row">
                <div class="column left"></div>
                <div class="column right"></div>
              </div>
            </div>
          </section>
        </div>
      </div>
    </div>
  </div>
  <button type="button" class="accordion__button">Spring</button>
  <div class="accordion__content">
    <div class="list__container">
      <div class="list__item">
        <div class="list__item__content">
          <p class="admissions__steps">Some Additional Information, same as above></p>

        </div>
      </div>
      <div class="list__item">
        <div class="list__item__content">
          <p class="admissions__steps">More of the same as above</p>
        </div>
      </div>

    </div>
  </div>
  <button type="button" class="accordion__button">Summer</button>
  <div class="accordion__content">
    <div class="list__container">
      <div class="list__item">
        <div class="list__item__content">
          <p class="admissions__steps">Different set of data but again same as above</p>

        </div>
      </div>
      <div class="list__item">
        <div class="list__item__content">
          <p class="admissions__steps">More of this type of information continued from above</p>
        </div>
      </div>

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

I’m wondering how to send Javascript File object to AWS Lambda. I have a File object which collected from <input type="file"> and formed as File() object. I’m sending the File() object through an HTTP request to AWS Lambda but ended up getting undefined on the Lambda function.

Front End(Javascript)

let uploadFile = new File(
   [file], 
   Date.now() + " - " + file.name, 
   {type: file.type}
)

const body = {
   payload: {
      file: uploadFile,
      comment: "Uploading File."
   }
}

fetch(url, {
   method: "POST",
   headers: {
      "Authorization": token,
      "Content-Type": "application/json"
   },
   body: body
}).catch((err) => {
   reject(err.json());
});
                        

Back End (AWS Lambda, Typescript)

const handler = async (event: APIGatewayProxyEventV2): Promise<any> => {
   console.log("Whole Event Body:", event.body);
   console.log("Event Body Payload:", event.body.payload);
   ...
}

I’m just getting undefined from the event. I wonder am I doing it correctly? Is it possible to pass the File() object to AWS Lambda?

I’m trying to check message.content against a JSON and an API link that is fetched and stored to the const data for a automod bot.

The JSON and API link both contain arrays with 600+ items stored.

The idea is to check against a locally stored JSON, and then an API to prevent links being posted.

The code works fine for 90% of the time, but while testing and sending multiple links in a short space of time, i get this error:

TypeError: data.some is not a function

This is the code:

client.on('messageCreate', async (message) => {
     try {
          const guild = client.guilds.cache.get(message.guildId);
          const member = guild.members.cache.get(message.author.id);
          const modLogs = client.channels.cache.get(modLogsChannelID);
          const response = await fetch(
               definedAPI,
          );
          const data = await response.json();

          if (badLinksJSON.some(letter => message.content.includes(letter))) {
               console.log(`${member.user.tag} used a bad link and has been muted.`)
               member.roles.add(mutedRoleID).catch(err => console.error);
               message.channel.send(`${message.author.toString()} You have been muted for: **Bad Link Usage**`).catch(console.error).then(message.delete()).catch(err => console.error);

          } else if (data.some(word => message.content.includes(word))) {
               console.log(`${member.user.tag} used a bad link and has been muted.`)
               member.roles.add(mutedRoleID).catch(err => console.error);
               message.channel.send(`${message.author.toString()} You have been muted for: **Bad Link Usage**`).catch(console.error).then(message.delete()).catch(err => console.error);
          }  
     } catch (error) {
          message.channel.send('Oops, there was an error fetching the API');
          console.log(error);
     }
}

Note: > Multiple variables are defined in the code file above, I have not included them in the code snippet

The try and catch were added to prevent the bot from crashing if this error occured. I am aware it could be done other ways.

Any help is appreciated, TIA.

I currently work on a school project with JS and I need to etablish a modal and a lightbox in the same page.
I work with classes and when I initialize my Lightbox and Modal classes, only one of them works.
That is, the methods called when initializing my classes work but the bindEvents method containing my addEventListener doesn’t work.

Here are more details :

My Controller class

class Controller {
  init = () => {
    ...
    
    Modal.init()
    Lightbox.init()
  }
}

My Modal class

class Modal {
  init = () => {
    // ...

    this.bindEvents()
  }

  bindEvents = () => {
    const openBtn = document.querySelector('.modal-btn')
    // ...

    openBtn.addEventListener('click', this.open)
    // ...
  }

  open = () => {
    // Open modal function
  }
}

export default new Modal()

My Lightbox class

class Lightbox {
  init = () => {
    // ...

    this.bindEvents()
  }

  bindEvents = () => {
    const openBtn = document.querySelector('.lightbox-btn')
    // ...

    openBtn.addEventListener('click', this.open)
    // ...
  }

  open = () => {
    // Open lightbox function
  }
}

export default new Lightbox()

The only class whose events work is the last to be called, so Lightbox in this example.

I also want to clarify that I work with native JavaScript and that each of my two classes work, the problem remains with the events of the first class called which do not work.

Thanks for taking a look, I think I’ve tried almost everything!

I want to update the business hour on the same page. There are other answer that I review in the stackoverflow but I still cannot manage. Help really appreciated.

Model

namespace AppModels;

use IlluminateDatabaseEloquentFactoriesHasFactory;
use IlluminateDatabaseEloquentModel;

class Hour extends Model
{
    public $table = 'biz_hour';
    protected $primaryKey = 'day_id';
    protected $fillable = [
        'day_id', 'day_name', 'start_time', 'end_time', 'day_off'
    ];
    public $timestamps = false;

}

Controller

public function update(Request $request, Hour $biz_hour)
    {
        
        $request->validate([
            'start_time' => 'required',
        ]);
    
        $start_time = AppModelsHour::find($biz_hour);
    
        ['start_time' => $request->start_time];
        foreach($biz_hour as $biz_hour){
        $start_time->save();
        }
        return redirect('start_time');

        //$biz_hour->update($request->all());
        //return redirect()->route('biz_hour.index');
    }

Biz_hour.blade.php

<div class="table-responsive">
                        <table class="table">
                            <thead class="text-uppercase">
                                <tr>
                                    <th scope="col">Day</th>
                                    <th scope="col">Start Time</th>
                                    <th scope="col">End Time</th>
                                    <th scope="col">is Day off?</th>
                                </tr>
                            </thead>
                            @foreach($biz_hour as $biz_hour)
                            <form action="{{ route('biz_hour.update',$biz_hour->day_id) }}" method="POST">
                                @csrf
                                @method('PUT')
                            <tbody>
                                <tr>
                                    <th scope="row"><br>{{$biz_hour->day_name}}</th>
                                    <td><div class="form-group">
                                        <input class="form-control" type="time" value={{ Carbon::parse($biz_hour->start_time)->format('h:i') }} name="start_time"></div>
                                    </td>
                                    <td><div class="form-group">
                                        <input class="form-control" type="time" value={{$biz_hour->end_time}} name="end_time"></div>
                                    </td>
                                    <td><br><label class="switch">
                                        <input type="checkbox">
                                        <span class="slider round"></span>
                                      </label></td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>    
                <div class="main-content-inner">
                    <div class="col-lg-6 mt-5">
                        <button type="submit" class="btn btn-primary mb-3" name="upload">Save</button>
                    </div>
                </div>
            </form> 

After clicking save button, the page only refresh but the data is not sent to the database. Thanks in advance.

I was wondering if you can activate some CSS through an HTML button press or scrolling to a certain point. It’s preferred if it’s through JS.

I would like to archive that I have an Array, with 3-4 Items and then I want to itterate throw all of them and change the selector in the function with the items of the array.

let items = ['Name','Person,'New']

then my function

$('.btn').on("click", function(){do smth});

and then the foreach .btn should be like name or person, and I want maybe to add late more Items to the array. How should I do it?

import React from 'react'
const Todo = () => {
    const[newitem,setNewitem]=React.useState("");
    const [list,setList]=React.useState([]);
    function addItem(todovalue)
    {
        if(todovalue!=="")
        {
            const newItem={
                id:1 + Math.random(),
                value:todovalue,
                isDone:false
            }
            const list=[...list];
            list.push(newItem);
            setNewitem({list,newItem:""});
        }
    }
    function deleteItem(id)
    {
        const list=[...list];
        const updatedlist=list.filter(item=>item.id!==id);
        setNewitem({updatedlist});
    }
    function update(input)
    {
        setNewitem({newItem:input});
    }
    return (
        <div className="container">
           
            <h1>Add an item...</h1>
            <input type="text" placeholder="add item" required value={newitem} onChange={e=>update(e.target.value)}/>
            <button clasName="add-btn" onClick={()=>addItem(newitem)} disabled={newitem.length}>Add Todo</button>
            <div className="list">
                <ul>
                    {
                        list.map(item=>{
                            return(
                                <li key={item.id}>
                                    <input type="checkbox" checked={item.isDone} onChange={()=>{}}/>
                                    {item.value}
                                    <button className="btn" onClick={()=>{deleteItem(item.id)}}>Delete</button>
                                </li>
                            )
                        })
                    }
                </ul>
            </div>

            
        </div>
    )
}

export default Todo
when we going to write some text in text field it get only [object Object] and when we click on Add Todo button its throws error “Cannot access ‘list’ before initialization” how to resolve that one

Let me simply put it like,

interface PlanValue {
  planName: string;
  startDate: string;
} 

type DeviceKey = 'pc' | 'mobile' | 'laptop';

type PlanType = Record<DeviceKey, PlanValue>

interface Subscription {
  valid: boolean;
  plan: PlanType;
}

Let’s say that a new device key called Kiosk is added to DeviceKey type.

But the return type of this key should be boolean.

For example

const subsc1: Subscription = new Subscription();
const subsc2: Subscription = new Subscription();
console.log(subsc1.plan.pc)    // type should be PlanValue
console.log(subsc2.plan.Kiosk) // type should be boolean

I can’t change the Subscription.plan type to PlanType | boolean because it will break other codes that are referring to this type.

How can I get a different return type according to the accessing key during the runtime?

There is <li> element in HTML that is calling a JS method “SiteAssetStyleForShiftedAsset” like this

<li class="holder-white title-holder" data-ng-style="{{SiteAssetStyleForShiftedAsset()}}" data-ng-click="getSiteAssetDetailByAssetId(asset.id,asset.assetId,asset.jobPlantId, asset.siteAssetId, asset.uniqueKey, asset.plantId,asset.siteAssetGuidId);">

Inside JS we defined that method like this:

$scope.SiteAssetStyleForShiftedAsset = SiteAssetStyleForShiftedAsset;
function SiteAssetStyleForShiftedAsset() {

    var isPPMJob = localStorage.getItem("IsPPMJob").toUpperCase();

    var shiftingAsset = $scope.addClassForShiftingAsset;

    if (isPPMJob == "FALSE") {
        return { "margin-right": "50px" };
    }
    else if (isPPMJob == "TRUE") {
        if (shiftingAsset == true || shiftingAsset == "true") 
        {
            return { "margin-right": "50px" };
        }
        else {
            return { "padding-right:": "15px" };
        }
    }
}

In outer If condition that states “if (isPPMJob == “FALSE”)” margin is applying perfectly fine
But when condition become “TRUE” in “else if (isPPMJob == “TRUE”)” it isn’t applying margin.
However alerts in all statements are working. Only problem with applying margin.
I have also inspected the element and it was showing data-ng-style=”{“margin-right”:”50px”}” but on the view nothing was changed.

I have a backend written in spring boot that consumes two external APIs, processes them writes them to a DTO, and then through a controller injects them into the frontend. My site marks the location of planes on a map. The location changes every 1s, so I would like the planes on my site to refresh every 1s as well. The site does not provide Web Socket, but it is possible to call API every 2s. I set Scheduler but even when data was fetched from API, it was not refreshing automatically on my frontend.
Demo site

My Controller code:

@Controller
@AllArgsConstructor
public class AirplaneController {

private final AirplaneService airplaneService;

@GetMapping("/index")
public String getIndex(Model model) throws IOException {
    model.addAttribute("airplanes", airplaneService.getAirplanes());
    return "map";
}
}

My index JS:

    var map = L.map('map').setView([52.95, 19.23], 7);
var ciLayer = L.canvasIconLayer({}).addTo(map);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

var airplanes = [[${airplanes}]];

var icon = L.icon({
iconUrl: 'plane.png',

iconSize:     [15, 15], // size of the icon
iconAnchor:   [15, 15], // point of the icon which will correspond to marker's location
popupAnchor:  [-10, -10] // point from which the popup should open relative to the iconAnchor
});

airplanes.forEach(value => {
    var temp =L.marker([value.latitude, value.longitude], {icon: icon}).addTo(map).bindPopup("Flight " +value.callsign+" from "+value.origin_country);
    temp.setRotationAngle(value.heading);
})

In this example, I’m using background images in the outside divs in a 3×3 grid of divs.
There is no border or margin between the divs, and the HTML output seems fine.

However, when I convert this to an image, using html2canvas, the resulting image shows transparent lines between the divs. Almost like there is a single pixel margin on each div.

Am I doing something wrong, or is this a bug in html2canvas?

https://jsfiddle.net/Onefunction/abry3x67/

NB, I have raised an issue in html2canvas’s github

EDIT For some reason, I have to add code here, even though it’s all on jsfiddle.
so here’s the javascript i used…

html2canvas(document.querySelector(".ttable"), {
                    scrollX: -window.scrollX,
                    scrollY: -window.scrollY,
                    backgroundColor: null,
                    allowTaint: true,
                    useCORS: true,
                    // logging: true,
    }).then((generatedImage) => {
  jQuery(".ttable-image").html(generatedImage);
  
    });
})```

Just started using AWS, and I’m trying to create a lambda function using javascript that I call the JSON objects in there.
To do that it’s used JSON.parse() to convert a JSON object or string into a Javascript object.
Example:

let s = '{"hello":"world"}';
let obj = JSON.parse(s);

But what I’m trying to do is to call any JSON object and not to declare with the let function, but to call any object that is on JSON.
Would appreciate any response

Thank you!