JS: Clicking on a object from array

Question

I have a array of objects that I included into my HTML. I have to be able to click on <a href='#' class='addToCart'>Order</a> and add the clicked object data to my console.log("...");.

What is the best way to do this?

Snippet:

"use strict";

document.addEventListener('DOMContentLoaded', loadMeals);

const meals = [
    {
        id: 1,
        title: 'Strawberry Salad with Poppy Seed Dressing',
        img: 'Strawberry-Salad-with-Poppy-Seed-Dressing.jpg',
        book: 1,
        calories: 298,
        servings: 3,
        type: 'lunch',
        price: 15,
        cook: 'Jenny Jefferson',
        quantity: 10,
    },
    {
        id: 2,
        title: 'Cashew Turkey Salad Sandwiches',
        img: 'turkey-sandwich.jpg',
        book: 2,
        calories: 198,
        servings: 2,
        type: 'lunch',
        price: 9,
        cook: 'Jenny Jefferson',
        quantity: 10
    }
];


function loadMeals() {
    let i = 0;
    let id = 1;
    let fillMealList = document.querySelector("#fillMealList");
    for (let i = 0; i < meals.length; i++) {
        let item = meals.find(item => item.id === id);
        fillMealList.innerHTML +=
            "<article>"+
            "<h3>" + item.title + "</h3>"+
            "<figure>"+
            "<img src='images/" + item.img + "'" +">" +
            "<figcaption>"+
            "Meal by: " +"<span>" + item.cook + "</span>" +
            "</figcaption>" +
            "</figure>"+
            "<div class='info'>"+
            "<p>€ <span>" + item.price + "</span>" + "/pp" + "</p>" +
            "<a href='#' class='addToCart'>Order</a>"+
            "</div>"+
            "</article>";
        id++;
    }
}

<div id="mealList">
            <div class="flexcontainer" id="fillMealList"></div>
            </div>

Please post your HTML code as well or make a working demo/fiddle. — cнŝdk
– cнŝdk, Commented Dec 11, 2018 at 8:02

Mr. X · Accepted Answer · 2018-12-11 08:19:58Z

1

Change your hyperlink HTML as below:

"<a href='javascript:logMeal(" + item.id + ")' class='addToCart'>Order</a>"+

And add a new function called logMeal as below:

function logMeal(id) {
    console.log(meals.find(item => item.id === id));
}

answered Dec 11, 2018 at 8:19

Mr. X

1,0371 gold badge16 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Agrevia Over a year ago

Okay, I did this but i'ts showing the same meal ( with id== 1) even if i click the one with id == 2

KLTR · Accepted Answer · 2018-12-11 08:14:07Z

1

you can just add an onclick Event to your <a> tag : <a class="addToCart" onclick="addToCart(item)">order</a>

then define the function addToCart()

function addToCart(item) {              
console.log(item)
}

answered Dec 11, 2018 at 8:14

KLTR

1,3442 gold badges14 silver badges38 bronze badges

Collectives™ on Stack Overflow

JS: Clicking on a object from array

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related