Let’s say I have the following array of objects:
var person = [
{
name: "Peter",
age: 20,
Nationality: "American"
},
{
name: "Alex",
age: 25,
Nationality: "Spanish"
},
{
name: "David",
age: 23,
Nationality: "English"
},
];
I’d like to get the value of the age property for each one of these objects.
In a variable should be fine.
var agePeter = 20;
var ageAlex = 25;
var ageDavid = 23;
I am just trying to do something like this:
for (var i = 0; i < person.length; ++i) {
console.log(person[i]);
if (20 in person[i]) { console.log("This is Peter age") }
if (25 in person[i]) { console.log("This is Alex age") }
if (23 in person[i]) { console.log("This is David age") }
};
Basically I want to get the value of the key object to use that value with the in operator.
Well that was just an example to explain what I am trying to do with the value of the object key, but sure there is a greater purpose than just console.log statements. Here:
// Generate template literal
function clothingView(item, index) {
return (`
<a href="${item.url}" class="shop-item">
${item.sale ? `<span class="shop-item__sale">Sale</span>`: ''}
<img data-src=${item.image} alt="${item.altDesc}" class="shop-item__img">
<div class="quickview">
<span class="quickview__icon">Quick View</span>
<span class="quickview__info">${item.product}
<br>
<span class="quickview__price">${item.price}
${item.sale ? `<span class="quickview__price--sale">${item.sale}</span>`: ''}
</span>
</span>
<span class="shop-item__index">${index}</span>
</div>
</a>
`);
};
// Append template literal to html structure
for (var i = 0; i < data.length; ++i) {
const viewItems = clothingView(data[i], i);
$('.all-items').append(viewItems);
if ('accessory' in data[i]) { $('.accessories').append(viewItems); }
if ('bottom' in data[i]) { $('.bottoms').append(viewItems); }
if ('dress' in data[i]) { $('.dresses').append(viewItems); }
if ('outwear' in data[i]) { $('.outwear').append(viewItems); }
if ('top' in data[i]) { $('.tops').append(viewItems); }
if ('sale' in data[i]) { $('.sale').append(viewItems); }
};
In the code above, “accessory, bottom, dress, etc…” are object keys/properties, instead I would like to do this: {...category: accessory}, {...category: bottom}, ... That’s why I need the value of a certain key of an object so I can use it with the in operator.
ups, sorry. I fixed it. Ok basically I have several objects, they all should have a “category” property, but the value of this property varies depending the object itself. E.g.:
var clothes = [
{
product: "Haori Jacket",
url: "haorijacket.html",
image: "img/haori-jacket.jpg",
altDesc: "Jacket",
price: "$210.00",
category: "outwear"
},
{
product: "Swing Dress",
url: "swingdress.html",
image: "img/swing-dress.jpg",
altDesc: "Dress",
price: "$218.00",
category: "dress"
},
];
That was just me saying that was an object with more properties other than category.
Your assumptions are correct, and yes I do have an updated codepen: https://codepen.io/CodingGilbert/pen/xJGvQB?editors=1010
I am using your code but there seems to be some issue. If I’m not mistaken the category value should match the class name of the div that they will be appended to.
Well there was syntax error in your code, “)” this was missing after the last curly bracket. But still something is not working as expected. And I am using class for my divs:
<section class="products-container container">
<nav class="categories">
<span class="categories__link" id="accessories">Accessories</span>
<span class="categories__link" id="bottoms">Bottoms</span>
<span class="categories__link" id="dresses">Dresses + Jumpsuits</span>
<span class="categories__link" id="outwear">Outerwear</span>
<span class="categories__link" id="tops">Tops</span>
<span class="categories__link" id="sale">— Sale</span>
</nav>
<div class="products all-items">
<!-- <a href="haorijacket.html" class="shop-item">
<span class="shop-item__sale">Sale</span>
<img src=img/haori-jacket.jpg alt="Jacket" class="shop-item__img">
<div class="quickview">
<span class="quickview__icon">Quick View</span>
<span class="quickview__info">$Haori Jacket
<br>
<span class="quickview__price">$210.00<span class="quickview__price--sale">$150.00<span></span>
</span>
<span class="clothing-index">${index}</span>
</div>
</a> -->
</div>
<div class="products accessory"></div>
<div class="products bottom"></div>
<div class="products dress"></div>
<div class="products outwear"></div>
<div class="products top"></div>
<div class="products sale"></div>
</section>
Currently all items are being shown in the all-items and outwear container only for some reason.
The objects:
var data = [
{
product: "Haori Jacket",
url: "haorijacket.html",
image: "img/haori-jacket.jpg",
altDesc: "Jacket",
price: "$210.00",
category: "outwear"
},
{
product: "Swing Dress",
url: "swingdress.html",
image: "img/swing-dress.jpg",
altDesc: "Dress",
price: "$218.00",
category: "dress"
},
{
product: "Lounge Jumpsuit",
url: "",
image: "img/lounge-jumpsuit.jpg",
altDesc: "Jumpsuit",
price: "$298.00",
category: "dress"
},
{
product: "Linen Top",
url: "",
image: "img/linen-top.jpg",
altDesc: "Blouse",
price: "$125.00",
category: "top"
},
{
product: "Lounge Tunic",
url: "",
image: "img/lounge-tunic.jpg",
altDesc: "Dress",
price: "$258.00",
category: "dress",
category: "top"
},
{
product: "Sonia Dress",
url: "",
image: "img/sonia-dress.jpg",
altDesc: "Dress",
price: "$268.00",
category: "dress"
},
{
product: "White Studio Top",
url: "",
image: "img/white-studio-top.jpg",
altDesc: "Blouse",
price: "$158.00",
category: "top"
},
{
product: "Swing Top",
url: "",
image: "img/swing-top.jpg",
altDesc: "Blouse",
price: "$128.00",
category: "top"
},
{
product: "Terra Cota Studio Top",
url: "",
image: "img/terracota-studio-top.jpg",
altDesc: "Blouse",
price: "$158.00",
category: "top"
},
{
product: "Wide Pant",
url: "",
image: "img/wide-pant.jpg",
altDesc: "Pants",
price: "$190.00",
category: "bottom"
},
{
product: "Charcoal Long Shorts",
url: "",
image: "img/charcoal-long-shorts.jpg",
altDesc: "Pants",
price: "$200.00",
category: "bottom"
},
{
product: "Linen Long Shorts",
url: "",
image: "img/linen-long-shorts.jpg",
altDesc: "Pants",
price: "$200.00",
category: "bottom"
},
{
product: "Diana Jacket",
url: "",
image: "img/diana-jacket.jpg",
altDesc: "Jacket",
price: "$368.00",
category: "outwear"
},
{
product: "Poplin Chef Shirt",
url: "",
image: "img/poplin-chef-shirt.jpg",
altDesc: "Shirt",
price: "$216.00",
category: "top"
},
{
product: "Poplin Dress",
url: "",
image: "img/poplin-dress.jpg",
altDesc: "Dress",
price: "$231.00",
category: "dress"
},
{
product: "Layer Dress",
url: "",
image: "img/layer-dress.jpg",
altDesc: "Dress",
price: "$309.00",
category: "dress"
},
{
product: "Poplin V Top",
url: "",
image: "img/poplin-vtop.jpg",
altDesc: "Blouse",
price: "$143.00",
category: "top"
},
{
product: "3 Button Tunic",
url: "",
image: "img/3button-tunic.jpg",
altDesc: "Blouse",
price: "$250.00",
category: "dress",
category: "top"
},
{
product: "Charcoal Tunic",
url: "",
image: "img/charcoal-tunic.jpg",
altDesc: "Blouse",
price: "$250.00",
category: "dress",
category: "top"
},
{
product: "Dusty Jumpsuit",
url: "",
image: "img/dusty-jumpsuit.jpg",
altDesc: "Jumpsuit",
price: "$299.00",
sale: "$399.00",
category: "dress"
},
{
product: "Jacky Trousers",
url: "",
image: "img/jacky-trousers.jpg",
altDesc: "Pants",
price: "$228.00",
category: "bottom"
},
{
product: "Lisa Shirt",
url: "",
image: "img/lisa-shirt.jpg",
altDesc: "Shirt",
price: "$253.00",
category: "top"
},
{
product: "Jane Skirt",
url: "",
image: "img/jane-skirt.jpg",
altDesc: "Shirt",
price: "$150.00",
sale: "$263.00",
category: "bottom"
},
{
product: "Romy Top",
url: "",
image: "img/romy-top.jpg",
altDesc: "Blouse",
price: "$199.00",
sale: "$300.00",
category: "top"
},
{
product: "Romy Trousers",
url: "",
image: "img/romy-trousers.jpg",
altDesc: "Pants",
price: "$250.00",
sale: "$310.00",
category: "bottom"
},
{
product: "Twiggy Dress",
url: "",
image: "img/twiggy-dress.jpg",
altDesc: "Dress",
price: "$200.00",
category: "dress"
},
{
product: "Sonia Skirt",
url: "",
image: "img/sonia-skirt.jpg",
altDesc: "Skirt",
price: "$228.00",
category: "bottom"
},
{
product: "Duo-tone Backpack",
url: "",
image: "img/duotone-backpack.jpeg",
altDesc: "Backpack",
price: "$420.00",
category: "accessory"
},
{
product: "Black Backpack",
url: "",
image: "img/black-backpack.jpeg",
altDesc: "Backpack",
price: "$420.00",
category: "accessory"
},
{
product: "Bucket Tote",
url: "",
image: "img/bucket-tote.jpeg",
altDesc: "Backpack",
price: "$500.00",
category: "accessory"
},
{
product: "Black Crossbody",
url: "",
image: "img/black-crossbody.jpeg",
altDesc: "Backpack",
price: "$175.00",
sale: "$250.00",
category: "accessory"
},
{
product: "Tan Crossbody",
url: "",
image: "img/tan-crossbody.jpeg",
altDesc: "Backpack",
price: "$175.00",
sale: "$250.00",
category: "accessory"
},
{
product: "Black Tote",
url: "",
image: "img/black-tote.jpeg",
altDesc: "Backpack",
price: "$350.00",
sale: "$475.00",
category: "accessory"
},
{
product: "Tan Tote",
url: "",
image: "img/tan-tote.jpeg",
altDesc: "Backpack",
price: "$350.00",
sale: "$475.00",
category: "accessory"
},
{
product: "Sunglasses Nº 1",
url: "",
image: "img/sunglasses-n1.jpeg",
altDesc: "Sunglasses",
price: "$125.00",
category: "accessory"
},
{
product: "Sunglasses Nº 2",
url: "",
image: "img/sunglasses-n2.jpeg",
altDesc: "Sunglasses",
price: "$125.00",
category: "accessory"
},
{
product: "Sunglasses Nº 3",
url: "",
image: "img/sunglasses-n3.jpeg",
altDesc: "Sunglasses",
price: "$125.00",
category: "accessory"
},
{
product: "Sunglasses Nº 4",
url: "",
image: "img/sunglasses-n4.jpeg",
altDesc: "Sunglasses",
price: "$125.00",
category: "accessory"
}
];
I changed the class names for singular form both in my html and css:
<div class="products accessory"></div>
<div class="products bottom"></div>
<div class="products dress"></div>
<div class="products outwear"></div>
<div class="products top"></div>
<div class="products sale"></div>
But still, only outwear and all-items are working as intended, weird.
Well I updated the pen, but I haven’t implemented your code in the pen yet. I am doing all that in my text editor.
edit: I found the issue, in order for your code to work I also need to change the ids names in the navigation to singular form to match the divs class names. Why is this?
The ids in the navigation were not related to his code at all. In fact I’ve been changing his code w/o touching the html of the navigation. However I just realized your code won’t do it for me because an object which has the category property set to “top” could be also in the “sale” section, not only in the “top” section. Which take my to my original question, how to get the value of an object property. The code that I originally had was working as intended but I was using keys with the in operator. Given the current code I have I think I have to go this way due to certain objects being in sale section and top/accessory/etc section as well.
Alright, thanks for the help!