Leveraging Bootstrap grids with JavaScript

$.getJSON('http://localhost/REST_API/api/post/read.php', function(data) {
    var count = 0;
    data.forEach(obj => {
        if(count % 3 === 0) {
            $( ".monsterlist" ).append("<div class='row'>"); 
        }

        $( ".monsterlist" ).append("<div class='col-sm-4'>");
        $( ".monsterlist" ).append("<div class='card' style='width:400px;'>"); 
        $( ".monsterlist" ).append("<img class='card-img-top' src='img/monster_img/"+ obj.monster_img+".png' style='width:200px;height:200px;'>"); 
        console.log(obj.monster_img);
        $( ".monsterlist" ).append("<div class='card-body'>"); 
        $( ".monsterlist" ).append("<h4 class'card-title'>"+obj.monster_name+"</h4>"); 
        $( ".monsterlist" ).append("<p class='card-text'>"+obj.monster_type+"</p>"); 
        $( ".monsterlist" ).append("</div></div></div>");

        count++;
    });
});

Hello Everyone. I have been experimenting with my own APIs and everything seems to be working well. However, I am currently facing a challenge where I need to display the output in rows of three objects each.

I've tried different methods but haven't had any success so far. If anyone could provide some guidance on how to achieve this, I would greatly appreciate it :) Here's an example of what I've attempted so far enter link description here

javascriptbootstrap-4

Answer №1

To enable automatic column breaking in Bootstrap, simply apply the class col-4 to each column element you create, with a maximum of 12 columns per row.

When using this function, consider structuring your code like so:

let card = `
<div class="card col-4" style='width:400px;'>
  <img class='card-img-top' src='img/monster_img/${obj.monster_img}.png' style='width:200px;height:200px;'>
  <div class='card-body'>
    <h4 class'card-title'>${obj.monster_name}</h4>
    <p class='card-text'>${obj.monster_type}</p>
  </div>
</div>
`;
$(".monsterlist").append(card);

For more information on Template Strings, check out This Reference.

Using jQuery's $(node).append(), ensure that all elements are appended to the specified node. In this case, the node .monsterlist should contain all child nodes of the card-block for proper formatting.

The class .monsterlist must also include the class row for correct styling:

<div class="monsterlist row"></div>

Answer №2

Check out this helpful resource on using column breaks in Bootstrap: https://getbootstrap.com/docs/4.5/layout/grid/#column-breaks

<div class="container">
  <div class="row">
    $.getJSON('http://localhost/REST_API/api/post/read.php', function(data) {
data.forEach((obj,index) => {
    $( ".monsterlist" ).append("<div class='card' style='width:400px;'>"); 
    $( ".monsterlist" ).append("<img class='card-img-top' src='img/monster_img/"+ obj.monster_img+".png' style='width:200px;height:200px;'>"); 
    console.log(obj.monster_img);
    $( ".monsterlist" ).append("<div class='card-body'>"); 
    $( ".monsterlist" ).append("<h4 class'card-title'>"+obj.monster_name+"</h4>"); 
    $( ".monsterlist" ).append("<p class='card-text'>"+obj.monster_type+"</p>"); 
    $( ".monsterlist" ).append("</div></div>");
    if(index%3===0 && index > 0){
       <!-- Make sure the next columns start on a new line -->
       $( ".monsterlist" ).append("<div class="w-100"></div>");
    }
  });
});  
  </div>   
</div>

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

Vanishing Tooltip following an implementation of the backdrop-filter

I'm having an issue with the blur effect on my background image. Although it works well, my tooltips also end up being blurred behind the divs: https://i.stack.imgur.com/BMdh4.png Is there a way to ensure that my tooltips stay on top of the subseque ...

javascripthtmlcss

Is there a way to relocate the collapse button to the bottom after it has been clicked?

I have been using Bootstrap to design a expandable card that can be expanded when clicked. I am currently using the collapse feature, but I am facing an issue where the button remains in its original position, whereas I want it to move to the bottom of the ...

jqueryhtmlcsstwitter-bootstrapbootstrap-4

Unable to uncheck all checkboxes

My checkbox list has a checkbox at the top to select all checkboxes, but after selecting them all, I encounter issues in clearing them. Here is the code snippet for the implementation: class App extends React.Component { state = { checked: undefined } ...

javascriptreactjscheckbox

What is the process for loading data with no input provided?

I have come across a situation where my HTML table is populated with various account numbers. https://i.sstatic.net/qJc2E.png When I input the account number 979545130406, the filter works perfectly fine. https://i.sstatic.net/Y4Rwk.png However, the is ...

javascriptangulartypescript

Error encountered while compiling NextJS: Unexpected use of single quotation mark in jsx-quotes

I can't seem to compile my NextJs 13 app without encountering errors. Take a look at my shortened eslintrc.js file below: module.exports = { env: { browser: true, es2021: true, }, extends: [ 'plugin:react/recommended', ...

javascriptreactjsnext.jseslint

Is there a way to adjust the transparency of individual words in text as you scroll down a page, similar to the effect on https://joincly

Is there a way to achieve a text filling effect on page scroll similar to the one found here: . The specific section reads: "Deepen customer relationships. Own the brand experience. Add high margin revenue. Manage it all in one place. Get back your pr ...

javascriptcssanimationscrollopacity

Automatic line breaks within a JavaScript code can be achieved by using

I need help formatting this text: hello everyone. My name is PETER. hahahah ahahah .... If I have a fixed width, how can I automatically line break the text to look like this: hello everyone. My name is PETER. hahahah ahahah ...

javascriptjquery

Troubleshoot: How to Fix the socket.io net::ERR_CONNECTION_TIMED_OUT

I am facing an issue with my website's real-time chat functionality. It works perfectly on localhost without any errors. However, when I try to run it on the server, I encounter the following error: http://my.domain:52398/socket.io/?EIO=3&transpo ...

javascriptnode.jssocketschatlivechat

Encountering an issue with Angular directive attributes

I am attempting to create an angular directive that will extract a substring from a passed-in attribute. Below is the code I have written: HTML: <body ng-controller="MainCtrl"> <div><substring message="This is a test."></substri ...

javascriptangularjs

Discover how to shallow test for the presence of a wrapped component using Jest and Enzyme

Currently, I am in the process of testing a component that dynamically renders another wrapped component based on certain conditions. My testing tools include enzyme and jest, with the root component being rendered using the shallow() method. The main chal ...

javascriptreactjsjestjsenzyme

Encountering issues with verifying login credentials in Angular 2

Greetings! I have designed a login page where the user will be logged in if the response is successful, otherwise an error message will be displayed. Below is the JSON data with email and password fields: { Email": "<a href="/cdn-cgi/l/email-protect ...

javascriptangulartypescript

The A-Frame buffer geometry merger may cause unexpected entity shifts under certain circumstances

My A-Frame scene has a simple issue with the buffer-geometry-merger component. It works perfectly fine when entities are written in static HTML, but not when injected into the DOM using an A-Frame component. It seems like the geometry gets shifted, as if t ...

javascripthtmlthree.jsaframe

using javascript to access the window's global variables from another window

After opening a new window from a webpage using window.open(url);, I've defined some global variables in the original window. I am now trying to figure out how to access these variables in the newly opened window. Does anyone have a solution for this ...

javascriptjqueryangularjsbackbone.jsbackbone-views

Retrieve the latest entry from a JSON file containing epoch timestamps

Currently, I am in the process of developing an app using angularjs. In my json data, I have timestamps and corresponding values like below: { "dps": { "1455719820": 0, "1455720150": 0, "1455720480": 0, "1455720810": 0, " ...

javascriptangularjsjson

Navigating through different views in Angular 2 using UI Router and ng2 routing directly from

I am currently utilizing the UI-Router ng2 and attempting to change routes after a certain function is triggered. My code snippet looks like this: SomeFunction() { if(condition){ router.navigate(['/newRouteName']); } } It's ...

javascriptangularroutesangular-ui-router

Tips for conducting performance analysis in React 16

In the React documentation, it is mentioned that react-addons-perf does not function with React 16 and suggests using Chrome's built-in tools for equivalent functionality. However, in my experience, I have not found this to be true. For example, let& ...

javascriptperformancereactjsweb

moment.js incorrectly interprets the month as the day instead of the actual day

I am currently using moment.js (moment-with-locales.js - v.2.14.1) in my project. My goal is to extract only the date from a datetime string and remove the time. However, when I use the .format() method of moment.js, I receive an incorrect date. The datet ...

javascriptangularjsdatetimemomentjs

Navigating through Leaflet to reference a .json file

Looking to integrate a .json vector layer into a Leaflet.js map, which can be seen on the GitHub page here, with the source code available here. Here's a condensed version of the file for reference (full version visible on the linked GitHub page). & ...

javascriptjsonleaflet

Angular 4 with Universal: Implementing 404 Status Code in Header for /404 Page Component

After researching and reviewing numerous StackOverflow inquiries, I have come to the conclusion that headers are derived from responses served by servers, making it a non-issue. I attempted to rectify the situation from my server.ts file but unfortunately ...

javascriptangularexpressangular2-routingangular-universal

The e2e Protractor test is unable to identify the Angular component within a complex Angular router with multiple layers

I am currently working on an Angular application and I need to set up end-to-end testing for this project. Angular Package: 4.6.6 Protractor: 5.3.0 In addition, my project includes a multi-layer router that wraps the router-outlet into another component ...

javascriptangularjasmineprotractorfunctional-testing