Ways to showcase only five items of data using the map method

Question

Ways to showcase only five items of data using the map method

I'm working on a project that involves displaying data from an external Json file on my site. However, I'm facing an issue where I need to limit the display to only 5 items.

const displayCharacters = (characters) => {
                characters.sort((a, b) => {
                    return a.rate - b.rate;
                });
                characters.sort((a, b) => b.rate - a.rate);

                characters.forEach(() => {
                    const htmlString = characters
                        .map((character) => {
                            return `
                                <div class="col-6 my-2" onClick="addToCart(${character.id})"></div>
                                    <div class="menu card my-3" style="width: 120px">
                                        <div class="card-body">
                                            <h5 class="menu-name">${character.nama}</h5>
                                            <p> ${character.harga}</p>
                                        </div>
                                    </div>
                                    </div>
                            `;
                        })
                        .join('');
                    charactersList.innerHTML = htmlString;
                });
            };

            loadCharacters();

If anyone could offer assistance, it would be greatly appreciated.

javascript arrays json sorting object

Answer 1

Answer №1

If you want to manipulate an array in JavaScript, you can utilize the slice method before applying the map function for desired results.

    const showItems = (items) => {
          items.sort((x, y) => {
            return x.value - y.value;
          });
          items.sort((x, y) => y.value - x.value);
        
          items.forEach(() => {
            const itemHTML = items
              .slice(0, 5)
              .map((item) => {
                return `
                          <div class="col-6 my-2" onClick="addToBasket(${item.id} )"></div>
                            <div class="product card my-3" style="width: 120px">
                              <div class="card-body">
                                <h5 class="product-name">${item.name}</h5>
                                <p> ${item.price}</p>
                              </div>
                            </div>
                          </div>
                  `;
              })
              .join('') ;
            itemList.innerHTML = itemHTML;
          });
        };
        
        loadItems();

Answer 2

If you want to manipulate an array in JavaScript, you can utilize the slice method before applying the map function for desired results.

    const showItems = (items) => {
          items.sort((x, y) => {
            return x.value - y.value;
          });
          items.sort((x, y) => y.value - x.value);
        
          items.forEach(() => {
            const itemHTML = items
              .slice(0, 5)
              .map((item) => {
                return `
                          <div class="col-6 my-2" onClick="addToBasket(${item.id} )"></div>
                            <div class="product card my-3" style="width: 120px">
                              <div class="card-body">
                                <h5 class="product-name">${item.name}</h5>
                                <p> ${item.price}</p>
                              </div>
                            </div>
                          </div>
                  `;
              })
              .join('') ;
            itemList.innerHTML = itemHTML;
          });
        };
        
        loadItems();

Answer 3

Answer №2

console.dir(obj,{depth:5})

In the context of web development

Answer 4

console.dir(obj,{depth:5})

In the context of web development

Answer 5

Answer №3

You can iterate through the index in a foreach loop and check if the index is less than or equal to 5

        const displayCharacters = (characters) => {
                          // Sorting characters based on rate in ascending order
                          characters.sort((a, b) => a.rate - b.rate);
                          // Sorting characters based on rate in descending order
                          characters.sort((a, b) => b.rate - a.rate);
                        
                          characters.forEach(funtion(data,index) { //Using index value to set data limit 
                            const htmlString = characters
                              .map((character) => {
                            if(index=<5){ //Checking if index is less than or equal to 5
                                return `
                                          <div class="col-6 my-2" onClick="addToCart(${data.id} )">
                                            <div class="menu card my-3" style="width: 120px">
                                              <div class="card-body">
                                                <h5 class="menu-name">${data.nama}</h5>
                                                <p> ${data.harga}</p>
                                              </div>
                                            </div>
                                          </div>
                                  `;
 }
                              })
                              .join('') ;
                            charactersList.innerHTML = htmlString;
    
                          });
           
                        };
                        
                        loadCharacters();

Answer 6

You can iterate through the index in a foreach loop and check if the index is less than or equal to 5

        const displayCharacters = (characters) => {
                          // Sorting characters based on rate in ascending order
                          characters.sort((a, b) => a.rate - b.rate);
                          // Sorting characters based on rate in descending order
                          characters.sort((a, b) => b.rate - a.rate);
                        
                          characters.forEach(funtion(data,index) { //Using index value to set data limit 
                            const htmlString = characters
                              .map((character) => {
                            if(index=<5){ //Checking if index is less than or equal to 5
                                return `
                                          <div class="col-6 my-2" onClick="addToCart(${data.id} )">
                                            <div class="menu card my-3" style="width: 120px">
                                              <div class="card-body">
                                                <h5 class="menu-name">${data.nama}</h5>
                                                <p> ${data.harga}</p>
                                              </div>
                                            </div>
                                          </div>
                                  `;
 }
                              })
                              .join('') ;
                            charactersList.innerHTML = htmlString;
    
                          });
           
                        };
                        
                        loadCharacters();

Ways to showcase only five items of data using the map method

Answer №1

Answer №2

Answer №3

Similar questions

The issue of infinite scroll functionality not functioning properly when using both Will Paginate and Masonry

JSP - Submitting a form through a link click: A complete guide

Wavy CSS Animation

Updating the object does not result in the interpolation value being updated as well

Show a pop-up notification when the mouse passes over a word in the text

What methods can I use to obtain negative numbers through swipe detection?

Alternate routing based on conditions in Angular

Encountering a 500 error within a Passport JS and React application

`How can textures be added to the front and back of a shape in Three.js geometry?`

Is there a way to implement a timeout for redirection or new pages opened on a different server?

Why is receiving input value in React not successful?

The React page is stuck in a perpetual cycle of reloading every single second

What is the method to detect the presence of any value from one array in another array using AngularJS?

What is the purpose of returning a function in a React Hook?

Sorting DataGridView columns based on matching strings

Building React applications with server-side rendering using custom HTML structures

Utilizing Jquery to retrieve an array as the return value from a $.post request

Establish a timeout for the Material UI drawer to close automatically after being opened

How to generate a JSON object in a Bash script by capturing the output of a command

Maximizing code reusability in Javascript and React: A guide to avoiding repetition