How to give a class to nested array elements?

Question

I have a JSON that I stored inside of a variable called photographersInfo and I am getting the data from there but what I want to do is: I want to show the tags corresponding to each photographer with a border given to each one of them! like in this photo The Result - Photo

I use a template literal to show information in the HTML, for the moment I am using the method join() to transform the element to a string but how can I give a border to each TAG ?

This is my code:

photographersInfo.forEach((item) => { 

  const photographersDiv = document.getElementById('container');
  const div = document.createElement("div");
  photographersDiv.appendChild(div);

  div.innerHTML = `
    <div class="photographerContainer">
        <div class="portraitBox">
          <img src="${item.portrait}" alt="photo">
        </div>
        <h1 class="name">${item.name}</h1>
        <p class="city">${item.city}, ${item.country}</p>
        <p class="tagline">${item.tagline}</p>
        <p class="price">${item.price}€/jour</p>
        <p class="tags">${item.tags.join(" ")}</p>  
    </div>
    `   
});

This is my JSON data:

let photographersInfo = [
      {
        "name": "Mimi Keel",
        "id": 243,
        "city": "London",
        "country": "UK",
        "tags": ["#portrait", "#events", "#travel", "#animals"],
        "tagline": "Voir le beau dans le quotidien",
        "price": 400,
        "portrait": "/Photos/Portrait/MimiKeel.jpg"
      },
      {
        "name": "Ellie-Rose Wilkens",
        "id": 930,
        "city": "Paris",
        "country": "France",
        "tags": ["#sports", "#architecture"],
        "tagline": "Capturer des compositions complexes",
        "price": 250,
        "portrait": "/Photos/Portrait/EllieRoseWilkens.jpg"
      },
      {
        "name": "Tracy Galindo",
        "id": 82,
        "city": "Montreal",
        "country": "Canada",
        "tags": ["#art", "#fashion", "#events"],
        "tagline": "Photographe freelance",
        "price": 500,
        "portrait": "/Photos/Portrait/TracyGalindo.jpg"
      },
      {
        "name": "Nabeel Bradford",
        "id": 527,
        "city": "Mexico City",
        "country": "Mexico",
        "tags": ["#travel", "#portrait"],
        "tagline": "Toujours aller de l'avant",
        "price": 350,
        "portrait": "/Photos/Portrait/NabeelBrandford.jpg"
      },
      {
        "name": "Rhode Dubois",
        "id": 925,
        "city": "Barcelona",
        "country": "Spain",
        "tags": ["#sport", "#fashion", "#events", "#animals"],
        "tagline": "Je crée des souvenirs",
        "price": 275,
        "portrait": "/Photos/Portrait/RhodeDubois.jpg"
      },
      {
        "name": "Marcel Nikolic",
        "id": 195,
        "city": "Berlin",
        "country": "Germany",
        "tags": ["#travel", "#architecture"],
        "tagline": "Toujours à la recherche de LA photo",
        "price": 300,
        "portrait": "/Photos/Portrait/MarcelNikolic.jpg"
      }
    ]

Map item.tags and create the "tag" in each element.

Roy Bogado
– Roy Bogado

2020-12-24 16:34:19 +00:00
Commented Dec 24, 2020 at 16:34 — Roy Bogado
– Roy Bogado, Commented Dec 24, 2020 at 16:34

Sharon Choong · Accepted Answer · 2020-12-24 17:39:09Z

1

Use map:

${item.tags.map(d => `<span class="tag">${d}</span>`).join(" ")}

where the css could be something like:

.tag {
    border: 1px solid lightgray;
    border-radius: 20px; 
    padding: 5px;
}

answered Dec 24, 2020 at 17:39

Sharon Choong

5962 silver badges8 bronze badges

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

Collectives™ on Stack Overflow

How to give a class to nested array elements?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related