Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by dingus blank
dingus blank
3,229 Points

Need help! Javascript arrays and elements (urgent, buying you a beer)

Hey, i have an assignment that im stuck on. I want to print out a X amount of product boxes containing an image and text. I want mutiple arrays, one for text and one for image. Then i want to print it out like this https://gyazo.com/75bdbf76a1d4b76c2800a4888a18f2a6 Ill buy whoever helps me a beer >.<!

Adam Beer
Adam Beer
11,314 Points

Nice screenshot but please share your whole code :)

4 Answers

lauralouise
lauralouise
14,853 Points
lauralouise
lauralouise
14,853 Points

yes, please share your code!

I'd suggest creating a generic html item that you want to dynamically drop the images/text into, and then just map over it to import the content into. then use an object for each HTML item you want with keys and values containing the images/text per item, that way you can avoid using arrays.

dingus blank
dingus blank
3,229 Points
dingus blank
dingus blank
3,229 Points

Hi! that is not my code, it was just used for illustration. I have no idea how to do this thats why im asking.

Brendan Whiting
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Brendan Whiting
Front End Web Development Techdegree Graduate 84,738 Points
Brendan Whiting
.a{fill-rule:evenodd;}techdegree seal-36
Brendan Whiting
Front End Web Development Techdegree Graduate 84,738 Points

You could do something like this:

<div id="root">
</div>

.item {
  border: 1px solid black;
  width: 100px;
  display: inline-block;
}

const root = document.getElementById("root");

const items = [
  {
    stars: 5,
    imgSrc: "https://via.placeholder.com/100/FF0000",
    description: "Samsung"
  },
  {
    stars: 4,
    imgSrc: "https://via.placeholder.com/100/224400",
    description: "iPhone"
  },
  {
    stars: 3,
    imgSrc: "https://via.placeholder.com/100/110066",
    description: "TV"
  }
];

items.forEach(itemData => {
  const newItem = document.createElement("div");
  newItem.className = "item";
  const content = `
    <img src="${itemData.imgSrc}" />
    <p>${itemData.stars} stars</p>
    <p>${itemData.description}</p>
  `;
  newItem.innerHTML = content;
  root.appendChild(newItem);
})
dingus blank
dingus blank
3,229 Points

Hey! thats a great solution, but one of the demands is we use multiple arrays to store the information. Example images being stored in an image array and text in another array! :D

Brendan Whiting
.a{fill-rule:evenodd;}techdegree seal-36
Brendan Whiting
Front End Web Development Techdegree Graduate 84,738 Points 
const images = [
  "https://via.placeholder.com/100/FF0000",
  "https://via.placeholder.com/100/224400",
  "https://via.placeholder.com/100/110066"
];

const descriptions = [
  "TV",
  "iPhone",
  "Samsung"
];

const stars = [5, 4, 3];

const mergedData = [];

for (let i = 0; i < images.length; i++) {
  mergedData.push({
    imgSrc: images[i],
    description: descriptions[i],
    stars: stars[i]
  })
}
dingus blank
dingus blank
3,229 Points
dingus blank
dingus blank
3,229 Points

Hey! thanks again for posting ^^ How do i implement this? im not getting it to work if i simply replace the js

Brendan Whiting
.a{fill-rule:evenodd;}techdegree seal-36
Brendan Whiting
Front End Web Development Techdegree Graduate 84,738 Points

How are you receiving the JSON?