Category: javascript

Im trying to create a custom carousel with @trendyol-js/react-carousel but running im missing some properties in the but i dont know how to structure the code to solve it.

error: Type '{ leftArrow: Element; rightArrow: Element; }' is missing the following properties from type 'CarouselProps': children, show, slide

const CustomCarousel: React.FC = () => {
  const classes = useStyles();

  return (
    <Carousel
      leftArrow={
        <IconButton className={classes.arrow}>
          <ArrowBackIos />
        </IconButton>
      }
      rightArrow={
        <IconButton className={classes.arrow}>
          <ArrowForwardIos />
        </IconButton>
      }
    ></Carousel>
  );
};

i want to loop through an array elements and create an array of objects with its values.

below is the array example which comes from querying from an api.

const array = [
    "first",
    "second",
]

now i want to create an array of objects like below

const arr_obj = [
    {
         label: "first",
         value: "first",
     }
     {
         label: "second",
         value: "second",
      }
  ]

i have tried like below

const arr_obj = React.useMemo(() => {
    const output = arr.forEach(item => { //error
        return {
            label: item,
             value: item,
         }
     }, [arr]});

but this gives error arr could be possibly undefined or null and also i think this is not the way to create an array of objects with label, value pairs from the array elements.

could someone help me with this. thanks.

I am trying to render a component which is in another folder called “Component” but the component are not getting render when importing them from this folder and when I am creating component in index.js it got render.Header not getting render and sometimes ChallengeOne not getting render
my code

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";

import Content from "./component/Content";
// import ChallengeOne from "./component/ChallengeOne";
import ChallengeTwo from "./component/ChallengeTwo";
// import ChallengeTwo from "./component/ChallengeTwo";
// import Page from "./component/Challenge Three/Page";
const Header=()=>{
  <>
  <h1>Reason I'm exicted to learn react</h1>
  </>
}
const ChallengeOne =()=>{
  return(
      <nav>
          <h1>DRY FRUIT CENTER</h1>
          <ul>
              <li>Price</li>
              <li>About</li>
              <li>Contact</li>
          </ul>
      </nav>
  )
}
ReactDOM.render(
  <React.StrictMode>
    <ChallengeOne/>
    <ChallengeTwo/>
    <Content />
    <Header/>
   </React.StrictMode>,
  document.getElementById("root")
);

I am trying to clone an element to reset the animation. I’ve used this bit of code before and it worked perfectly but now it isn’t working I have no idea why not. Here is the code:

var justlike = theoldone.cloneNode(true); theoldone.parentNode.replaceChild(justlike, theoldone);

theoldone is a const for the element I want to clone.

I am developing a Node-JS server with some custom behavior for video streaming.

Server is exposing a file as stream on the root path localhost:3000/ and listens for range requests. On the frontend there is a html5 video player which I have noticed by logging, request from in range values current-byte to total-bytes when you scrub on the timeline.

For now I am just piping the file-stream into the response.

My scenario requires me to query another process about the file in question and only pipe down the part of file that it allows me to. Now my question is if the player requests for example from byte 0 to 1000 and I respond with 0 to 100 and I set the headers like below, would the player understand that it didnt get the full data it wanted and make any subsequent requests.

 const range = fromOtherProcess(); // the other process told me this range is allowed
 response.statusCode = 206; // parital content
 response.setHeader('Content-Length', range.end - range.start + 1);
 response.setHeader('Content-Range', 'bytes ' + range.start + '-' + range.end + '/' + size);

Can you access and change a class member of a grandparent class without using get-set and Reflect.set?

I tried this code but it doesn’t seem to work:

class Grandparent{
  classMember = null;//Define the class member
  constructor(){
    this.classMember = true;
  }
}

class Parent extends Grandparent{
  constructor(){
    super();
  }
}

class Child extends Parent{
  constructor(){
    super().classMember = false;
  }
}

Is there any way you can do this without tampering with the parent class or grandparent class, or i.e, access and set the class member(s) inside the child class?

Response data 2021-12-20T08:54Z

This date is 3 hours ahead of the date I requested.
2021-12-20T08:54Z

the value i want 2021-12-20 05:54

So I want to subtract 3 hours (-0300)

I have 2 arrays one is “searchEachIndex” and another one is “data”.

Based on “searchEachIndex” array i want to filter the “data” array. i.e,

Here in searchEachIndex array i have 123 value that matches with data array’s employeId.

should push the object into res array here { id: 2, employeId: 123 }, { id: 3, employeId: 123 }, If both values matches.

otherwise push the mismatching searchEachIndex values here 1234, 12 into another array i.e, noData array.

let searchEachIndex = [123, 1234, 12]

let data = [
{
  id: 1,
  employeId: 121
},
{
  id: 2,
  employeId: 123
},
{
  id: 3,
  employeId: 123
 }
];

let res=[];

let noData = [];

searchEachIndex.forEach(val => {
   data.map(item => {
      if(item.employeId === val) {
       res.push(item)
      }
   })
})

console.log('Both emp id and searchEachIndex value matched array', res);

consolelog('Ids not found array', noData);

I result I expected was Adithye. I knew other methods, but i would like to know why this method wont work.

var Person = {
    name:'Adithye',
    getName:function(){
        function xyz(){
            console.log(this.name);
        }
        xyz();
    }
}

Person.getName();

I created a multidimensional array using numjs and got this:
my input
my output
How can I display that multidimensional array in the same way they do in the numjs documentation (see below)?
official documentation input and output

I hope you are well.

I’m developing a web application by NodeJs and ReactJs. When I try to Login by formik with using axios, passportjs cannot redirect me to successLink even if my info are correct.
Gives me 404 not found.

When I don’t use formik and use regular html form passportjs works but this time I can’t use request.isAuthenticated() and I cannot manage users in react.

isAuthenticated() always gives me false in react “localhost:5001” but when I use nodejs “localhost:5000” it gives me true.

Thank you for your answers. Have a great day.

Node.js Backend

commonController.js

const login = async (req, res, next) => {
    
    // form request
    // let data = await req.body

    // axios request
    let data = await JSON.parse(Object.keys(req.body)[0])

    const _responsible = await Responsible.findOne({ email: data.email });
    console.log(_responsible)

    if (!_responsible) {
        passport.authenticate('local', {
            successRedirect: `${process.env.LOGIN_SUCCESS_URL}`,
            failureRedirect: `${process.env.LOGIN_FAIL_URL}1`,
        })(req, res, next)
    }
    else {
        if (_responsible && _responsible.isActive == true) {
            passport.authenticate('local', {
                successRedirect: `${process.env.LOGIN_SUCCESS_URL}`,
                failureRedirect: `${process.env.LOGIN_FAIL_URL}1`,
            })(req, res, next)
        }
        else if(_responsible && _responsible.isActive == false){
            passport.authenticate('local', {
                successRedirect: `${process.env.LOGIN_FAIL_URL}2`,
            })(req, res, next)
        }
    }
}

React

Login.js

{error && error == 1 ?
    <p style={{ color: "red" }}>{strings.loginError}</p> : null
}
{error && error == 2 ?
    <p style={{ color: "orange" }}>{strings.loginAuthorizationError}</p> : null
}

{/* FORMIK FORM */}

<Formik initialValues={{ email: "", password: "" }}
    validationSchema={loginValidationSchema}
    onSubmit={async (values) => {
        axios.post(`${process.env.REACT_APP_SERVER_URL}/login`, JSON.stringify(values))
            .then(response => console.log(response.data))
            .catch(err => console.log(err.message))
        values.email = "";
        values.password = "";
    }}
>
    {({ errors, touched }) => (
        <Form className='loginForm'>
            <Field className="loginFormField" name="email" type="email" placeholder={strings.formEmail} />
            {errors.email && touched.email ? (
                <div className='formErrorMessage'>{errors.email}</div>
            ) : null}
            <Field className="loginFormField" name="password" type="password" placeholder={strings.formPassword} />
            {errors.password && touched.password ? (
                <span className='formErrorMessage'>{errors.password}</span>
            ) : null}
            
            <button type="submit">{strings.submitForm}</button>
        </Form>
    )}
</Formik>

The error I got

We can render an image on a sphere as seen in the code below

Example: Create a glob out of world map

import * as THREE from 'https://cdn.skypack.dev/[email protected]';
const scene = new THREE.Scene();

      const camera = new THREE.PerspectiveCamera( 
        75, 
        window.innerWidth / window.innerHeight,
        0.1,
        1000 );

      const renderer = new THREE.WebGLRenderer();
      renderer.setSize( window.innerWidth, window.innerHeight );
      document.body.appendChild( renderer.domElement );

      const sphere = new THREE.Mesh(new THREE.
        SphereGeometry(5,50,50),new THREE.
        MeshBasicMaterial({
          map: new THREE.TextureLoader().load('./img/img1.jpg')
        })
        );
      scene.add( sphere );

      camera.position.z = 15;

      function animate() {
        requestAnimationFrame( animate );
        renderer.render( scene, camera );
      };

      animate();

I need to a video tag in html page to play a video in threejs VideoTexture

How do I do the same but with a video?

I have observable like this:

currentPage: 1
items: (6) [{…}, {…}, {…}, {…}, {…}, {…}]
pageSize: 10
totalItems: 6
totalPages: 1

I’m trying to modify every element in items array, and then return a whole object.

   getAllGifts(): Observable<PagedListDTO<GiftIdeaDTO>> {
    return this.http.get<PagedListDTO<GiftIdeaDTO>>(this.urlAPI + '/GiftIdeas/GetAll').
      pipe(
        map(x => x.items.map
          (y => ({ ...y, imageContentB64: y.imageContentB64 + 'Bob' })))
        ,
        tap(console.log)
      );
  }

but i only get a modified array of items, no currentPage property, page Size etc.

How can i modify items array and return whole object?

[
   [
      {
         "id":1000000000026,
         "name":"ONE COMPANY",
         "desc":"one has one",
         "partner":"one one"
      },
      {
         "id":2589,
         "name":"TWO COMPANY",
         "desc":"two has two",
         "partner":"two two"
      },
      {
         "id":1000000000005,
         "name":"THREE COMPANY",
         "desc":"three has three",
         "partner":"three three"
      }
   ],
   [
      {
         "id":1000000000005,
         "name":"PREMIUM COMPANY",
         "desc":"premium has vip",
         "partner":"premium premium"
      }
   ]
]

So have a look at this JSON.

Here I want a Jtoken to parse two arrays here

one array has ONE, TWO, THREE companies
and second, has PREMIUM COMPANY

I want to receive two array items in JS, all of the descriptions in one array value and the description of 2nd array in another array value

Example output I need →

var description = ["one has one, two has two, three has three" , "premium has VIP"];

I am sure there is a way for this in Jtoken but I am not getting it! if anyone here is pro in Jtoken Please try the solution!

but here it’s merging both of the arrays in one, and the point to note is that no.of arrays are dynamic

Click to see image

what I want is to get description of each company i an array to combine and get all the descriptions in others arrays in another array item. Please if i am being too confusing try to have a look at the example i mentioned above!

When i run the below statements using different node versions I see a difference in the assert outcome.
I am using v10.15.1 where the assert passes. But the same code in v14.18.1 throws error.

const assert = require('assert')
var err = new Error('some error');
var d = [{
    'error':[err]
}]
var expected = [{
    'error':[{}]
}]
assert.deepEqual(d,expected)

Error is as below:

    assert.js:118
  throw new AssertionError(obj);
  ^

AssertionError [ERR_ASSERTION]: Expected values to be loosely deep-equal:

[
  {
    error: [
      Error: some error
          at Object.<anonymous> (/Users/username/Desktop/repos/temp_files/test.js:2:11)
          at Module._compile (internal/modules/cjs/loader.js:1085:14)
          at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
          at Module.load (internal/modules/cjs/loader.js:950:32)
          at Function.Module._load (internal/modules/cjs/loader.js:790:12)
          at Function.executeUserEntryPoint [as r...

should loosely deep-equal

[
  {
    error: [
      []
    ]
  }
]
    at Object.<anonymous> (/Users/username/Desktop/repos/temp_files/test.js:9:8)
    at Module._compile (internal/modules/cjs/loader.js:1085:14)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
    at Module.load (internal/modules/cjs/loader.js:950:32)
    at Function.Module._load (internal/modules/cjs/loader.js:790:12)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:76:12)
    at internal/main/run_main_module.js:17:47 {
  generatedMessage: true,
  code: 'ERR_ASSERTION',
  actual: [
    {
      error: [
        Error: some error
            at Object.<anonymous> (/Users/username/Desktop/repos/temp_files/test.js:2:11)
            at Module._compile (internal/modules/cjs/loader.js:1085:14)
            at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
            at Module.load (internal/modules/cjs/loader.js:950:32)
            at Function.Module._load (internal/modules/cjs/loader.js:790:12)
            at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:76:12)
            at internal/main/run_main_module.js:17:47
      ]
    }
  ],
  expected: [ { error: [ [] ] } ],
  operator: 'deepEqual'
}

I referred to the documentation for both the version but didn’t find it useful.

v10

v14

I understand of course that the error object is empty in one but not in the other. But cannot find the reason why v10 ignores it and what changed later because of which the error is now caught