What is the process of converting exactPageList from any to any[] before assigning it to pagefield?

Encountering an issue with paging on my angular 7 app where I am unable to assign exactpagelist of any type to pagefield of type array.

The problem seems to be occurring on the last line of the function totalNoOfPages at this point:

this.pageField = this.exactPageList;
this.pageField = 2; not correct

What I expected was:

this.pageField = [1,2];

This indicates that I need to convert this.exactPageList into an array in order to successfully assign it to pagefield. How can I achieve that?

pageField:any[];
exactPageList:any;
totalNoOfPages() {  

    this.paginationData = Number(this.totalReportCount / this.ReportPerPage);  
    console.log("pagination data :" + this.paginationData)
    let tempPageData = this.paginationData.toFixed(); 
    console.log("tempPageData data :" + tempPageData) 
    if (Number(tempPageData) < this.paginationData) {  
      this.exactPageList = Number(tempPageData) + 1;  
      this.paginationService.exactPageList = this.exactPageList;  
      console.log("exactPageList1  data :" + this.exactPageList ) 
    } else {  
      this.exactPageList = Number(tempPageData);  
      this.paginationService.exactPageList = this.exactPageList  
      console.log("exactPageList2  data" + this.exactPageList ) 
    }  
    this.paginationService.pageOnLoad();  
    this.pageField = this.exactPageList;    

  }  

The output of the above code is as follows:

pagination data1.0666666666666667
reportdetails.component.ts:265 tempPageData data1
reportdetails.component.ts:269 exactPageList1  data2
reportdetails.component.ts:263 pagination data1.0666666666666667
reportdetails.component.ts:265 tempPageData data1
reportdetails.component.ts:269 exactPageList1  data2

But what I am aiming for is:

this.pageField = [1,2];

Answer №1

Here is the explanation with comments:

this.paginationData = Number(this.totalReportCount / this.ReportPerPage);  
console.log("pagination data :" + this.paginationData)
// Using Math.round instead of toFixed to get a numeral instead of a string.
let tempPageData = this.paginationData.toFixed(); 
console.log("tempPageData data :" + tempPageData) 
// No need for Number() here anymore.
// It would make sense to use Math.ceil() if we always want the 'bigger number'.
// In that case, no need for a condition at all.
if (Number(tempPageData) < this.paginationData) {  
  this.exactPageList = Number(tempPageData) + 1;  
  this.paginationService.exactPageList = this.exactPageList;  
  console.log("exactPageList1  data :" + this.exactPageList ) 
} else {  
  // Similar action as above.
  // It's enough to set this.exactPageList conditionally and proceed.
  this.exactPageList = Number(tempPageData);  
  this.paginationService.exactPageList = this.exactPageList  
  console.log("exactPageList2  data" + this.exactPageList ) 
}  
this.paginationService.pageOnLoad();  
this.pageField = this.exactPageList; 

This is what I would do differently:

this.paginationData = Number(this.totalReportCount / this.ReportPerPage);  
console.log("pagination data :", this.paginationData)
let tempPageData = Math.ceil(this.paginationData);
console.log("tempPageData data :", tempPageData) 

// Creating an array from 1 .. N
this.exactPageList = [...Array(tempPageData).keys()].map(x => ++x);;
this.paginationService.exactPageList = this.exactPageList;  
console.log("exactPageList data :", this.exactPageList )   
this.paginationService.pageOnLoad();  
this.pageField = this.exactPageList; 

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

`Vuejs not displaying pdf file correctly`

I am currently using the Laravel DomPDF wrapper to generate PDF files. However, I am facing an issue where I want to render these generated PDF files with my client-side Vue.js app. I have written code that allows me to view and download the PDF file, but ...

Using TypeScript to import npm modules that are scoped but do not have the scope name included

We currently have private NPM packages that are stored in npmjs' private repository. Let's say scope name : @scope private package name: private-package When we install this specific NPM package using npm install @scope/private-package It ge ...

How can I write this to function on click events?

Could someone please help me with a simple question I have? I am struggling to properly write the code. $wish_1='<span onclick=alert("Register or Login Now");></span>'; The issue is that spaces are not working and using ' also ...

Utilize Typescript to inject types into a library

I have a code snippet that reads data from a JSON file and creates a type based on it, which is then used for further operations. import jsonData from './mydata.json' type CustomType = typeof jsonData .... This process ensures that the generate ...

Tips for displaying the HTML content within the autocomplete box

My situation involves a text input and an HTML form where users can submit their name to retrieve information. I am using AJAX to display the usernames dynamically. <div class="hidesearch" id="search" style="width:"400px;"> <inp ...

The element 'nz-list-item-meta-title' in NG-ZORRO is unrecognized

After installing NG-ZORRO for my project, I decided to start by incorporating their list component. However, I encountered errors with elements such as: 'nz-list-item-meta-title' and 'nz-list-item-action' not being recognized. I have e ...

Determine the specific data types of the component properties in React Storybook using TypeScript

Currently, I am putting together a component in the storybook and this is how it appears: import React, { useCallback } from 'react'; import { ButtonProps } from './types'; const Button = (props: ButtonProps) => { // Extract the nec ...

Converting an image to base64 format for storing in localStorage using Javascript

Currently, I am working on code that sets the background-image of a link. This is what I have so far: $("a.link").css("background-image", "url('images/icon.png')"); However, I want to enhance it by storing the image in localStorage: if (!local ...

Ways to pass a message from index.html to a Vue.js 3 instance

Picture this scenario: You have a Vue index.html file that also loads a custom script: <!DOCTYPE html> <html lang="en"> <head> ... ... <script type="text/javascript"> languagePluginLoader.then(fun ...

Angular 2 signal sender

I have a specific class definition for my Project: export class Project { $key: string; file: File; name: string; title: string; cat: string; url: string; progress: number; createdAt: Date = new Date(); constructor(file: File) { th ...

Exploring real-time data updates using React and the setInterval method

Every time my component loads, I am attempting to continuously poll the Spotify API using setInterval. However, during testing, an error message pops up: Invalid Hook Call..etc. I suspect that the issue stems from using useEffect within another useEffect w ...

Utilize jQuery ajax to target a particular recurring input

I am using HTML code along with another jQuery loop. Within this loop, there is an input element that is also being looped. I am trying to manipulate it using jQuery Ajax... but I am facing an issue where only the first input element works properly. The re ...

I have added the same directive to both of my HTML files

Hello, I am facing an issue with a directive that I have included in two HTML files. The 'app' is set as ng-app. <dir auto=""></div> The code for the directive is as follows: app.directive("auto", function() { scope: { arr : ...

How can I utilize a CDN for JavaScript libraries in Gulp?

As a newcomer to AngularJS and Gulp, I recently encountered an example where certain libraries are copied by Gulp from the 'node_modules' folder into a 'js/lib/angular2' directory: gulp.task('libs', function() { return gulp. ...

What is the reason for the 'scrollHeight' being considered 'undefined' in this particular scenario, and why did the iframe encounter an error when switching to the html-file?

This is my first time asking a question, so please forgive any mistakes... I am attempting to create a website using HTML, CSS, and JavaScript on my Raspberry Pi with Apache2. I have written a script for an automatic iframe height function based on the co ...

Unable to display jQuery modal due to error "Uncaught DOMException: Failed to execute 'appendChild' on 'Node': The new child element contains the parent."

Check out the JS Fiddle demo here. Here is the code in question: $('#infoTable').click(infoModal); function infoModal(){ var table = "THIS IS A TABLE"; $("#dialogContainer").dialog({ appendTo: "#msg-dialog", autoOpen: f ...

Tips for updating CSS styles for multiple innerHTML elements using a JavaScript for loop

<div id="test"></div> <script type="text/javascript"> window.names=["jin kazama", "nina williams"]; window.values=[25, 37]; len=names.length for (var i = 0; i < len; i++) { document.getElementById('test').innerHTML+ ...

Achieving responsive masonry layout with Bootstrap 4

I'm attempting to implement the bootstrap 4 masonry effect on my website, but I'm facing issues with card responsiveness. The page is very basic without any special effects. While the page works well when resizing the browser window, it doesn&ap ...

What is the process of adding information to a JSON file?

I'm looking to store my data in an external JSON file and have it update the list when the page is reloaded. Can anyone assist with this? Below is my code: $scope.addUser = function() { var user = { id: null, login: '', ...

Error message in Mysql connector for NodeJS: Pool has been closed

We have developed a NodeJS application that functions as an API for a frontend Angular project we are currently working on. So far, both components have been operating smoothly. However, occasionally we encounter a strange error with the API stating "Pool ...