Is there a way to generate multiple DIVs using the 'append' function in jQuery?

I need help with looping multiple DIV elements.

There are 5 books that I want to loop through in ID: BootLoop.

This is what I have tried so far:

my_orders.append(data[i].order.bname).appendTo("#bookLoop > div > div > div > h3");

my_orders.append(data[i].order.blink).appendTo("#bookLoop > div > div > div > a");

However, it did not work as expected. Can anyone point out where I am making a mistake?

Here is the JavaScript code snippet I'm using:

var my_orders = $("#bookLoop"); 
$.each(data, function(i, order) {
     $("#bookName").append(data[i].order.bname);,
     $("#bookURL").append(data[i].order.blink);
});

Below is the HTML code structure that should be looped:

<div id="bookLoop">
   <div class="col-3">
      <div class="block-content">
        <div class="d-md-flex">
            <h3 id="bookName" class="h4 font-w700"></h3>
        <div>
        <div class="d-md-flex link">
           <a href="#" id="bookURL">Details</a>
        <div>
      <div>
   <div>
<div>

And here is the JSON data for the books:

[
   {"order":{"id":"61","bname":"Book 1","blink":984}},
   {"order":{"id":"42","bname":"Book 2","blink":5414}},
   {"order":{"id":"185","bname":"Book 3","blink":4521}},
   {"order":{"id":"62","bname":"Book 4","blink":41254}},
   {"order":{"id":"15","bname":"Book 5","blink":7464}}
]
javascriptfor-loopappend

Answer №1

It seems like you are looking to add each book and its corresponding link inside the #bookLoop element, with each book and link having their own content.

Here is the code snippet where I create nodes for each book and append them to the my_orders element:

var my_orders = $("#bookLoop"); 
var books = ''
var links = ''

let data = [
   {"order":{"id":"61","bname":"Book 1","blink":984}},
   {"order":{"id":"42","bname":"Book 2","blink":5414}},
   {"order":{"id":"185","bname":"Book 3","blink":4521}},
   {"order":{"id":"62","bname":"Book 4","blink":41254}},
   {"order":{"id":"15","bname":"Book 5","blink":7464}}
]

$.each(data, function(i, order) {
  let col = document.createElement('div')
  col.className = 'col-3'
  
  let content = document.createElement('div')
  content.className = 'block-content'
  
  let flexC = document.createElement('div')
  flexC.className = 'd-md-flex'
  
  let title = document.createElement('h3')
  title.className = 'h4 font-w700'
  title.textContent = data[i].order.bname;
  flexC.append(title)
  
  let flexL = document.createElement('div')
  flexL.className = 'd-md-flex link'
  
  let details = document.createElement('a')
  details.className = 'bookURL'
  details.href = "#"
  details.textContent = "Details: " + data[i].order.blink
  flexL.append(details)
  
  my_orders.append(col)
  col.append(content)
  content.append(flexC)
  content.append(flexL)
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="bookLoop">   
<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

Error message indicates that the attribute in jQuery is not defined

I am currently stuck trying to make a piece of code work, and I feel like I'm just going around in circles. The goal is to halt the click event immediately, perform an action, and then resume. I've experimented with switching between window.ope ...

javascriptjquery

Specialized Sonar JavaScript plugin rule designed to identify specific method calls throughout various source files

In my quest to develop a specialized rule for the Sonar javascript plugin, I am focusing on verifying whether an init() function is invoked within a set of JS source files. To kick things off, I subscribe to call expressions: public void init() { subs ...

javajavascriptsonarqube

What could be causing localStorage to fail to save my data upon reloading the page?

Every time I refresh the page, the state reverts to an empty array. import { useState, useRef, useEffect } from 'react' import './styles.css' import History from './History' const LOCALSTORAGEKEY = './finance/src/app/123 ...

javascriptreactjsreact-hookslocal-storage

Is there a way to create a dictionary in Javascript with all keys pointing to the same value?

I have a scenario where I need to convert an array into an object like this: let arr = ['ABC', 'DEF'] The desired transformation is: let obj = {"ABC": 0, "DEF": 0} Can someone guide me on how to achieve this using ...

javascriptarraysecmascript-6arrow-functions

Sending a batch of data in a single POST request to MongoDB

Currently, I am developing a module that involves creating a post form to collect expense data such as name, date, amount, an image, and description. While I have succeeded in storing the post data into MongoDB for a single row of data, my goal is to allow ...

javascriptmongodbexpresspost

Reorganize child JSON objects into a new object that includes a parent ID

Exploring the realm of JavaScript, I am currently delving into Node.JS to interact with an API and save the data in a SQL Server. Utilizing the "request" and "mssql" Node packages for this task as they possess robust documentation and support. My query re ...

javascriptsql-serverjsonnode.jsnpm

Ways to customize the default countdown timer

I came across this amazing project at https://codepen.io/mattlitzinger/pen/ysowF. While the project is wonderful, I am looking to make some modifications to the code, specifically targeting a specific date. Here is the JavaScript code snippet: var tar ...

javascript

Exploring the intricacies of using jquery text() with HTML Entities

I am having difficulty grasping the intricacies of the jquery text() function when used with HTML Entities. It appears that the text() function converts special HTML Entities back to regular characters. I am particularly uncertain about the behavior of thi ...

javascriptjqueryhtmlhtml-entities

Is it possible to trigger a JavaScript function when scrolling down a specific div?

I have a scenario where I have three different div elements. Whenever I scroll down on any of these divs, I want to trigger a JavaScript function that makes an AJAX call. The data for these divs (with ids 'doc', 'user', and 'lawfir ...

javascriptjqueryhtmlajaxjquery-plugins

Disable the button by checking the checkbox

Can anyone help me with a simple jQuery code to disable the form submission button until a checkbox is checked? I tried some code but it's not working as expected. Any ideas? JS: $(document).ready(function(){ $('#terms').change(function(){ ...

javascriptjqueryforms

Exploring ways to check async calls within a React functional component

I have a functional component that utilizes the SpecialistsListService to call an API via Axios. I am struggling to test the async function getSpecialistsList and useEffect functions within this component. When using a class component, I would simply cal ...

javascriptreactjsfrontendreact-testing-library

A guide to testing the mui Modal onClose method

When using material UI (mui), the Modal component includes an onClose property, which triggers a callback when the component requests to be closed. This allows users to close the modal by clicking outside of its area. <Modal open={open} onCl ...

javascriptreactjstypescriptjestjsmaterial-ui

Can the appearance of the model be adjusted when using the GLTF or GLB format in Three.js?

Initially, I encountered an issue where my model appeared completely black. Although some sources suggested it was due to lighting, adjusting the light did not improve the model. Ultimately, I discovered that the problem lied within the model itself, and I ...

javascripthtmlthree.jsgltf

"Is it possible in Typescript to set the parameters of a returning function as required or optional depending on the parameters of the current

I am currently exploring Typescript and attempting to replicate the functionality of styled-components on a smaller scale. Specifically, I want to make children required if the user passes in 'true' for the children parameter in createStyledCompo ...

javascriptreactjstypescriptstyled-components

Having trouble setting $scope after redirecting to a partial template via routing

Looking to create a website that loads all necessary templates upon the initial visit. Currently, I only have one partial template but plan to add more in the future. Despite having just this one template, I'm struggling with binding the data from my ...

javascriptangularjsangularjs-ng-repeat

Add a message displaying the error in the input field using jQuery Validation

Is there a way to append the jQuery Validation error messages to the input field or get help with positioning them properly? The random popping up of error messages is causing chaos in the form layout. I prefer to have the error messages displayed undern ...

javascriptjqueryformsvalidation

Unveiling the secrets of extracting element content using JavaScript (with JQuery) from an HTML object

I have written the code below to access the page "JQueryPage.aspx" and retrieve data from it using jQuery: <script type="text/javascript> $.get ( "JQueryPage.aspx", function(data) { alert("Data Loaded: " + data); ...

asp.netjavascriptjquery

Could anyone assist me in resolving the error stating, "The 'Argument `where` of type UserWhereUniqueInput needs at least one of `id` arguments"?

Upon investigating, I inserted this console log to determine what data is being received: { username: 'aa', gender: 'Feminino', cargo: '2', email: 'a', password: 'a' } Lately, I've been facing this err ...

javascriptnode.jssqliteserverprisma

What is the method for activating a hook after a state change in a functional component?

I'm currently working on a custom pagination hook that interacts with an API to fetch data similar to React Query. The concept is straightforward. I aim to invoke this hook whenever a specific state (referred to as cursor) undergoes a change. Below i ...

javascriptreactjstypescriptaxios

Is the 'match()' method available in node.js? If it is, what is the proper syntax to use it?

I attempted to utilize the .match() method in node.js, but encountered an error stating that has no method 'match'. Here is the section of code where I invoke the method: fs.readFile('proxy.txt', function (err, data) { if (data.mat ...

javascriptnode.js