How can I get set of li elements and put it to my object in JavaScript

Question

The first thing I want ask for advice. I am making shopping cart only on JavaScript and I want to know how organize my application more correct. For example I have two page: product page and basket page. For storing data I use array:

var productId, productName, productSize, productAmount;
var productsData = [];

and I want to put there objects like this:

productsData.push({productId:productId,productName:productName,productSize:productSize,productAmount:productAmount});

I don't know how I can get set of li elements and put them into my object (there is stored each size of shoe). I have created next, but unfortunately it doesn't work:

$('.size').on("click", "a li", function () {
    productSize =  parseInt($(this).text(), 10);
    productsData.push({productSize:productSize});
    console.log(productsData[productId]['productSize']);
});

When I will be get whole object I am going to put it into Local Storage and display it on basket page.

Below my html code fragment:

<main class="product-section">
        <div class="product-preview" id="item1">
            <div class="current-photo-product">
                <img src="img/product-photo1.png" alt="Grey">
                <img src="img/product-photo2.png" alt="White">
                <img src="img/product-photo3.png" alt="Light Blue">
                <img src="img/product-photo4.png" alt="Dark Blue">
            </div>
            <div class="choice-photo">
                <ul>
                    <li><img src="img/product-photo1.png" alt="Grey"></li>
                    <li><img src="img/product-photo2.png" alt="White"></li>
                    <li><img src="img/product-photo3.png" alt="Light Blue"></li>
                    <li><img src="img/product-photo4.png" alt="Dark Blue"></li>
                </ul>
            </div>
        </div>
        <div class="product-details">
            <div class="wrapper-details">
                <h2>New Balance</h2>
                <p class="article-number">Article number: 14210160762</p>
                <h4 id="amount">€ 99.95</h4>
                <p class="description">Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies.
                </p>
                <h3>Size</h3>
                <ul class="size" id="listOfSizes">
                    <a href="#"><li>38</li></a>
                    <a href="#"><li>39</li></a>
                    <a href="#"><li>40</li></a>
                    <a href="#"><li>41</li></a>
                    <a href="#"><li>42</li></a>
                </ul>
                <button id="add-to-cart">Add to cart</button>
            </div>
        </div>
    </main>

You probably should also post fragment of your HTML. Or at least write, what does not work (is your onclick function called after click?). — ahwayakchih, May 22 '16 at 21:20
Of course I can show html fragment. When I try add size, it throws in console undefined — S.Hagvin, May 22 '16 at 21:26
`console.log(productsData[productId]['productSize']);` productId is undefined according to your code. Also Array indexes automatically when you push items to it. So first item will be at index 0, not at `productId` (unless it is also a 0). — ahwayakchih, May 22 '16 at 21:42

score 1 · Answer 1 · answered May 22 '16 at 21:35

1

Simple, you have a syntax error:

var = productId, productName, productSize, productAmount;

should be

var productId, productName, productSize, productAmount;

Your console should also address the pushed object:

console.log(productsData[0]['productSize']);

answered May 22 '16 at 21:35

Mark Schultheiss

32,614
12
69
100

I agree, thank you! but it mistake I made here, in project I don't have it – S.Hagvin May 23 '16 at 06:02

score 1 · Accepted Answer · answered May 22 '16 at 21:36

Your question isn't quite clear to me but let me show you how I would do it with your suggested object array {productId:productId,productSize:productSize,...} - maybe it can help you:

When you create an Object in an array like that, and you want to add a property like productSize,productName,... you have to make sure you're adding it inside the object and not the array like you do with productsData.push({productSize:productSize}); . So first find the right object by the property productId and then add your property and value pair.

 productsData = [];

//random id for this example - you can generate those however you like of course
productId = 112;

//you add the new product with given id...but you don't know how big the array was before
productsData.push({productId:productId})

//now you set a size
productSize = 33;

//you search for the product with given ID in the array to be able to add the size value to it
//the method "arrayObjectIndexOf" I just copied from an answer here: 
//http://stackoverflow.com/questions/8668174/indexof-method-in-an-object-array
var searchIndex = arrayObjectIndexOf(productsData, productId, "productId");
//now in the first brackets you get inside the object and in the second you create a new property "productSize"and set its value
productsData[searchIndex]["productSize"] = productSize;

alert(productsData[searchIndex].productSize);

function arrayObjectIndexOf(myArray, searchTerm, property) {
    for(var i = 0, len = myArray.length; i < len; i++) {
        if (myArray[i][property] === searchTerm) return i;
    }
    return -1;
}

How can I get set of li elements and put it to my object in JavaScript

2 Answers2