Sorting JSON data in EJS based on categories

Hello, I am facing a dilemma. I need to apply category filtering to a JSON file but I am unsure of how to proceed with it. For instance, I wish to filter the 'vida' category along with its description and price.

I seem to be stuck at this juncture in my assignment and cannot figure out how to make progress.

If there is any online resource or link that can provide answers to these questions, I would greatly appreciate it.

    <div class="container">
        <div class="row">
          <ul>
            <% productsData.forEach(function (product) { %>
            <li>
              <br>
              <div class="col-sm-12 col-md-12 col-lg-12 prdDet">
                      
  
              <div class="col-sm-4 col-md-4 imgcart">
                <img src="../images/prdImages/<%= product.prd_image %>" style="width: 200px;height: 200px;">
              </div>
              <br>
              <div class="col-sm-8 col-md-8">
                <b>Categoria:</b> <%= product.prd_category %> <br>
                <b>Descripcion:</b> <%= product.prd_description %> <br>
                <b>Precio:</b> $<%= product.prd_price %> <br>
              <br>

                <br>
              </div>
              </div>
            </li>
            <% }) %>
      
          </ul>
        </div>
      </div>

[
 {
  "id": 5,
  "prd_category": "VIDA",
  "prd_description": "Content will not be repeated here.",
  "prd_price": 1202,
  "prd_image": "1579108895351.jpg"
 },
 {
  "id": 8,
  "prd_category": "VIDA",
  "prd_description": "Duplicate content will not be displayed again.",
  "prd_price": 2038,
  "prd_image": "1579108921234.jpg"
 } 
 // Remaining data entries for VIDA category excluded for brevity 
 

Answer №1

One day, the answer will come in handy for someone else!

   <%  productsData.filter(function (el) { %>
    <%   return (el.prd_category === "VIDA"); %>
    <% }).map(function(el) { %>
        <b>Category:</b>   <%=  el.prd_category %>  <br>
        <b>Description:</b>   <%=  el.prd_description %>  <br>
        <b>Price: $</b>   <%=  el.prd_price %>  <br>
        <br>
        <% }).sort(); %>

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

Tips for enabling browser back and forward functionality in a one-page website design

Building on the previous discussion about optimizing a horizontal sliding layout (Most efficient way to do a horizontal sliding layout), I'm curious if it's feasible to enable the back and forward buttons in the browser when implementing a single ...

Sorting tables in Jquery with advanced filter options and seamless integration with an ajax pager

I've implemented a tablesorter library for sorting and filtering data in a table along with a plugin that allows me to paginate the table across multiple pages. Due to the increasing number of records in my table causing slow loading times (>60 secon ...

Preview multiple images while uploading in a React JS application

In order to achieve multiple image upload with preview using React JS, I attempted the code below. However, I encountered an error in the console: Uncaught DOMException: Failed to set the 'value' property on 'HTMLInputElement': This ...

Issues encountered when trying to use default color classes in Tailwind CSS

I'm currently working on a React project that utilizes the Tailwind CSS Framework. To integrate Tailwind into my React app, I used NPM to install it in the following way: npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p After i ...

Having trouble selecting the clicked element after a successful Ajax call, especially when there are multiple elements with the same name

When dealing with multiple elements that share the same class name, I am attempting to target the 'clicked' element upon a successful Ajax return. <td data-name='tom' class="status"><a href="">click< ...

Utilizing JSON Data for Dynamically Displaying Database Objects on a Google Map

After carefully reviewing the information provided in the initial responses and working on implementation, I am updating this question. I am currently utilizing the Google Maps API to incorporate a map into my Ruby on Rails website. Within my markets mode ...

What are the placeholders for the "localIdentName" query tag in a custom CSS-loader for Webpack?

Just starting out with Webpack and experimenting with the css-loader. I came across the option to specify a localIdentName query tag on the Github page under "Local Scope". This tag allows us to define our own custom values for how classes should be named ...

Locate all the properties that are empty within each object contained in a JavaScript array

Consider this scenario: if I were to have an array of JavaScript objects like the following: var jsObjects = [ {a: 1, b: 2, c: null, d: 3, e: null}, {a: 3, b: null, c: null, d: 5, e: null}, {a: null, b: 6, c: null, d: 3, e: null}, {a: null, ...

What is the simplest way to transform a JSON containing strings into a JSON with arrays?

I am tasked with creating a method named public string PrepareForDeserialization(string json) that will transform a JSON string such as: {"To":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a2ccc3cfc7e2c1cdcfd2c3ccdb8cc1cdcf" ...

How can I create an HTML select dropdown menu with a maximum height of 100% and a dynamic size?

The dropdown menu I created using an HTML select tag contains a total of 152 options. However, the large number of options causes some of them to be out of view on most monitors when the size is set to 152. I attempted to limit the number of displayed opti ...

Multiple minute delays are causing issues for the Cron server due to the use of setTimeout()

I have an active 'cron' server that is responsible for executing timed commands scheduled in the future. This server is dedicated solely to this task. On my personal laptop, everything runs smoothly and functions are executed on time. However, ...

Spring's MVC framework encountered a 400 Bad Request error when processing an

Encountering a recurring issue with receiving a 400 Bad Request error during Ajax requests. It's puzzling as to what could be causing this problem. The technologies being used include: <dependency> <groupId>org.codehaus.jackson</gr ...

Why is applying CSS on an li element using .css() in JQuery not functioning?

Hey there! Could you please review my code? I'm attempting to add a top position to the <li> element using a variable in jQuery, but I'm not sure how to do it. Here's the code: <script> $(document).ready(function(){ ...

Integrate a dictionary into a JSON object using Python Flask

While I am relatively new to coding and working on my own small projects, I have come across an issue that has been troubling me for the past few days. Essentially, what I am trying to do is append my dictionary to a list and then dump it into a JSON file ...

Automatic Expansion Feature for HTML Tables

http://jsfiddle.net/bzL7p87k/ In my table, placeholders are filled with special words. However, what happens when I have more than 4 rows? For instance, if there are 21 placeholders for 21 rows? What I mean is this: I only have one row with a placeholder ...

Utilizing v-model for dynamic binding within a v-for iteration

I'm currently working on binding v-model dynamically to an object property within an array of objects. I am unsure about how to accomplish this task. The objective is to choose a user using the Select HTML tag and then display the list of that user&ap ...

Utilizing Node.js and Jasmine: Preventing the invocation of a Promise function to avoid executing the actual code results in DEFAULT_TIMEOUT_INTERVAL

There is a function below that returns a promise. public async getAverageHeadCount(queryParams: Params, childNode: any, careerTrackId: string): Promise<Metric> { const queryId = this.hierarchyServiceApiUrl + "rolling-forecast/ahc/" + q ...

Changing text on a button with JavaScript toggle functionality: A step-by-step guide

I am looking to implement a feature where I can hide and show overflow content in a div. When I click on the expand button, it expands the content. However, I want this button to toggle and change text as well. Thank you! function descriptionHeightMo ...

How to prevent ConcurrentModificationException while converting to Json format?

In our project, we have a custom class called Document that utilizes a private member of type Map<String, Object> to store data. These objects are stored in memory and often modified by multiple threads. Additionally, these objects, particularly the ...

What is the reason behind the blocking of Ajax GET requests without CORS, while JSONP requests are permitted?

Accessing any page on the web through a GET request using HTML tags from a different origin is possible: <script src="http://example.com/user/post?txt=sample"></script> XHR requests to other origins are blocked for security reasons. For examp ...