How to pass model to shared resolver(controller)

I have many resolvers and one abstract resolver from which all will inherit.

How can I pass a model to this abstract resolver? – I need to put it in Query and ResolveField

Below is the code resolver(Users) and resolver(Entity) – Users is inherited from Entity. As well as the entity and users model module

@Resolver(() => EntityModel)
export abstract class EntityResolver<M, CMD, UMD> {
  protected constructor(protected service: EntityService<M>) {}

  @RolesGuards([ROLES.USER])
  @ResolveField(() => /* MODEL */)
  @Query(() => /* MODEL */)
  async findAll(): Promise<{ response: M[]; statusCode: number }> {
    return {
      statusCode: HttpStatus.OK,
      response: await this.service.findAll(),
    }
  }
}
@Resolver(() => Users)
export default class UsersResolver extends EntityResolver<Users, CreateUsersDto, UpdateUsersDto> {
  constructor(protected service: UsersService) {
    super(service)
  }

  @RolesGuards([ROLES.ADMIN])
  @Get('/email/:email')
  async findByEmail(
    @Param('email') email: string,
  ): Promise<{ response: Users; statusCode: number }> {
    return {
      statusCode: HttpStatus.OK,
      response: await this.service.findByEmail(email),
    }
  }
}
@Module({
  controllers: [UsersController],
  providers: [UsersService, UsersResolver],
  imports: [SequelizeModule.forFeature([Users]), RolesModule, LoggerModule],
  exports: [SequelizeModule, UsersService],
})
export class UsersModule {}
@ObjectType()
export class EntityModel<M, MCA = {}> extends Model<M, MCA> {
  user_id: string;
}

interface UserCreationAttrs {
id: string
email: string
password: string
}

@ObjectType()
@Table({ tableName: 'Users' })
export class Users extends EntityModel<Users, UserCreationAttrs> {
  @Column({
    type: DataType.STRING,
    unique: true,
    primaryKey: true,
  })
  id: string

  @Column({ type: DataType.STRING, unique: true, allowNull: false })
  email: string

  @Column({ type: DataType.STRING, allowNull: false })
  password: string

  @BelongsToMany(() => Roles, () => UsersRoles)
  roles: Roles[]

  @HasMany(() => Funds)
  funds: Funds[]

  @HasMany(() => Expense)
  expense: Expense[]

  @HasMany(() => ExpenseCategories)
  expenseCategories: ExpenseCategories[]

  @HasMany(() => Income)
  income: Income[]

  @HasMany(() => IncomeCategories)
  incomeCategories: IncomeCategories[]
}

I tried to pass the model through the constructor, but for some reason I was told that the model could be undefined.

Get openlayers map data live while user interacts with map

I’m creating a webapp using openlayers (version 7.2) and I’m trying to figure out how to have a live output of the current center, zoom & rotation. I have found the ‘movestart’ and ‘moveend’ events however these both fire only once either at the beginning or end of the user interaction. I’m trying to find a way to continually update the information while the user is interacting. Any help would be appreciated.

Here is what I have using ‘moveend’ can anyone help me have this update while the user is still dragging/repositioning the map?

Here is my current code as well as alink to a JSFiddle.
Thanks.

HTML

<div id="map" class="map"></div>
<div id="output">
    <h2>Map Information</h2>
    Center Position: <span id="center" class="info"></span><br>
    Current Zoom: <span id="zoom" class="info"></span><br>
    Current Rotation: <span id="rotation" class="info"></span>
</div>





CSS

#map{
    width: 300px;
    height: 300px;
}

#output{
    position: absolute;
    top: 8px;
    right: 8px;
    width: calc(100% - 340px);
    height: 150px;
    padding: 0 8px;
    background-color: lightgray;
    border: 1px dashed black;
}

#output h2{
    font-size: small;
    text-decoration:underline;
}

.info{
    font-size: smaller;
}

JS

var map = new ol.Map({
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM()
    }),
    new ol.layer.Vector({
      source: new ol.source.Vector({
        url: 'data/geojson/countries.geojson',
        format: new ol.format.GeoJSON()
      })
    })
  ],
  target: 'map',
  
  view: new ol.View({
    center: ol.proj.fromLonLat([-63.5859487, 44.648618]), //halifax
    zoom: 14
  })
});

map.on("moveend", function() {
  var view = map.getView();
  var center = ol.proj.transform(view.getCenter(), 'EPSG:3857', 'EPSG:4326');
  var zoom = view.getZoom();
  var zoomInfo = 'Zoom level = ' + zoom;
    var rotation = view.getRotation();
  document.getElementById('center').innerHTML = center;
  document.getElementById('zoom').innerHTML = zoom;
    document.getElementById('rotation').innerHTML = rotation;


});

https://jsfiddle.net/chudnovskym/d9cjzb03/21/

Error when navigating to Home screen in react naive app using react native navigation

I am trying to navigate to a screen called “ConsumerHome” which is actually a bottom stack navigator from the last stage of the signup process (controlled by AuthNavigation) and I get the error:

The action ‘NAVIGATE’ with payload {“name”:“ConsumerHome”,“params”:{ isVerified: true, _id: '' }”} was not handled by any navigator. Do you have a screen named ‘ConsumerHome’?

I have added the component in question to the Navigation stack(AuthNavigator) as directed in the documentation but it still does not work. Here is my function call:

//This is the last screen in the signup flow

  function handleNavigate() {
    const url = userType === 'consumer' ? 'ConsumerHome' : 'InfluencerHome';

    navigation.navigate(url, { isVerified: true, _id: '' });
  }

AuthNavigator.tsx:

export function AuthNavigator() {
  return (
    <AuthStack.Navigator>
      <AuthStack.Screen
        name="Root"
        component={OnBoardingScreen}
        options={{ headerShown: false }}
      />
      <AuthStack.Screen
        name="Signup1"
        component={SignUpScreen1}
        options={{ headerShown: false }}
      />
      <AuthStack.Screen
        name="SignIn"
        component={SignInScreen}
        options={{ headerShown: false }}
      />
      <AuthStack.Screen
        name="Signup2"
        component={SignUpScreen2}
        options={{ headerShown: false }}
      />
      <AuthStack.Screen
        name="Signup3"
        component={SignUpScreen3}
        options={{ headerShown: false }}
      />
      <AuthStack.Screen
        name="Signup4"
        component={SignUpScreen4}
        options={{ headerShown: false }}
      />
      <AuthStack.Screen
        name="PinInput"
        component={PinInput}
        options={{ headerShown: false }}
      />
      <AuthStack.Screen
        name="Signup5"
        component={SignUpScreen5}
        options={{ headerShown: false }}
      />
      <AuthStack.Screen
        name="Signup6Consumer"
        component={SignUpScreen6Consumer}
        options={{ headerShown: false }}
      />
      <AuthStack.Screen
        name="Category"
        component={Category}
        options={{ headerShown: false }}
      />
      <AuthStack.Screen
        name="AddSocialMedia"
        component={AddSocialMedia}
        options={{ headerShown: false }}
      />
      <AuthStack.Screen
        name="AddProfilePicture"
        component={AddProfilePicture}
        options={{ headerShown: false }}
      />
      <AuthStack.Screen
        name="Signup7Influencer"
        component={SignUpScreen7Influencer}
        options={{ headerShown: false }}
      />
      <AuthStack.Screen
        name="SigninEnterPhone"
        component={SigninEnterPhone}
        options={{ headerShown: false }}
      />
      <AuthStack.Screen
        name="SigninVerifyPhone"
        component={VerifySigninPhone}
        options={{ headerShown: false }}
      />
      <AuthStack.Screen
        name="SigninEnterPin"
        component={SigninEnterPin}
        options={{ headerShown: false }}
      />
      <AuthStack.Screen
        name="InfluencerHome"
        component={InfluencerBottomTabNavigator}
        options={{ headerShown: false }}
      />
      <AuthStack.Screen
        name="ConsumerHome"
        component={ConsumerBottomTabNavigator}
        options={{ headerShown: false }}
      />
    </AuthStack.Navigator>
  );
}

ConsumerBottomTabNavigator:

export function ConsumerBottomTabNavigator() {
  const colorScheme = useColorScheme();

  return (
    <BottomTab.Navigator
      initialRouteName="HomeTab"
      screenOptions={{
        tabBarActiveTintColor: Colors[colorScheme].tint,
        headerShown: false,
      }}
    >
      <BottomTab.Screen
        name="HomeTab"
        component={ConsumerHomeStackNavigator}
        options={{
          title: 'Home',
          tabBarIcon: ({ color }) => (
            <FontAwesome name="home" size={21} color={color} />
          ),
        }}
      />
      <BottomTab.Screen
        name="Payments"
        component={PaymentStackNavigator}
        options={{
          title: 'Payments',
          tabBarIcon: ({ color }) => (
            <FontAwesome name="credit-card" color={color} size={21} />
          ),
        }}
      />

      <BottomTab.Screen
        name="Services"
        component={ServiceStackNavigator}
        options={{
          title: 'Services',
          tabBarIcon: ({ color }) => (
            <Entypo name="notification" size={21} color={color} />
          ),
        }}
      />
    </BottomTab.Navigator>
  );
}

I would appreciate any help as this has bugged me for days

How to get Google to index based on my iframe not the full page

Simplicticly, my site contains a list of items, read from the database, in a left hand panel. The user can select an item and the full details of the item are displayed in the center panel, which is an iframe.

The reason for the iframe is so that the whole page doesn’t have to be refreshed which would mean re-reading the database to re-generate the item list – I just need one read to get the item details and the list is left on the screen for subsequent selection.

The sql to genereate the item list is actually quite complex and the volumes could be quite high, so it really doesn’t make sense from an architetural perspective to re-generate the whole page each time an item is selected.

From the user perspective each item selected generates entirely new/different content in the center panel.

My problem is that Google seems to have problems indexing this. In particular I believe that Google takes account of the ‘title’ of the main page, which is always the same, but probably ignores the ‘title’ of the iframe ‘page’ which has the real content and the specific title of the real content.

I don’t believe it’s logically possible to generate the real content specific title for the main page without re-generating the main page and hence having to re-read the database.
Is there any way to get google to use the iframe page ‘title’ which correctly describes the content?

Thanks.

Having an “index.js” in every subdirectory

I’m trying to figure out best practices for folder structure for my backend project, and I actually asked chatgpt about it, it told me to put an “index.js” in every folder as the main entry point for each module in that folder. is this not confusing having so many “index.js” files in your project, even if they’re clearly separated by their own folders?

How to pull data from another website into our angular application

I don’t know anything about this task. I just need to fetch data from a “xyz ” website after a particular action performed in my application. is this possible?? or is there another way to do this task. If anyone have a documentation on this task then please let me know. Thanks in advance.

I am just trying to check documents about this.

Need to understand why adding a dummy function for disabled property is checking for required fields

We have form in our tool. We have added the required flag for the necessary input fields. However, despite this , it allows save button to work without checking the required fields.

Example:
One component of CreateForm.js is as follows(just added one input here of Name):

import { Form, Row, Col, InputGroup } from 'react-bootstrap';

...
...
return (
        <>

            <Form.Group as={Row}>
                <Form.Label className="text-left ml-5" column sm="3">Name</Form.Label>
                <Col sm="5">
                    <InputGroup hasValidation>
                        <Form.Control
                        type="text"
                        name="name"
                        placeholder="Provide a Name"
                        onChange={e => handleInputChange(e)}
                        value={props.commonSource.name}
                        required
                        isInvalid={(props.commonSource.name).trim() === '' ? true : false}
                        />
                        <Form.Control.Feedback type="invalid">
                            Provide a appropriate name for your workflow.
                        </Form.Control.Feedback>
                    </InputGroup>
                </Col>
            </Form.Group>
 </>
    );
};

NewForm.js where it is called:

<CreateForm 
...
...
/>

 <CustomButton
 save={e => saveData(e)}
 disable = {checkRequiredFormFields}
 />                                 

CustomButton.js code:

import { Button } from 'react-bootstrap';

const CustomButton = (props) => {

    return (
        <>
        {props.save ? 
            <Button 
            className={className}
            id="button_success"
            type="submit"
            onClick={e => props.save(e)}
            disabled={props.disable ? props.disable : false}
            >
                Save
            </Button>
        :
            <Button 
            className="button btn btn-sm mr-2" 
            id="button_error"
            onClick={() => props.back()}
            disabled={props.disable ? props.disable : false}
            >
                {props.text ? props.text : 'Back'}
            </Button>
        }
        </>
    );
};

Current behaviour:
With above code, the input field gets highlighted in red for Name with a message Provide a appropriate name for your workflow when i don’t give any input but the save button works still wherein the form gets saved with empty input.

Expected behaviour:
The save should not work unless the required fields are filled.

What i did was i thought i will add a function to check the values of those input field and return true or false to the disable attribute of button. However, I am getting the functionality working for a dummy function with no value or action i.e save doesn’t work till all the required fields have been filled up. Button is not disabled but it will take you to the field which is pending still and ask to fill it up(WHICH IS WHAT I WANT) but i want to understand how this function with nothing in it is fulfilling this requirement logically. Please see my code:

NewForm.js

    const checkRequiredFormFields = () => {
        // console.log("testing disable");
        // return false;
        // has only commented code but adding this function, the save will ask for all required fields.
    }




...
....

                            <div className="modal_buttons_div">
                                <div className="modal_buttons">
                                    <CustomButton
                                    save={e => saveData(e)}
                                    disable = {checkRequiredFormFields}
                                    />
                                </div>
                            </div>

ASK: Can someone please help me understand how this function with no value or useful statements is helping achieve my requirement? NOTE: If i replace the function name with boolean value(true/false) or string, i dont get it same.

I want this functionality itself but would like to have an understanding.
Thanks

Add custom margin to pdf page with a certain element in puppeteer

I need to convert my web page into a pdf, In the web page there are existing image which will occupy an entire pdf page of size a4. So I need that exact page with the image to have margin as 0px.We are using puppeteer in headless mode

we tried using css

@page{
    margin: 50px;
}

@page margin0 {
    margin:0px;
}

.margin-zero-image {
    page: margin0;
}

did not work as named pages support seems to be removed in puppeteer

we tried looping through the all the pdf pages using buffer and merging the buffer but the pdf gets corrupted while trying this

why is that when i am trying to set the value of a key inside an object ,it is also modifying the data originaly from where the value is being fetched

for (let i = 0; i < diffOfDays; i++) {
  let taskgroup = config.TG["TG" + (i + 1)]
  taskgroup = taskgroup.split(',')

  for (let j = 0; j < taskgroup.length; j++) {
    taskgroup[j] = taskgroup[j].trim()
    taskId = "t" + x

    taskOb[`${taskId}`] = config['Tasks'][taskgroup[j]]

    taskOb[`${taskId}`]['d'] = i + 1

    x++
  }
}

When I am setting data in taskOb, the value I want to set it to is config['Tasks'][taskgroup[j]].
After that when I add the ‘d’ key in taskOb[taskId], the ‘d’ key also gets added to config['Tasks'][taskgroup[j]].
The config object is a big object having several keys.

jQuery imgZoomAndRotate plugin not working on dynamically loaded images

I am trying to integrate jQuery plugin imgZoomAndRotate in my codeigniter system. When I follow the steps 1-4 as mentioned in the link the library works perfectly fine for static images. But when I try to call a js function to load the images via my database the images are loaded but library doesn’t work on clicking the images.

Static images case

<div class="row row-5" id="images-modules">
   <div class="col-sm-2">
      <div class="img-thumbnail rounded"><span class="del-image" data-id="15">&times;</span><img src="<?php echo $equipment_images_path;?>6ff77345db350d4efd50f6573b72164c.jpeg" class="img-fluid"></div>
   </div>
   <div class="col-sm-2">
      <div class="img-thumbnail rounded"><span class="del-image" data-id="15">&times;</span><img src="<?php echo $equipment_images_path;?>bbf36b9be6c1f4c40399ec024603a010.JPG" class="img-fluid"></div>
   </div>
   <div class="col-sm-2">
      <div class="img-thumbnail rounded"><span class="del-image" data-id="15">&times;</span><img src="<?php echo $equipment_images_path;?>9e4f68c3fd043978295cc359caf2b784.jpeg" class="img-fluid"></div>
   </div>
</div>
</div>

Dynamic Images Case

<div class="row row-5" id="images-modules">
</div>

JS CODE

<script src="{theme_url}js/plupload/plupload.full.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js"></script>
<script src="{theme_url}js/ezoom/jquery.drag.js"></script>
<script src="{theme_url}js/ezoom/imgZoomAndRotate.js" ></script>
<script>
   jQuery(document).ready(function() {  
   
          function loadImages(){
           $.getJSON('<?php echo base_url($action_url); ?>?load_images=true', function (data) {
               $('#images-modules').html('');
               if (data.length>0){
   
                   $(data).each(function(o,i){
                       
                       $('#images-modules').append('<div class="col-sm-2">'+i.first_name+'<div class="img-thumbnail rounded"><span class="del-image" data-id="'+i.ID+'">&times;</span><img src="<?php echo $equipment_images_path;?>'+i.thumb_filename+'" class="img-fluid"></div></div>');
                   });
               }else{
                   $('#images-modules').html('<div class="alert alert-info">No images associated with this inventory.</div>')
               }
           });
       }
       loadImages();
   
          $('.img-fluid').imgZoomAndRotate({
           'loop':true
         }); 
   });
</script>
  1. For testing the library with static images I just comment the function loadImages() and the library works perfectly fine.

  2. For testing the library with dynamic images I just remove all content of div <div class="row row-5" id="images-modules"> which will be loaded on calling the function loadImages() on document.ready.
    In 2nd case the images are loaded in the images-modules div and displayed in the container but the library is not working when I click the images.

P.S:

There are no JS errors in console as well.
All the JS files are loaded fine without any issue of path

Appreciations in advance

Database update issue

hope you have a nice day, right now I have an issue in a function and I hope that someone can help me in it.
I have made a function that lets schools upload students’ data from an excel sheet to our database, I am using Mongodb and apollo graphql server, there are two models I am using here 1-User model 2-Branch model.
What I should do is that I let the school uploads the excel sheet and create a document for him in the User collection-If not exist-and add that student _id to the Branch document as a student.
There is no problem in all of this, and all things goes according to plan.
The problem here is that I have created another two functions that I called in the above function, one to remove the students from the old grade’s class and the other to add the students to the new grade’s class if another branch uploads the same excel sheet or to transfer them to another grade in the same branch by removing there _ids from that grade’s class and add them to the new grade’s class, but this doesn’t happen and what happens that it adds them to the new grade’s class without any issue but only removes 1 student from each grade’s class from the old grades classes and doesn’t remove the rest and I don’t know why!
P.S:
There is a function I have made that works for only one student and it works perfectly but when it comes to the above loop-multiple students- it doesn’t work as expected.

This is the main function.

export default async (_, { confirmation, branchId }, context) => {
  try {
    const language = context.headers.language;

    if (!context.user) generateError("redirectToLogin", language);
    const token = context.headers.authorization;
    await validateUserToken(context.user, token);

    let branchModel = await Branch.findOne({ _id: branchId });
    let branches;
    if (!branchModel) {
      generateError("branchNotFound", language);
    }
    const validated = branchModel.validatedExcel;
    if (validated.length == 0) {
      generateError("fileNotFound", language);
    }
    if (!confirmation || confirmation === false) {
      generateError("fileNotFound", language);
    }
    const usersData = await Promise.all(
      validated.map(async (user) => {
        const validatedInput = await validateStudentExcelInput(
          user,
          branchModel
        );
        let registeredUser = await User.findOne({
          nationalId: validatedInput.nationalId,
        });
        if (registeredUser) {
          if (registeredUser.branchesData[0].branchId) {
            registeredUser = await removeASubGroupUser(
              registeredUser.branchesData[0].branchId,
              registeredUser.branchesData[0].groupKey,
              registeredUser.branchesData[0].subGroupId,
              registeredUser
            );
          }

          branches = await addUserToSubGroup(
            branchModel,
            validatedInput.branchesData[0].groupKey,
            validatedInput.branchesData[0].subGroupId,
            registeredUser
          );
          registeredUser.branchesData = validatedInput.branchesData;
          await registeredUser.save();
        } else {
          // create the student in the DB and add him to the school
          const student = new User(validatedInput);

          student.aId = await generateUserAId(validatedInput);
          if (validatedInput.profilePictureUrl) {
            student.profilePictureUrl = await generateImageURL(
              validatedInput.profilePictureUrl
            );
          }
          student.branchesData = validatedInput.branchesData;
          await student.save();
          await addStudentToLegalGurdian(student);
          // // create a medical history for the student
          await generateMedicalHistory(student);

          // add the student to the class
          branches = await addUserToSubGroup(
            branchModel,
            validatedInput.branchesData[0].groupKey,
            validatedInput.branchesData[0].subGroupId,
            student
          );
        }
        return branches ? branches : branchModel;
      })
    );
    let data = usersData.pop();
    branchModel = data;
    branchModel.validatedExcel = [];
    await branchModel.save();

    return mutationSuccessResponse(201, "Students added successfully");
  } catch (err) {
    console.log(err);
    return mutationFailResponse(err);
  }
};

The remove function that doesn’t works as expected.

import { Branch } from "../../../models/index.js";

export default async function removeASubGroupUser(
  branchId,
  groupKey,
  subGroupId,
  userData
) {
  const branch = await Branch.findById(branchId);
  const group = branch.groups.find((group) => group.name === groupKey);

  const subGroup = group.subGroups.find(
    (subGroup) => subGroup._id.toString() === subGroupId
  );

  const userToRemove = subGroup.users.findIndex(
    (user) => user._id.toString() === userData._id.toString()
  );
  // console.log(subGroup.users);
  subGroup.users.splice(userToRemove, 1);
  branch.save();
  // console.log(subGroup.users);
  const branchDataIndex = userData.branchesData.findIndex(
    (branchData) =>
      branchData.branchId.toString() === branch._id.toString() &&
      branchData.groupKey === groupKey &&
      branchData.subGroupId.toString() === subGroupId
  );

  userData.branchesData.splice(branchDataIndex, 1);

  // await updatedUser.save();
  return userData;
}

Navigating to a new page in react not working

When I try to add details to the signup page, the data is sent to MongoDB but the page is not navigating to the next one.

After adding the email and password to signup, the page should navigate to the onboarding page after submitting but it’s not

This is the code snippet:

       const response = await axios.post(`http://localhost:8000/${isSignUp ? 'signup' :  'login'}`, { email, password })
        
       const success = response.status === 201

       if (success && isSignUp) navigate ('/onboarding')
       if (success && !isSignUp) navigate ('/dashboard')
    } catch(error){
        console.log(error)
    }
}

How to Map nested Object in using a map in react

I am trying to map a nested object in React. This is how my object currently looks like

  "data": {
    "user1": {
      "Public": [
        1,
        0
      ],
      "Team Only": [
        1,
        1
      ],
      "All": [
        1,
        1
      ]
    },
    "user2": {
      "Public": [
        0,
        0
      ],
      "Team Only": [
        0,
        0
      ],
      "All": [
        0,
        0
      ]
    },

The way I am trying to map it is like this

    const TableRows = (obj) => {
        const userObject = Object.entries(obj);
        const row = userObject.map((owner, mainIndex)=> {
          return (
            <TableRow key={console.log(`row-record-${owner[1]}`)} highlightOnHover={true}>
              {Object.entries(owner[1]).map((value, index) => (
                <TableCell
                  key={console.log(`column-value-${value}`)}
                  alignmentHorizontal={
                    tabsAlignment[props.metricComponent] &&
                    props.componentName != "Open_COE_Default"
                      ? tabsAlignment[props.metricComponent][index]
                      : index != 0
                        ? "center"
                        : ""
                  }
                >
                 {owner[1]} // This prints out user1, 11,11 expected is user1, 1, 1

                </TableCell>
              ))}
            </TableRow>
          );
        });
        return row;
      };

The issue I am encountering is that when I do run this in the UI, the expected output should be something like

user1, 1, 1
user2, 1, 1

But instead the output turns out like this

user1, 11,11
user2, 22,22

Now I am unsure why it is taking the two separate values for 1 and 1 and then meshing them together. Is the way I am mapping not correct or am I not using the right keys for the map.

i wrote a code to salve a problem on leetcode but its not working on leetcode its working on google dev tools

i don’t know why but it happens all the time i wrote this code but it dose not work in leetcode but works in google dev tools

var rotate = function(nums, k) {
  let newNum = nums.slice(0, nums.length - k);
  let lastNum = nums.filter(x => newNum.indexOf(x) === -1)
  newNum.unshift(...lastNum);
  return newNum;
};

LeetCode:
[enter image description here][1]

[enter image description here][2]
how console.log logs the right ans but output does not

google dev Tools:
[enter image description here][3]
i tried many test case it works on google dev Tools

I also tried:

var rotate = function(nums, k) {
    for (let i = 0; i < k; i++) {
    let num = nums.pop();
    nums.unshift(num);
}
return nums;
};

output: 38 / 38 testcases passed says Time Limit Exceeded

And:

var rotate = function(nums, k) {
    let lastNums = nums.reverse().splice(0, k).reverse();
    nums = nums.reverse().unshift(...lastNums);
    return nums;
};