Filtering JSON objects in Vue when the API is only returning a limited number of items

Currently, I am retrieving a JSON Object from an API with a limit of 200. The process involves fetching the initial 200 like this:

https://testapi.com/posts.json

In our application, we have implemented pagination with 10 posts per page. When we reach page 20, the API URL automatically changes to:

 https://testapi.com/posts-2.json

The challenge I am facing revolves around efficiently pulling back posts when a filter is applied. Users can input filters, triggering a JavaScript filter method on the JSON object. However, I am unsure how to structure the app to handle filtering across multiple API URLs and combine the filtered results for display.

To retrieve data from the API, I am utilizing Axios.

javascriptjsonapifilteringaxios

Answer №1

If you're looking to seamlessly import your database as JSON files, consider using Firebase Realtime. With their JavaScript SDK, you can easily retrieve posts with pagination by simply utilizing the following code:

db.ref('posts').startAt(0).endAt(100)

This query will fetch your initial 100 posts from the database.

Furthermore, filtering data is a breeze with Firebase. For instance, to retrieve the most viewed posts, you can use the following snippet:

var mostViewedPosts = db.ref('posts').orderByChild('metrics/views');

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

Build a dynamic table by leveraging JSON with the power of JavaScript and HTML

I'm currently working on creating a table where information is stored and updated (not appended) in a JSON file using JavaScript and HTML. The structure of my JSON data looks like this: [{ "A": { "name": "MAK", "height": 170, ...

javascripthtmljson

Sending back an error message in JSON format using the IActionResult method

I've created an API controller endpoint that looks something like this: public IHttpActionResult AddItem([FromUri] string name) { try { // call method return this.Ok(); } catch (MyException1 e) { return thi ...

c#jsonasp.net-web-api

How to use Javascript to toggle a popup containing an autoplaying Vimeo video

I am looking to create a pop-up window containing a Vimeo video inside. I have a div on my webpage with an id of "showVideo". When this div is clicked, I want to display a pop-up (new div with the id of "opened-video"). The "opened-video" div contains an i ...

javascriptjqueryhtmlcssvideo

Navigating JSON in a JAX-RS Client

Encountering an issue with the JAX-RS Client when attempting to test JSON data exchange. Using Jersey 2.10, JDK 1.7, Tomcat 7.0. Seeking advice on necessary steps and examples to resolve this issue. Currently lacking ContextResolver, Provider, MessageBodyW ...

jsonjax-rsmoxyjersey-2.0jersey-client

Steps to include a personalized function in a Mongoose Model

One way to extend Mongoose is by adding methods to documents. Here's an example: const userSchema = new mongoose.Schema({ balance: Number }) userSchema.methods.withdrawBalance = function(amount){ const doc = this doc.balance = doc.balance - amou ...

javascriptnode.jsmongodbmongoose

Is there a way to extract both a and b from the array?

I just started learning programming and I'm currently working on creating an API call to use in another function. However, I've hit a roadblock. I need to extract values for variables a and b separately from the response of this API call: import ...

javascripttypescript

trigger an event once an element has completed cycling using cycle.js

Incorporating the cycle.js library for simple transitions between images: $(document).ready(function() { var first; var $slider = $(".trauringe"); $slider.cycle({ timeout: 8000, next: '#next', prev: '#prev' ...

javascriptjquery

Capturing attention within react-bootstrap drop-downs and pop-ups

Currently, I'm focused on enhancing accessibility features and I have a specific goal in mind: to confine the focus within a popover/dropdown whenever it is opened. Working with react-bootstrap, my inquiry revolves around finding out if there's ...

javascriptreactjsreact-bootstrap

What is the best way to target and focus on all class fields that have a blank value?

<input type ="text" class="searchskill" value=""> <input type ="text" class="searchskill" value="3"> <input type ="text" class="searchskill" value=""> <input type ="text" class="searchskill" value="4"> Is there a way to target o ...

javascriptjqueryvalidationarray.prototype.map

Best location to structure data within a Ruby on Rails application

I am currently developing a Rails application that will generate a set of measurements collected over several days. Each measurement is saved as an individual record with a timestamp and a value, along with additional metadata. When I request the data (wi ...

ruby-on-railsjsonruby

Is Riot.js the best choice for server-side rendering and routing?

Currently, I am using Node along with Riot.js and the Grapnel routing library. I have successfully set up routing on the client side, but I am facing difficulty in making it work on the server side. The functioning of my client router is straightforward. ...

javascriptnode.jsriot.js

What is the best way to pass an array of 8-digit strings from an input in Angular to a Node.js backend?

I am currently facing a challenge where I need to pass an array of 8 digit strings from an Angular input to a Node.js endpoint. The method below works perfectly fine when passing a single string, but how can I handle an array of 8 digit strings as input? ...

javascriptnode.jsangularmean-stack

Measuring the size of a request in JavaScript using bytes

I'm trying to determine the byte size of a basic HTTP data transfer using Node.js. Let's say I'm sending a straightforward JSON string - how can I find out the size of the message body? Would saving the string to a .txt file provide an acc ...

javascriptajaxjsonnode.jshttp

What is the best location to save a .json file in an Android Studio project for easy access with FileReader?

I have successfully developed an Android Studio app using Libgdx that is capable of reading a .json file stored in the project folder The code snippet for accessing the file looks like this: private void readFile() { JsonParser jsonParser = new Json ...

androidjsonandroid-studiolibgdxfilereader

What could be causing the lack of data with 'react-hook-form'?

I have encountered an issue while working with react-native and using 'react-hook-forms' for creating dynamic forms. The problem is that the data object returned is empty, even though it should contain the values entered in the input fields. When ...

javascriptreactjsreact-nativereact-hooks

incorporating my unique typographic styles into the MUI framework

I'm currently working on customizing the typography for my TypeScript Next.js project. Unfortunately, I am facing difficulties in configuring my code properly, which is causing it to not work as expected. Can someone kindly provide assistance or guida ...

javascriptreactjstypescriptmaterial-uinext.js

Transferring a single dataset from a table to a pop-up modal using Angular

I am working on a table to display entries for a contest, extracted from a database using PHP and converted into a .json object for AngularJS and JavaScript. I want to add a modal feature so that when a "judge" clicks on an entry, they can view its details ...

javascriptangularjsui.bootstrap

Utilizing Angular and the Kendo UI framework to customize the dimensions of a Kendo window

Is there a way to dynamically set the height and width of the kendo window based on the content of the kendo grid? Below is the code snippet for my kendo-window: <div kendo-window="Operation.OperCustWind" k-width="800" k-height="700" ...

javascripthtmlcssangularjskendo-ui

Inquiry regarding modules in Javascript/Typescript: export/import and declarations of functions/objects

I'm fresh to the realm of TypeScript and modules. I have here a file/module that has got me puzzled, and I could really use some guidance on deciphering it: export default function MyAdapter (client: Pool): AdapterType { return { async foo ( ...

javascriptnode.jstypescriptpromise

how to use jQuery to hide a flash-containing div without losing its content

Hello, I created a modal with jQuery UI that is displaying in front of a flash movie. However, the HTML content inside the modal appears corrupted. I attempted to hide the movie just before the modal is triggered and make it reappear after closing the mo ...

javascriptjqueryflashhtml