Get array of object key value

Get array of object key value
0

#1

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.


#2

How would you like to store this value?


#3

In a variable should be fine.

var agePeter = 20;
var ageAlex = 25;
var ageDavid = 23;

#4

What if there were 100 objects inside person? Would an array be ok?

var ages = person.map(({age}) => age); // ages = [ 20, 25, 23 ]

Really it depends on what you want to do with the ages.


#5

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.


#6

I guess I am not sure why you would want to do what you are doing, because you already know what Peter’s age is, because it is in the same object as the name Peter.

There must be some greater purpose of all this other than writing console.log statements.


#7

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.


#8

Is it my imagination or do you have two of the exact functions in the code above? Also, I am not following what you mean by {…category: accessory}. What is the … for?


#9

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"
  },
];

#10

That was just me saying that was an object with more properties other than category.


#11

OK, I think I understand what you are trying to do here. The .all-items element will get every clothing item appended to it and then you are appending to the other category divs if they have the applicable key.

If my assumptions are correct about what you are actually doing, then you are creating many duplicates of the same divs. I know some are temporarily hidden from view, but that is still a lot of overhead, especially when you said there will be about 40 clothing items.

Based on your structure, you have kind of trapped yourself in this structure, so for now, I will just assume you want to continue along the same path.

So, would I be correct in assuming data is the same thing as the clothes array? If so, then if you were to make your category values inside the object the same as the class names of the div they will be appended to, then you could simply write the following code. This is much simpler than all those for in statement you had before. Plus, if you add extra categories, you only have to change your array data and add a div with class of the same name, instead of having to add another for in statement.

data.map((item, i) => {
  const viewItems = clothingView(item, i);
  $('.all-items').append(viewItems);
  $('.'+ item.category).append(viewItems); 
});

Do you have a new pen link to your project? I want to check something out, because I may have thought of a way to make code management in the future easier based on the structure of the data array.


#12

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.


#13

Yes, that is the goal. I did not test my code, because I did not have your pen to work with, so there could be a syntax error in it, but the logic should be solid.


#14

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"
  }
];

#15

The issue is your category names do not match the class names except for outwear. You are using plural form in the class names and singular form in the data objects’ category property.


#16

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.


#17

I am not seeing the changes to the pen you linked earlier.


#18

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?


#19

I figured that out also. The reason is, the other code that gunhoo93 created for you earlier used the ids related to the classes some way. If you remember, he said because you have everything tied to the DOM, any changes you make and add/change code it can break other parts. This is what he was talking about.


#20

Well I am off to sleep, so I will not read anything else until tomorrow.