Jquery inArray method not working in multidimensional array

Question

I'm trying to create a function to stop the creation of duplicate sub arrays in an array using Jquery's inArray function but it doesnt seem to work. Maybe i am missing something in my code?

function createProduct() {
    var name = document.getElementById("productname").value
    var myclass = document.getElementById("productclass").value
    var model = document.getElementById("model").value
    var manufacturer = document.getElementById("manufacturer").value
    var sellingprice = document.getElementById("productsellprice").value
    var costprice = document.getElementById("productcostprice").value
    var quantity = document.getElementById("quantity").value
    productobject = [name, manufacturer, model, myclass, sellingprice, costprice, quantity];

    var searchvalue = productobject;
    *if (jQuery.inArray(productobject, products) == -1) { products.push(productobject) } else if (jQuery.inArray(productobject, products) != -1) {
        document.getElementById
            ("mydiv").innerHTML = "This product already exists, please check catalogue to edit product";
    }*
}

i have added the rest of the codeblock to make it readable but focus on the if block calling the inArray function because somehow, duplicate products still gets added

how is this method being used against the `products` array. I'm guessing the `products` array is created outside of this scope, so it'd be interesting to see. I would start debugging by printing out your `products` array to the console in the if statement and see if it's what you expect it to be. — Brodie, Jul 08 '15 at 20:48
sorry i didnt include the product array declaration. Its just as you guessed, i made it global, so its outside the scope, other functions still have to access it. `var products = [ ["Test Product", "Test Manufacturer", "Test Model", "Test Class", "Test Sellingprice", "Test Costprice", "Test Quantity"] ] ` and i already debugged it, it would seem that the first if condition is never reached, so the products gets added either ways. — Mordred, Jul 08 '15 at 20:59
if you're using chrome, stick a debugger in before the if statement and then check the value of the array at that point. Also, from your comment, and from the title (sorry completely glazed over the multi-dimentional part). It looks like you want to check products[0]. In your check does `productobject` exist in the array `products` the answer is no, `products` as defined has 1 object, which is an array. -- i also added an answer to make the point clearer. hope that helps. — Brodie, Jul 08 '15 at 21:04
I am creating a windows store app with visual studio which i think uses IE 9 's engine or so. Thanks for the answer by the way — Mordred, Jul 08 '15 at 21:17
At first glance it almost looks like the productobject should be: var productobject = {name:name, manufacturer:manufacturer, model:model, myclass:myclass, sellingprice:sellingprice, costprice:costprice, quantity:quantity}; — Mark Schultheiss, Jul 08 '15 at 21:20
Thanks, i see the need to add keys, but i dont think thats the problem here — Mordred, Jul 08 '15 at 21:37
Note that it is an object with { } not an array of objects with [ ] . To state the obvious, you can access the named properties with products[3].name etc. — Mark Schultheiss, Jul 08 '15 at 21:49

score 2 · Accepted Answer · edited May 23 '17 at 12:29

You're asking with that if condition whether a reference to an array is already in the array which it never will be because you are always creating new array references before checking for their existence.

Every time you do productobject = [ ... ]; you're creating a new array and since you're pushing objects (Array in this) rather than primitive values, the jQuery.inArray method can only check for the presence of object references. In other words, since you're always making a new array, it will always be not found by your if condition.

EDIT
I think in the case of what you are trying to do, I may take advantage of Javascript associative arrays. Here's an example of how I might rework your solution to use objects instead of arrays. For a stronger approach to using object.hasOwnProperty method, please refer to How do I check if an object has a property in JavaScript?

Finally, please note I used the productobject.name property as the lookup key in the products object, so clicking the button will only add a new object if you change the first field.

Hope it helps >>

//objects are associative arrays (or maps/dictionaries) in Javascript
var products = {}; //new Object() instead of new Array()

function createProduct() {
    var productObject = { 
        name: document.getElementById("productname").value,
        myclass: document.getElementById("productclass").value,
        model: document.getElementById("model").value,
        manufacturer: document.getElementById("manufacturer").value,
        sellingprice: document.getElementById("productsellprice").value,
        costprice: document.getElementById("productcostprice").value,
        quantity: document.getElementById("quantity").value
    }
    return productObject;
}

function checkitout() {
    var product = createProduct();
    //assuming name is a unique ID or key you can use to distinguish products
    if(products.hasOwnProperty(product.name)) {
        alert("product already exists");
    } else {
        console.log("new product added");
        products[product.name] = product;
    }
}

<input id="productname" value="IBM Lenovo 9439-CTO" />
<input id="productclass" value="desktop" />
<input id="model" value="9439-CTO" />
<input id="manufacturer" value="IBM Lenovo" />
<input id="productsellprice" value="$50.00" />
<input id="productcostprice" value="$30.00" />
<input id="quantity" value="1" />
<button onclick="checkitout();">Add New Product</button>

I think i understand what you are trying to say. Thank you. But how do you propose i fix it? — Mordred, Jul 08 '15 at 21:11
@Mordred Extensively edited to propose an alternative for you to consider. — ThisClark, Jul 08 '15 at 21:41

Brodie · Answer 2 · 2015-07-08T21:13:07.703

0

In my original answer I didn't take into account that each of the arrays is actually a description.

So this implementation is going to be a little brittle. But to @ThisClark's point. You could do something like

var products = [ ["some product"...] ];

function createProduct() {
  ...


  for (var i = 0, len = products.length; i < len; i++) {
    if (jQuery.inArray(productobject[0], products[i] > -1) {
      //don't need to add
      break;
    } else {
      //need to add
    }
  }
}

This would test to see if the item in productobject array exists inside of any of the arrays inside of the products array.

alternatively, if you have the ability to have the data updated, it would be better if you used a json array for your products. It might make working w/ the individual product structures a lot easier.

edited Jul 08 '15 at 21:13

answered Jul 08 '15 at 21:06

Brodie

8,399
8
35
55

i am not referencing products[0], that will put all the products in one array. But mine is a new array for every product(the new array gets pushed in once its created). Let me worry about the design issues – Mordred Jul 08 '15 at 21:15
the issue here is that jquery.inArray doesn't do deep search as your expecting so you need to manually take a step into your array to do the search. – Brodie Jul 08 '15 at 21:19
i tried manually doing it with a for-loop but my condition is still never reached. I think ThisClark's answer is the problem. But i have no idea how to fix it – Mordred Jul 08 '15 at 21:22
in order to fix it, it sounds like you'll need to compare your generated array to each array in your products array. – Brodie Jul 08 '15 at 21:40

Jquery inArray method not working in multidimensional array

2 Answers2