What could be causing my webpage to freeze every time a filter button is selected?

Tasked with developing a webpage similar to Pinterest by utilizing data from a JSON response. Each JSON object contains a service_name key, which can be manual, twitter, or instagram. I made an effort to implement three filter buttons to only display the relevant data on the webpage by using the onclick method in jquery to pass an array to the loadData function. However, clicking on any of these buttons causes the webpage to freeze.

Check out the codepen for reference: https://codepen.io/KevinM818/pen/OjMYYO

$(document).ready(function() {
        var service = "";
        var datePublished = "";
        
        var manualImage = "";
        var manualText = "";
        var manualLinkText = "";
        var manualLink = "";
        
        var twitterUsername = "";
        var twitterTweet = "";
        
        var instaImage = "";
        var instaUsername = "";
        var instaCaption = "";
        
        var manualItems = [];
        var twitterItems = [];
        var instagramItems = [];
        
        // Rest of the code remains as is ...
javascriptjqueryhtmlcssjson

Answer №1

I have successfully cloned your codepen with the functional fiddle. It was quite easy to identify the issue.

During the execution of your for-loop, you continuously populate the source Array within your switch statements. To address this, I introduced a second parameter named "is_filter" to your loadItems function. When you select one of the filter buttons and pass true as the value, the source Array is not populated in the for-loop. Here is the link to the modified code for your reference:

https://codepen.io/anon/pen/zdrgpp

This snippet shows an example usage of the filters:

loadItems(manualItems, true);

The function declaration is as follows:

function loadItems(array, is_filter = false) { ...

Additionally, here is the inline implementation for your convenience:

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

Seamless Integration of Hosted Fields by Braintree

I am currently struggling with setting up Braintree hosted fields on my registration form. Unfortunately, there are significant gaps between the fields which doesn't look appealing. Despite referring to the braintree documentation and guides, I find t ...

javascriptphpjqueryformsbraintree

Sorting with jQuery UI - the element being sorted

Currently experimenting with jQuery UI sortable for creating a dashboard interface. Is there a way to retrieve the last sorted item? My goal is to trigger a function using the update event, which will display a message confirming that the new position has ...

jqueryjquery-uitarget

Iterating through validation data from an Ajax request in a Laravel controller

Need assistance with validating a JSON request sent through Ajax, which contains multiple objects. I am facing difficulties in implementing a rule where the request should fail if a particular attribute does not meet the criteria (minimum 5 characters in " ...

phpjsonajaxlaravel

Parsing a multidimensional array using JSON arrays

My current challenge involves working with an array called jArray, which is structured as follows: {"users":[ { "user_id":6, "user_name":"Ted Vanderploeg", "email":"<a href="/cdn-cgi/l/email ...

androidjsonandroid-json

What could be causing the malfunction of client components in NextJS 13.3.0 with experimental features?

My understanding of the beta documentation suggests that I need to include "use client" at the top of my client component in order for it to be defined as such. This allows me to use it within server components, leaves, or layouts. With that in ...

javascriptreactjsnext.jsbeta

Is there a way to retrieve a collection of files with a particular file extension by utilizing node.js?

The fs package in Node.js provides a variety of methods for listing directories: fs.readdir(path, [callback]) - This asynchronous method reads the contents of a directory. The callback function receives two arguments (err, files), with files being an arra ...

javascriptnode.js

Solution: Resolve clientY scrolling issue within an HTML document

I am facing an issue with the positioning of my context menu. When I right-click and scroll down, the menu does not maintain its regular position. Instead of appearing to the right of the mouse cursor when stationary, it moves below the cursor based on how ...

javascripthtmlcssbootstrap-5

Choosing CSS/JS selector: Pick the final element with a class that does not match

My goal is to extract the most recent td element from the latest tr within an HTML table, ensuring that the latest td does not belong to the disabled class. I am attempting to achieve this using pure JavaScript with CSS selectors (without relying on jQuer ...

javascriptcssselectelement

Using addClass and removeClass functions in JQuery when selecting a radio button

I am facing an issue with my radio buttons being displayed as images. When a picture (radio button) is selected, I want the other pictures to become hidden. To achieve this, I plan to add a class to the checked picture and then add another class to the unc ...

javascriptjqueryhtmlradio-buttonchecked

The error "JSON is not defined" occurs in Internet Explorer, but not in Chrome

I encountered an issue with my jQuery ajax call in IE9, specifically when utilizing Json.stringify(). An error message appeared: 'Microsoft JScript runtime error: 'JSON' is undefined' Oddly enough, this function was functioning proper ...

jqueryajaxjsoninternet-explorer

Capturing the chosen value from a jQuery drop-down menu

How can I retrieve the inner HTML of the selected option from a dropdown instead of its value? In the example, I am looking to extract 'CO'. Despite that alert($('#mydropdown').val()); returning 1, I'm interested in the actual text ...

jqueryjquery-ui

Modify the color of drop-down menu links

Recently, I set up a drop-down menu containing links. Initially, when hovering over the names in the menu, they would change color and display the drop-down. I had successfully made all the names golden, with the hovering name turning black while display ...

htmlcssdrop-down-menu

Express displays HTML code as plain text

I am currently facing an issue where I am trying to display an html table on /guestbook.ejs and then redirect it to /guestbook. However, the content of my guestbook.ejs file is being displayed as plain text rather than rendering the HTML code. Below is th ...

javascripthtmlexpress

Tips on displaying JSON data in the browser console using console.log for API consumption

I'm having trouble creating an api to output data parsed from an xml file. When I console.log the necessary data, it shows up fine, but when I try to display it in the browser, I only get an empty array. Any suggestions on what could be causing this i ...

javascriptnode.jsjsonexpressxml-parsing

Is using tables still considered a recommended practice for organizing a layout such as the one shown in the [IMG]?

Looking for recommendations on arranging images in the footer, in line with the design mockup using HTML/CSS. Wondering if tables are still a viable option for this purpose? ...

htmlcsshtml-table

Retrieve information from buttons generated within a while loop

My script uses a while loop to iterate through the drivers table and populate buttons with their names. function displayDriversMenu() { global $conn; $query = mysqli_query($conn, "SELECT * FROM drivers"); ...

phphtmlmysql

Error: ng-messages syntax issue with the field parameter

Encountering the following error: Syntax Error: Token '{' invalid key at column 2 of the expression [{{field}}.$error] starting at [{field}}.$error]. when attempting to execute the code below (form-field.html) <div class='row form-grou ...

javascriptangularjs

Positioning Google Chart in HTML

I'm attempting to arrange three distinct Google pie charts in a horizontal layout. At present, I have applied inline CSS for formatting purposes. Oddly enough, the third chart always ends up on a separate line. Could anyone kindly point out my error? ...

htmlcss

What are the best practices for implementing serialization in NestJS?

Recently, I delved into a fresh NestJs project and encountered a hurdle while trying to integrate serialization. The goal was to transform objects before sending them in a network response. Initially, everything seemed to be working smoothly until I attemp ...

javascriptnode.jsnestjsclass-transformer

Executing a JQuery click event without triggering a page refresh

I'm dealing with a basic form on a webpage <div class="data-form"> <p>Are you hungry?</p> <form> <label class="radio-inline"><input type="radio" name="optradio" value="yes">Yes</label> ...

javascriptjqueryajax