Category: javascript

I am using RecordRTC library in my project in nextjs, but it is showing error node_modules/recordrtc/RecordRTC.js (1586:0) @ eval

TypeError: Cannot set property navigator of #<Object> which has only a getter

My code is

 navigator.mediaDevices.getUserMedia(mediaConstraints).then((stream)=>{
          var options:{
            mimeType:"audio/wav",
            numberOfAudioChannels:1|2,
          } = {
            mimeType: "audio/wav",
            numberOfAudioChannels: 1,
            };
            let record = new RecordRTC(stream,options);
            record.startRecording();
            setRecordRtc(record);
        });

where mediaConstraints is

 let mediaConstraints = {
      video: false,
      audio: true
      };

I went to RecordRTC.js at 1586 line and i got

 global.navigator = {
        userAgent: browserFakeUserAgent,
        getUserMedia: function() {}
    };

I don’t know what wrong i am doing, please help me.
Also i am doing client render in nextjs to render this component to use navigator, still i am getting this error.

I have tried looking for solution on its github lib . Also tried to see if there is error in this library with nextjs but no luck so far.

I’m using react to send date to server but there is an error

{message: ‘Invalid date format. Date should be in the format YYYY-MM-DD.’, field: ‘from’}

I’m completely sure the data is valid and here is the code

   const handleFilter = async (e) => {
    e.preventDefault();
    console.log(fromDate);
    console.log(toDate);
    try {
      const date = {
        from: dayjs(fromDate).format("YYYY-MM-DD"),
        to: dayjs(toDate).format("YYYY-MM-DD"),
      };
      console.log(date);
      const res = await newRequest.get("/analysis", date);
      console.log(res);
    } catch (error) {
      console.log(error);
    }
  };

and there is the console

I’m tried a lot of answers like
JSON.stringify(date);
before sending
nothing work !!!

I have a multiple choice question, where the respondent can choose between two images, which are next to each other. On the next page the answer choices should show in the exact same way, preferably with the selected radio button (where they can not change it anymore) as I want the respondents to ask further questions about their choice. The multiple choice question, and the next page with the answer choices and further questions are in the same block.

I already tried to pipe it from the previous question, but this way the answer choices (images) are comma seperated and below each other.

Thus I want to store the respondents’ responses in an embedded data variable and then display the same answer choices with their responses remaining selected again.

I tried to do it with Javascript but I could not figure it out as I am new to it:

• First I created an embedded data variable at the very top of the survey flow called “choice”.

• Then I added this code to the question (Q1):

   Qualtrics.SurveyEngine.addOnPageSubmit(function(){
  
   var answer = this.questionContainer.querySelector(".q-checked")
  
   Qualtrics.SurveyEngine.setEmbeddedData("choice", answer);
   });
  

• and then I just inserted the embedded data “choice” as piped text in Q2, but it shows nothing in the survey, it is just a blank space.

Note: I am using the ‘simple’ layout.

I’m currently working on setting up a chatroom for a project. I came across some excellent code for the chatroom setup and tried importing it to Vercel. Initially, I uploaded it without any adjustments. Later, I added a vercel.json file to ensure proper configuration. However, I’m now facing a 404 error.

I attempted to resolve the 404 error by modifying the project name in the vercel.json file, but unfortunately, the issue persisted.

Here’s the expected configuration:
Ideal

However, the actual output remains the same:
Output

You can find the repository here

Thank you for taking the time to review and assist. Your help is greatly appreciated.

I’m using a simple ScriptTransformer <script> in my db-data-config.xml DataImportHandler. I’d like to decode htmlentities and found I should be using he module. Downloaded the zip and extracted in conflib. This is part of my script:

var he = require('./lib/he-master/he.js');
function removeSpecialCharacters(text) {
     if (typeof text !== 'string') {
          return text;
     }
     return he.decode(text);
}

But I get the error:

javax.script.ScriptException: ReferenceError: "require" is not defined in <eval>

Why does nothing work out of the box (like JS require function) and how do I solve this?

It’s cheaper to pay than use open source because nothing works out of the box. It takes ages of troubleshooting ($) before something with a little bit of an advanced functionality works.

also tried

eval(readFile('./lib/he-master/he.js');

But it’s the same story: nothing is included out of the box with Solr:

javax.script.ScriptException: ReferenceError: "readFile" is not defined in <eval>

I want users to be able to add CSS in one field and JavaScript in another field in my react app. I assume the answer might be textarea, but I am unsure of the correct input type for this, and to my surprise I can’t seem to find anywhere that clarifies this.

I have a textarea field, but there are many unwanted characters that could cause issues, such as n and t, etc. Here is an example:

If I want to enter this CSS:

.el {
color: red;
font-size: 12px;
}

The value of the textarea input can be similar to this:

".el {ncolor: red;nfont-size: 12px;nn"

How can this be overcome so the values are not polluted? Here is my example react code:

import React, { Component, useState } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';
import useForm from 'react-hook-form';

function createArrayWithNumbers(length) {
  return Array.from({ length }, (_, k) => k + 1);
}

function YourForm() {
  const { register, handleSubmit, watch, errors } = useForm()
  const onSubmit = data => {
  }; // your form submit function which will invoke after successful validation

  console.log('values: ', watch()) // you can watch individual input by pass the name of the input
  return (
    <form onSubmit={handleSubmit(onSubmit)}> 
      {/* include validation with required field or other standard html validation rules */}
      <textarea
        type="text"
        name="exampleRequired"
        ref={register({ required: true, maxLength: 10 })}
      />
      {/* errors will return true if particular field validation is invalid  */}
      {errors.example && '<span>This field is required</span>'}
      <input type="submit" />
    </form>
  )
}

class App extends Component {
  render() {
    return (
      <div>
        <YourForm />
      </div>
    );
  }
}

render(<App />, document.getElementById('root'));

I have tried:

1. Copying and pasting in the field as plain text
2. Creating a function that replaces the default paste with paste as plain text
3. Cleaning the inputs of unwanted characters functionally, although this seems to have too many edge cases to be accurate
4. Use the minify package from csso, but it can’t handle some strange unicode characters (i.e. pasted in from Apple notes)

Sometimes the value is also like this (e.g. when pasting into the field when copied from Apple notes):

.imgtest {
 max-height: 1000px;t
 border-radius: 8px;t
 box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);t
 filter: grayscale(50%) invert(1);n}nnn"

Which shows like this in VSC at least anyway:

“The character U+2028 “
” could be confused with the ASCII character U+0020, which is more common in source code.”

I will get newjson_data which will have below data from backend.

1. alert will have TimeStamp —> Epochformat,Type —> meeting,sso,api,account. Need to calculate count of each and every Type meeeting,sso,api,account and add it to the alert data –> Sent it to Metric Chart
2. summary will have Acc, Sev, Summary, TimeStamp —> Using this data, I need create Table –> Sent it to Table Chart
3. acc will have ACC_ID, TimeStamp, Type —> using this data, I need create TimeSeries, Also calculate count based on the TimeStamp and add it to the acc data

I am able to see data in the console under const filterAPICall but not able render it

mport "@elastic/eui/dist/eui_theme_light.css";
import ReactDOM from "react-dom";
import React, { Fragment } from "react";
import createCache from "@emotion/cache";
import {
  EuiProvider,
  EuiSpacer,
  EuiTabbedContent,
  EuiTitle,
  EuiText,
} from "@elastic/eui";

import { Header } from "./components/Header";
import { Datetime } from "./components/Datetime";
import { MetricChart } from "./components/MetricChart";
import { TimeChart } from "./components/TimeChart";
import { TableChart } from "./components/TableChart";
import axios from "axios";

const cache = createCache({
  key: "codesandbox",
  container: document.querySelector('meta[name="emotion-styles"]'),
});
cache.compat = true;

//const data = require("./alert_collection1.json");
//const newjson_data = require("./new_json_backend.json");
//console.log("New data is :", newjson_data.data);
//console.log("Old data is :", data);
let newjson_data;
//API call
const filterAPICall = (startTime, endTime, keyword) => {
  console.log("Datetime variables are", startTime, endTime);
  //let baseURL = 'http://127.0.0.1:5000/getdata?startTime=${startTime}&endTime=${endTime}&keyword=${keyword}';
  let baseURL = `https://XXX.XXX:8000/api/data?start=${startTime}&end=${endTime}&keyword=${keyword}`;
  const headers = {
    "Access-Control-Allow-Origin": "*",
    "Access-Control-Allow-Methods": "POST, GET, PUT",
    "Access-Control-Allow-Headers": "Content-Type",
  };
  axios
    .get(baseURL, {
      headers,
    })
    .then((response) => {
      // setPost(response.data);
      newjson_data = response.data;
      console.log("API call data is:", newjson_data);
      let meetingseries = {};
      let accountseries = {};
      let ssoseries = {};
      let apiseries = {};
      let tempsummary = [];
      let tempstatistics = {};
      if (newjson_data) {
        for (let i = 0; i < newjson_data.data.length; i = i + 1) {
          let keys = Object.keys(newjson_data.data[i]);
          //Create data set for Meeting alerts.
          if (
            keys.includes("alert") &&
            newjson_data.data[i]["alert"]["Type"] === "meeting"
          ) {
            let temp = meetingseries;
            if (
              Object.keys(newjson_data.data[i]["alert"]).includes("TimeStamp")
            ) {
              //let datetime =
              //  newjson_data.data[i]["alert"]["Date"] +
              //  "T" +
              //  newjson_data.data[i]["alert"]["Time"];
              //let epochtime = Number(new Date(data[i]["alert"]["Day"] + "T" + data[i]["alert"]["Time"]));
              let epochTime = newjson_data.data[i]["alert"]["TimeStamp"];
              let datetime = new Date(epochTime * 1000).toISOString();
              if (Object.keys(temp).length === 0) {
                temp[datetime] = {};
                temp[datetime] = newjson_data.data[i]["alert"];
                temp[datetime]["count"] = 1;
                temp[datetime]["datetime"] = datetime;
              } else {
                if (Object.keys(temp).includes(datetime)) {
                  temp[datetime]["count"]++;
                } else {
                  temp[datetime] = newjson_data.data[i]["alert"];
                  temp[datetime]["count"] = 1;
                  temp[datetime]["datetime"] = datetime;
                }
              }
              meetingseries = temp;
              //console.log("meetingseries-->", meetingseries);
            }
          }
          //Create data set for Account alerts.
          if (
            keys.includes("alert") &&
            newjson_data.data[i]["alert"]["Type"] === "account"
          ) {
            let temp = accountseries;
            if (
              Object.keys(newjson_data.data[i]["alert"]).includes("TimeStamp")
            ) {
              let epochTime = newjson_data.data[i]["alert"]["TimeStamp"];
              let datetime = new Date(epochTime * 1000).toISOString();
              //let epochtime = Number(new Date(data[i]["alert"]["Day"] + "T" + data[i]["alert"]["Time"]));
              if (Object.keys(temp).length === 0) {
                temp[datetime] = {};
                temp[datetime] = newjson_data.data[i]["alert"];
                temp[datetime]["count"] = 1;
                temp[datetime]["datetime"] = datetime;
              } else {
                if (Object.keys(temp).includes(datetime)) {
                  temp[datetime]["count"]++;
                } else {
                  temp[datetime] = newjson_data.data[i]["alert"];
                  temp[datetime]["count"] = 1;
                  temp[datetime]["datetime"] = datetime;
                }
              }
              accountseries = temp;
              //console.log("accountseries-->", accountseries);
            }
          }
          //Create data set for SSO alerts.
          if (
            keys.includes("alert") &&
            newjson_data.data[i]["alert"]["Type"] === "SSO"
          ) {
            let temp = ssoseries;
            if (Object.keys(newjson_data.data[i]["alert"]).includes("Date")) {
              let epochTime = newjson_data.data[i]["alert"]["TimeStamp"];
              let datetime = new Date(epochTime * 1000).toISOString();
              //let epochtime = Number(new Date(data[i]["alert"]["Day"] + "T" + data[i]["alert"]["Time"]));
              if (Object.keys(temp).length === 0) {
                temp[datetime] = {};
                temp[datetime] = newjson_data.data[i]["alert"];
                temp[datetime]["count"] = 1;
                temp[datetime]["datetime"] = datetime;
              } else {
                if (Object.keys(temp).includes(datetime)) {
                  temp[datetime]["count"]++;
                } else {
                  temp[datetime] = newjson_data.data[i]["alert"];
                  temp[datetime]["count"] = 1;
                  temp[datetime]["datetime"] = datetime;
                }
              }
              ssoseries = temp;
              //console.log("ssoseries-->", ssoseries);
            }
          }
          //Create data set for API alerts.
          if (
            keys.includes("alert") &&
            newjson_data.data[i]["alert"]["Type"] === "API"
          ) {
            let temp = apiseries;
            if (Object.keys(newjson_data.data[i]["alert"]).includes("Date")) {
              let epochTime = newjson_data.data[i]["alert"]["TimeStamp"];
              let datetime = new Date(epochTime * 1000).toISOString();
              //let epochtime = Number(new Date(data[i]["alert"]["Day"] + "T" + data[i]["alert"]["Time"]));
              if (Object.keys(temp).length === 0) {
                temp[datetime] = {};
                temp[datetime] = newjson_data.data[i]["alert"];
                temp[datetime]["count"] = 1;
                temp[datetime]["datetime"] = datetime;
              } else {
                if (Object.keys(temp).includes(datetime)) {
                  temp[datetime]["count"]++;
                } else {
                  temp[datetime] = newjson_data.data[i]["alert"];
                  temp[datetime]["count"] = 1;
                  temp[datetime]["datetime"] = datetime;
                }
              }
              apiseries = temp;
              //console.log("apiseries-->", apiseries);
            }
          }
          //Creating summary data [2nd part] from json
          else if (keys.includes("summary")) {
            let temp = newjson_data.data[i]["summary"];
            let epochTime = newjson_data.data[i]["summary"]["TimeStamp"];
            let datetime = new Date(epochTime * 1000).toISOString();
            temp["datetime"] = datetime;

            //temp["id"] = newjson_data.data[i]["_id"]["$oid"];
            tempsummary = [...tempsummary, temp];
          }
          //Creating statistics data [1st part] from json
          else if (keys.includes("acc")) {
            let temp = tempstatistics;
            //console.log(temp);
            //Initialising all values to 0 initially
            if (Object.keys(temp).length === 0) {
              //console.log("temp", newjson_data.data[i]);
              temp["Meeting"] = {};
              temp["Meeting"]["count"] = 0;
              temp["account"] = {};
              temp["account"]["count"] = 0;
              temp["API"] = {};
              temp["API"]["count"] = 0;
              temp["SSO"] = {};
              temp["SSO"]["count"] = 0;
              //temp[newjson_data.data[i]["acc"]["Type"]]["count"] = 1;
            } else {
              if (
                Object.keys(temp).includes(newjson_data.data[i]["acc"]["Type"])
              ) {
                temp[newjson_data.data[i]["acc"]["Type"]]["count"]++;
              } else {
                temp[newjson_data.data[i]["acc"]["Type"]] = {};
                temp[newjson_data.data[i]["acc"]["Type"]]["count"] = 1;
              }
            }
            tempstatistics = temp; //Stores staistsics data as dictionary with the count of meeting, Account, API, SSO related alerts.
            //console.log("te--<", tempstatistics);
          }
        }
      }
      console.log("Meeting series is: ", meetingseries);
      console.log("Account series is:", accountseries);
      console.log("SSO series is:", ssoseries);
      console.log("API series is:", apiseries);

      let Barchartdata = [];
      const meetinglen = Object.keys(meetingseries).length;
      const accountlen = Object.keys(accountseries).length;
      const ssolen = Object.keys(ssoseries).length;
      const apilen = Object.keys(apiseries).length;

      //Combining all the alert data related to bar chart into one single dictionary.
      for (let i = 0; i < meetinglen; i++) {
        let tempMeetingarray = [];
        tempMeetingarray["DateTime"] =
          Object.values(meetingseries)[i]["datetime"];
        tempMeetingarray["Countbar"] = Object.values(meetingseries)[i]["count"];
        tempMeetingarray["Type"] = "Meeting";
        Barchartdata[i] = tempMeetingarray;
      }
      for (let i = 0; i < accountlen; i++) {
        let tempAccountarray = [];
        tempAccountarray["DateTime"] =
          Object.values(accountseries)[i]["datetime"];
        tempAccountarray["Countbar"] = Object.values(accountseries)[i]["count"];
        tempAccountarray["Type"] = "account";
        Barchartdata[i + meetinglen] = tempAccountarray;
      }
      for (let i = 0; i < ssolen; i++) {
        let tempSSOarray = [];
        tempSSOarray["DateTime"] = Object.values(ssoseries)[i]["datetime"];
        tempSSOarray["Countbar"] = Object.values(ssoseries)[i]["count"];
        tempSSOarray["Type"] = "SSO";
        Barchartdata[i + meetinglen + accountlen] = tempSSOarray;
      }
      for (let i = 0; i < apilen; i++) {
        let tempAPIarray = [];
        tempAPIarray["DateTime"] = Object.values(apiseries)[i]["datetime"];
        tempAPIarray["Countbar"] = Object.values(apiseries)[i]["count"];
        tempAPIarray["Type"] = "API";
        Barchartdata[i + meetinglen + accountlen + ssolen] = tempAPIarray;
      }
      //console.log("Bar chart data is:", Barchartdata);
      //console.log("Summary data is:", tempsummary);
      //console.log("Metric data is:", tempstatistics);
    })
    .catch((error) => {
      console.log(error);
    });
};

/*console.log("Whole time series is: ",temptimeseries);
console.log("Summary data is: ",tempsummary);
console.log("Statistics data is: ", tempstatistics);
console.log("Time series data is: ", Object.values(temptimeseries)[0]['count']);
console.log("Length is : ", Object.keys(temptimeseries).length);*/

//console.log(tempdata);

const Demo = () => {
  const tabs = [
    {
      id: "web--id",
      name: "WEB monitoring ",
      content: (
        <Fragment>
          <EuiProvider cache={cache}>
            <Datetime filterAPICall={filterAPICall} />
            <EuiSpacer size="xxl" />
            <MetricChart tempstatistics={tempstatistics} />
            <TimeChart Barchartdata={Barchartdata} />
            <EuiSpacer size="xxl" />
            <TableChart tempsummary={tempsummary} />
          </EuiProvider>
          ,
        </Fragment>
      ),
    },
    {
      id: "ZR--id",
      name: "ZR-CRC Monitoring",
      content: (
        <Fragment>
          <EuiSpacer />
          <EuiTitle>
            <h3>ZR-CRC Monitoring</h3>
          </EuiTitle>
          <EuiSpacer size="xxl" />
          <EuiText>Please add the required components in this tab.</EuiText>
        </Fragment>
      ),
    },
  ];

  return (
    <EuiTabbedContent
      tabs={tabs}
      initialSelectedTab={tabs[0]}
      autoFocus="selected"
      onTabClick={(tab) => {
        console.log("clicked tab", tab);
      }}
    />
  );
};

ReactDOM.render(
  <EuiProvider cache={cache}>
    <Header />
    <Datetime filterAPICall={filterAPICall} />
    {/* only render if we have data */}
    {newjson_data && (
      <Fragment>
        <MetricChart tempstatistics={tempstatistics} />
        <TimeChart />
        <TableChart />
      </Fragment>
    )}
  </EuiProvider>,
  document.getElementById("root")
);

Need to fix rendering issue

I want to make a web crawler, where it takes memes from giphy and shows it on a html page but i couldn’t get the api working so does anyone have a solution to this problem??

I tried to use Giphy API but it didn’t work 🙁
I also tried to use Giphy Embed Code, it worked but, it only ouputed the urls of the meme rather than the image/gif

I tried to fix it but it didn’t work out, then i even tried to use chat-gpt to see if there was any errors but tht also didn’t work….

i didn’t go more than this…..

All the images are not displaying for my entire website when i am viewing in mobile phone , only the images called dynamically are showing in mobiles. i dnt know why this is happeing only in mobiles. I can see all the images in desktop view. When i used to see mobile inspect view and inspected on one of the images. its showing script tag of cloudflare.com/mirage2.min.js and has been added a style display:none; visibility:hidden automatically with data-cfsrc=”images/logo.png” and data-cfsrc=”width:200px”. and the original img tag with src is added inside tag. plz help me to view the images in mobile phone. its really very urgent for me.

url of my website: https://beta.destina1.com/#/

Plz help me to display the images in mobile view.

class A {
  constructor() {
    this.x = 1;
  }
}
class B extends A {
  constructor() {
    super();
    this.x = 2;
    super.x = 3;
    console.log(super.x); // undefined
    console.log(this.x); // 3
  }
}
let b = new B();

Why is assigning a value to super in the constructor in the ES6 standard? It is assigning a value to an instance of the class.
Why is super.x undefined while this.x is 3

Everyone take a look for me, thank
I sat all day searching and checking for errors but couldn’t
Hope everyone can help me, thank you
im use vision 8.2.2
I have tried many times but it doesn’t work. I hope you can share and help me find the error
Add any details you missed and read through it again. Now is a good time to make sure that your title still describes the problem!

[part of Gradient Descent algorithm]
(https://i.stack.imgur.com/iTBz6.png)

this.updateWeights = function() {
 
  let wx;
  let w_deriv = 0;
  let b_deriv = 0;

  for (let i = 0; i < this.points; i++) {
    wx = this.yArr[i] - (this.weight * this.xArr[i] + this.bias);
    w_deriv += -2 * wx * this.xArr[i];
    b_deriv += -2 * wx;
  }
  
  this.weight -= (w_deriv / this.points) * this.learnc;
  this.bias -= (b_deriv / this.points) * this.learnc;
}
            

explain this part please!!

-2 * wx * this.xArr[i]

this part is induced….?

how to induce by math formula….

I’m making a project where i’m supposed to have an numpad to login users to their account. But i can’t really understand how I’m going to do that. The numpad from start displays “Enter your Account nnumber!”, and I want to make it understand that when it has got the correct account number, it should say “enter pin”. And if the pin is also correct it should log in and show the rest av the account. I’ve tried different stuff but i really cant make it do as i want. So if any of you got any help for me, I would be very greatful. I’m very novice to JS so the answer maybe is very simple but i don’t know.

type here

const users = [
    { accountNumber: '1337', pin: '1234', name: 'Mr Ibrahimovic', balance: 1000 },
    { accountNumber: '7331', pin: '5678', name: 'Mr Cooper', balance: 1000}
];

let islogin = false;
let whoIsLogin = -1;

let account = document.querySelector('.account');
account.style.display = 'none'

let bankomat = document.querySelector('.bankomat')

document.querySelector('.btn_login')
.addEventListener('click', () => {


    bankomat.style.display = 'none'
    account.style.display = 'block'

})

const screen = document.getElementById('screen');

const buttons = document.querySelectorAll('.btn');
console.log(buttons);

let numbers = '';
buttons.forEach(btn => {
    btn.addEventListener('click', (e) =>{
        numbers = numbers + e.target.value;
        screen.innerHTML = numbers;
    });
    
});

please find attached the screenshot of the error

enter image description here

enter image description here

enter image description here

enter image description here

…………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………..

I am trying to create a custom select component that can accept options as HTML like this:

<MySelect v-model='value'>
  <MyOption value='1'>Option 1</MyOption>
  <MyOption value='2'>Option 2</MyOption>
</MySelect>

I have been looking through numerous websites and youtube videos, but have found nothing that achieves this. In all sources they pass options as an array in MySelect props. But I need more customization of options, such as adding an icon or applying styles to text. So, I would appreciate if you could share your ideas of how this can be implemented!

P.S. MySelect component should not contain native select and option tags. The whole purpose of creating a custom select component is for design customization.