Category: javascript

I’m having a little issue with the “perfect” data format needed for a video recommendation system based on BrainJS. Assuming we have the following code:

import brain from 'brain.js';

const net = new brain.NeuralNetwork();
const input = []; // Variants are on the bottom of this thread

net.train(input);

Lets say we want to check which videos have been showed to the user in a list and which ones he did watch at the end. I’ll get data like this:

{input:{'video-1':1,'video-2':1,'video-3':1},{output:{'video-3':1}}}

In this case, the user saw video 1, video 2 and video 3 in the list and has decided to play video 3.

Now, I do the following:

net.run({'video-3':1});

This will output video-3 as recommendation. This is logical, but I want to check which other videos the user has played when he has seen video 3 in his list. So I would change the data format to the following:

{input:{'video-1':1,'video-2':1},{output:{'video-3':1}}}

In this case, I have all other videos as input, and the ones that has been played as output. This works fine if the user has only played 1 video, but I get another issue if the user has multiple output values:

{input:{'video-1':1},{output:{'video-2':1', video-3':1}}}

Okay, this one is not perfect, because video 2 could also be a recommendation for video 3 and vice versa (because the user has also seen video 2 and 3 in his list, but we filtered both out because they are in the output). So at the end, I decided to create single objects for each output:

[
 {input:{'video-1':1,'video-3':1},{output:{'video-2':1}}},
 {input:{'video-1':1,'video-2':1},{output:{'video-3':1}}}
]

Then I do:

net.run({'video-1':1});

This will output something like this:

video-2: 0.51xxxx
video-3: 0.49xxxx

Great, I have both videos as possible recommendation. But if I add more videos that match, my threshold would decrease. For example, if we get 5 matches, the output would be something like this:

video-2: 0.2xxx
video-3: 0.2xxx
video-4: 0.2xxx
video-5: 0.2xxx

In my app I check, how close the values are to 1 to determine if a match is valid. So at the end, I would need a output like this:

video-2: 0.95
video-3: 0.92

My question is now which kind of data format or network would be the right one to solve this?

I am facing a problem where HTML file is not converted into PDF. Below are the details.

1. Size of HTML file is 31MB
2. My HTML file contatins tables and rows(approx. 4 lacs rows)
3. I am using Pupeteer (version 19.6.0) library
4. This is my code

(async () => {
              const browser = await puppeteer.launch({ignoreHTTPSErrors: true});
              const page = await browser.newPage();
              const html = fs.readFileSync(path.join(__dirname , 'test.html'), 'utf-8');
              await page.setContent(html, { waitUntil: 'domcontentloaded' });
              const pdf = await page.pdf({
                                          path: 'report.pdf',
                                          margin: { top: '100px', right: '50px', bottom: '100px', left: '50px' },
                                          printBackground: true,
                                          format: 'A4',
                                          displayHeaderFooter: true,
                                          pageRanges: "",
                                         timeout:0,
                                        });

              await browser.close();
              })();

5. I am getting error at ‘await page.pdf() line. and the error : Unhandled Rejection at: Promise

EXPECTATIONS:
PDF should be generate for huge HTML File

so please help me.
Thanks in advance.

we need equilibrium arrows in the project, so i am curious to know is it possible to create them using cytoscape.js (https://i.stack.imgur.com/a6w9P.png)

Is it possible to set a form input type using a prop?

The below does not seem to work, any others ways to do this?

For example

<script setup>

defineProps({
    InputType: String,
    InputId: String,
    InputLabel: String,
    InputPlaceholder: String,
})

</script>

<template>

<div class="ml-6 mt-5 mr-6 mb-5 lg:w-1/2">
    <label :for="InputId" class="block text-sm font-medium leading-6 text-gray-900">{{InputLabel}}</label>
    <div class="mt-2">
        <input :type="InputType" :id="InputId" class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset     focus:ring-pink-600 sm:text-sm sm:leading-6" v-bind:placeholder="InputPlaceholder">
    </div>
</div>


</template>

I’m trying to make an easter egg for Pi Day but it keeps failing. Here’s what I have so far, and what I’m trying to achieve.

The JS code:

var datebois = new Date();
if (datebois.getMonth() = "Mar") and (datebois.getDate() = 14) {
  document.getElementById("pidaycheck").innerHTML = "Happy Pi Day Bro!";
}

The HTML code:

<p id="pidaycheck">Waiting...</p>

I want it so every March 14 (Today) it changes the “Waiting…” text to say “Happy Pi Day Bro!”, but it keeps giving me error messages.

I’m using python selenium to get some values from the TradingView chart. I would like to check if the element in the picture – this is a popup timer, which pops up as the candle is being closed – is present or not and do some action based on it.

The problem is (up to my knowledge) that this element is provided (poped up) by some Javascript function and NOT attached to the DOM model, at least I didn’t find it via some findElement method.

I also tried out the following – because we know, where in the x,y position, this element should be, to seach for it via below javascript function:

def elements_fromViewport(self, webDriver: WebDriver, webElement: WebElement) -> list:
    exScript = ("var elem = arguments[0],                   " +
                "  box = elem.getBoundingClientRect(),      " +
                "  cx = box.left + box.width / 2,           " +
                "  cy = box.top + box.height / 2,           " +
                "  es = document.elementsFromPoint(cx, cy); " +
                "return es;                                 ")
    return webDriver.execute_script(exScript, webElement)

And this also didn’t give me this element – it might be, that I used the wrong startup element (with wrong position x,y).

How can I find element in the picture via selenium webdriver?
Thanks for your thoughts, answers.

Peterenter image description here

Please see above description

I’d like to remove rows from table that contains an empty cell using javascript, this table is loaded in a partial view (modal view). I tried a few javascript codes, but since i am a new at javascript i am unable to understand why those code aren’t doing the task. This is one of the codes i used:

    @model managemnet.Models.Department

@{
    ViewData["Title"] = "_DetailDepartmentPartialView";
}
<div class="modal fade" role="dialog" tabindex="-1" id="@("DetailDepartment-"+Model.DepId)" aria-labelledby="DetailDepartmentLabel" aria-hidden="true" >
    <div class="modal-dialog role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Department</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close" onclick="javascript:window.location.reload()">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="col-md-6">
                    <dl class="row">
                                              
                         ..........

                        <dt class="col-sm-3">
                            @Html.DisplayNameFor(model => model.Employees)

                        </dt>
                        <dd class="col-sm-10">


                        </dd>

                    </dl>
                </div>
                    <div class="col-12 ">
                        <table class="table table-striped">
                            <thead>
                                <tr>
                                    
                                    <th>Employee name</th>
                                    <th>Profession</th>
                                    <th>Phone</th>
                                </tr>
                            </thead>
                            <tbody>
                                @for (int i = 0; i < Model.Employees.Count; i++)
                                {
                                <tr>
                                    
                                    <td>
                                        <input asp-for="@Model.Employees[i].EmpName" class="form-control-plaintext" readonly />
                                    </td>
                                    <td>
                                        <input asp-for="@Model.Employees[i].Profession" class="form-control-plaintext" readonly />
                                    </td>
                                    <td>
                                        <input asp-for="@Model.Employees[i].Phone" class="form-control-plaintext" readonly />
                                    </td>
                                </tr>
                                }
                            </tbody>
                        </table>
                    </div>                    
            </div>                
        </div>
    </div>
</div>

<script>        
    $(function () {
        const cells = document.querySelectorAll('td');
        const emptyCells = Array.from(cells).filter(cell => cell.innerHTML === '');
        emptyCells.forEach(cell => cell.parentNode.remove());
    });        
</script>

This script is not removing the rows with empty cell, any suggestions?

Hi im new to developing react native applications. I would like to ask for your opinions about some best practices to use in securing data in a React Native application from the most basic to some of the complicated ones.

PS* Im using Expo.

I have a mainArray and data array:

const mainArray = [
  {
    name: 'Name 1',
    values: [
      {
        key: 'A',
        value: 0,
      },
      {
        key: 'B',
        value: 0,
      },
                {
        key: 'C',
        value: 0,
      },
    ],
  },
  {
    name: 'Name 2',
    values: [
      {
        key: 'D',
        value: 0,
      },
      {
        key: 'E',
        value: 0,
      },
                {
        key: 'F',
        value: 0,
      },
    ],
  },
];

    const data = [
  {
    key: 'A',
    value: 4,
  },
  {
    key: 'C',
    value: 6,
  },
  {
    key: 'E',
    value: 1,
  },
];

I want to update each value in mainArray by value present in data array (based on ‘key’ property).
I was trying to use lodash filter and find but it doesn’t work fine for me.
Here is the fiddle link:
https://jsfiddle.net/w8yuvgqn/

enter image description here

with help of this method i am able to create new meeting.

Office.context.mailbox.displayNewAppointmentFormAsync({ requiredAttendees: ["[email protected]"] as any, optionalAttendees: ["[email protected]"] as any, start: new Date(newStartTime), end: new Date(newEndTime), location: null, subject: meetingSchedule.meetingTitle, resources: ["[email protected]"], body: https://meet.google.com/${meetingSchedule.caseName}-${meetingSchedule.date} });

and here the code for the removing the signature part from the meet but its not working i have tried more method like this from the outlook office addin js

Office.context.mailbox.item.body.setSignatureAsync("", { coercionType: "html" });

in image i have poited which which part i am trying to remove

need some help on this sir,

I’m using react-data-table-component and react-data-table-component-extensions.
also, I imported the index.css for the component-extension

import DataTable from "react-data-table-component";
import DataTableExtensions from "react-data-table-component-extensions";
import "react-data-table-component-extensions/dist/index.css";

the code for dataTable in jsx file is below

<DataTableExtensions
        columns={column}
        data={parameters}
        print={false}
        export={false}
        filterPlaceholder="Filter Parameter"
      >
        <DataTable
          title="Parameter List"
          columns={column}
          data={parameters}
          pageSize={5}
          pagination
          fixedHeader
          fixedHeaderScrollHeight="450px"
          highlightOnHover
          actions={<AddParameter loadParameters={loadParameters} />}
        />
      </DataTableExtensions>

my problem is on the display side, the font doesn’t match the existing background of the app. It is so dark.

I wanted to make the text to the color white. but don’t know how.
I tried locating the index.css which I am importing and tried to manipulate
some css there but No effect. tried also removing all the CSS inside the index.css
also no effect.

Am I editing the wrong css file or this is not editable?

I’m trying to create app with React JS which will integrate with Fedex API, but when i send fetch request i receive CORS error. When i sent from postman – no problems.

First of all i’m trying to receive access token from FedEx API. I make everything like in documentation.

This is part of my code where create fetch request.

const checkResponse = (res) => {
    if (res.ok) {
      return res.json();
    }
    return Promise.reject(`Ошибка ${res.status}`);
  }


export const getToken = () => {
    return fetch("https://apis-sandbox.fedex.com/oauth/token", {
        method: 'POST',
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: "sectetdata",
      })
        .then(checkResponse)
        .catch((err) => {
          console.log(err);
        });
}

And this this is part of the code where i try to call my fetch request.

      const getAccessToken = () => {
        api.getToken()
        .then((token) =>{
            console.log(token);
        })
        .catch((err) => console.log(err));
    }

CORS error

Y tried to use mode: "no-cors", but it doesn’t helps me. I didn’t receive CORS error, but in this case server didn’t send me any data. In response from server i receive something like this
Responce from server

May be someone can help me?

{
“id_user” : 2,
“id_meja” : 6,
“nama_pelanggan” : “joko”,
“detail” : [
{
“id_menu” : 2,
“qty” : 1
},
{
“id_menu” : 1,
“qty” : 2
}
]
}

If I have an api with a data request like that, how do I create a form in react js?
(request details have no limit, can be added any amount)

there is a row form that can be added if we want to add details

I would like to keep track of page views count for each page that a user visits so I can only fire tags (via GTM) if the page view count is < 2.

This is the structure of my desired localStorage:

Key: {PageTitle1: pageViewCount, PageTitle2: pageViewCount, PageTitle3: pageViewCount}

And this is an example of how it could look like in reality:

PageViewCounter: {Home Page: 8, Blog: 64, Contact Page: 2}

On each page it loads, it would either increment the numerical value of the counter (if the Page Name already exists in the localStorage) or append the new page with value of 1 to the object (if the Page Name doesn’t yet exist in the localStorage).

I have tried:

//If it doesn't, create it and set it to 1
  else if (!localStorage.PageViewCounter) {
    console.log('PageViewCounter does not exist, setting to 1...');
    PageViewCounter = 1;
    
    var PageTitle = document.title;  
    PageAndCounter = {
      PageTitle: PageViewCounter
    }
    
    localStorage.setItem('PageViewCounter', JSON.stringify(PageAndCounter));
}

But the PageTitle doesn’t get the value from the variable but rather saves it as PageTitle: 1.
I have also tried putting it into an array like this:

PageAndCounter = {
    [PageTitle: PageViewCounter]
}

But I am using Google Tag Manager and it won’t allow me to use this feature.

Error at line 6, character 3: This language feature is only supported
for ECMASCRIPT_2015 mode or better: const declaration.

If this isn’t possible, I will just create a new localStorage entry for each page visited, but I assume that’s not a good practice?

I have such an array

var recipe = [
     {
     "ingredients":["potato", "tomato", "salt/pepper"], 
     "step" : 1,
     },
     {
     "ingredients":["Brendon Eich's hair", "pasta", "water/sauce"], 
     "step" : 2,
     },
]

I want to get this

var recipe = [
     {
     "ingredients":["potato", "tomato", "salt", "pepper"], 
     "step" : 1,
     },
     {
     "ingredients":["Brendon Eich's hair", "pasta", "water", "sauce"], 
     "step" : 2,
     },
]

////////////////////////////////////////////////

pls help me 🙂