Question 109482 in Json Question posted in
Our archive of expertly curated questions and answers provides insights and solutions to common problems related to this popular data interchange format. From parsing and manipulating JSON data to integrating it with various programming languages and web services, our archive has got you covered. Start exploring today and take your JSON skills to the next level

Json – I would like to make a loop with this code to have several card swith a object

enter code herehello I would like to loop on a json file to create maps but I can’t find the loop I need, here is my obect json

type here javascript
let element=document.createElement`
<div class="grid-item-product">
    <img src="${Produits.img}" alt="${Produits.id}">
   <div class="card-content">
        <button id="control-price-sucette">
            <i class="fa-sharp fa-solid fa-pen"></i>
       </button>
       <h3>${title}</h3> 
        <span>A partir de <strong id="price-sucette">${price} €</strong> </span>
</div>
    </div>
 `
 product.appendChild(element)

enter code hereexport const Produits= [ 
{
    id:"sucette",
    img:"./images/sucette.jpg",
    title:"Sucette",
    Price:25,
    reduction:0,
    
},
{
    id :"cannes",
    img:"./images/canne.jpg",
    title : "Cannes",
    price : 25,
    reduction:30
},
{
    id:"oursons",
    title:"Ourson",
    img:"./image/ourson",
    price:20,
    reduction:0
},
{
    id:"bonbon_durs",
    title:"Bonbons durs",
    img:"./images/dur.jpg",
    price: 39,
    reduction:25
},
{
    id:"bonbon_acidulées",
    title:"Bonbons acidulées",
    img:"./image/acidul.jpg",
    price:30,
    reduction:0
},
{
    id:"brochette",
    title:"Brochette",
    img:"./images/brochette.jpg",
    price:30,
    reduction:20 
},
{
    _id: "cake_balls",
    get id() {
        return this._id
    },
    set id(value) {
        this._id = value
    },
    img:"./images/cake-ball.jpg",
    title:"Cake bals",
    price:40,
    reduction:20
},
{
    _id_1: "cake_pops",
    get id() {
        return this._id_1
    },
    set id(value) {
        this._id_1 = value
    },
    title:"cake pops",
    img:"./images/cake-pops.jpg",
    price:50,
    reduction:30
},
{
    id: "cake_pops_coeur",
    title:"cake pops coeur",
    img:"./images/cake-pops-coeur",
    price:50,
    reduction:20
}

]

Tags:

3

Answers


  1. 0

    It is not quite clear from your question what you need.
    Although i think you want to loop over the Items to get their attributes.
    In this case i think this should work:

    myArray.map((item, index) => {
        console.log(item.id, item.title, item.price);
});
    Login or Signup to reply.
  2. 0

    The best loop is Javascript’s .map function.

    Your HTML will need:

    • an opening DIV
    • a loop, producing the repeating rows (one for each product)
    • a closing DIV

    The .map function maps the array of products to an array of strings (not to a single long string) so you can use the .join function to join the individual strings into one long one.

    Et voilà:

    const Produits = [{
    id: "sucette",
    img: "./images/sucette.jpg",
    title: "Sucette",
    Price: 25,
    reduction: 0,

  },
  {
    id: "cannes",
    img: "./images/canne.jpg",
    title: "Cannes",
    price: 25,
    reduction: 30
  },
  {
    id: "oursons",
    title: "Ourson",
    img: "./image/ourson",
    price: 20,
    reduction: 0
  },
  {
    id: "bonbon_durs",
    title: "Bonbons durs",
    img: "./images/dur.jpg",
    price: 39,
    reduction: 25
  },
  {
    id: "bonbon_acidulées",
    title: "Bonbons acidulées",
    img: "./image/acidul.jpg",
    price: 30,
    reduction: 0
  },
  {
    id: "brochette",
    title: "Brochette",
    img: "./images/brochette.jpg",
    price: 30,
    reduction: 20
  },
  {
    _id: "cake_balls",
    get id() {
      return this._id
    },
    set id(value) {
      this._id = value
    },
    img: "./images/cake-ball.jpg",
    title: "Cake bals",
    price: 40,
    reduction: 20
  },
  {
    _id_1: "cake_pops",
    get id() {
      return this._id_1
    },
    set id(value) {
      this._id_1 = value
    },
    title: "cake pops",
    img: "./images/cake-pops.jpg",
    price: 50,
    reduction: 30
  },
  {
    id: "cake_pops_coeur",
    title: "cake pops coeur",
    img: "./images/cake-pops-coeur",
    price: 50,
    reduction: 20
  }
]

const html =  "<div>" + 
Produits.map(produit => `
<div class="grid-item-product">
    <img src="${produit.img}" alt="${produit.id}">
    <div class="card-content">
        <button id="control-price-sucette">
            <i class="fa-sharp fa-solid fa-pen"></i>
       </button>
       <h3>${produit.title}</h3> 
           <span>A partir de <strong id="price-sucette">${produit.price} €</strong> </span>
    </div>    
</div>
`).join("") 
+ "</div>"

const div = document.createElement('div');
div.innerHTML = html;

document.querySelector('body').appendChild(div)
    Login or Signup to reply.
  3. 0

    You can do the loop at that JSON using .forEach method. Try this:

    const Produits= [ 
{
    id:"sucette",
    img:"./images/sucette.jpg",
    title:"Sucette",
    Price:25,
    reduction:0,
    
},
{
    id :"cannes",
    img:"./images/canne.jpg",
    title : "Cannes",
    price : 25,
    reduction:30
},
{
    id:"oursons",
    title:"Ourson",
    img:"./image/ourson",
    price:20,
    reduction:0
},
{
    id:"bonbon_durs",
    title:"Bonbons durs",
    img:"./images/dur.jpg",
    price: 39,
    reduction:25
},
{
    id:"bonbon_acidulées",
    title:"Bonbons acidulées",
    img:"./image/acidul.jpg",
    price:30,
    reduction:0
},
{
    id:"brochette",
    title:"Brochette",
    img:"./images/brochette.jpg",
    price:30,
    reduction:20 
},
{
    _id: "cake_balls",
    get id() {
        return this._id
    },
    set id(value) {
        this._id = value
    },
    img:"./images/cake-ball.jpg",
    title:"Cake bals",
    price:40,
    reduction:20
},
{
    _id_1: "cake_pops",
    get id() {
        return this._id_1
    },
    set id(value) {
        this._id_1 = value
    },
    title:"cake pops",
    img:"./images/cake-pops.jpg",
    price:50,
    reduction:30
},
{
    id: "cake_pops_coeur",
    title:"cake pops coeur",
    img:"./images/cake-pops-coeur",
    price:50,
    reduction:20
}];

let elements = '';
Produits.forEach((p)=>{
  elements += `
    <div class="grid-item-product">
      <img src="${p.img}" alt="${p.id}">
      <div class="card-content">
        <button id="control-price-sucette">
          <i class="fa-sharp fa-solid fa-pen"></i>
        </button>
        <h3>${p.title}</h3> 
        <span>A partir de <strong id="price-sucette">${p.price} €</strong> </span>
      </div>
    </div>
  `;
});
let product = document.getElementById("product");
product.innerHTML = elements;
    .grid-item-product {
  display: table;
  border: 1px solid black;
}
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.2/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.2/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/js/all.min.js"></script>

<div id="product"></div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search