如何在Javascript中使用多个对象拆分数组的索引

Question

I have multiple fruits with quantity and fixed price (50). Fruit is chosen from drop down menu. Upon pressing enter button, javascript code runs where fruit is pushed into an array along with its quantity and price.

<select id="fruit">
    <option value="apple">Apple</option>
    <option value="banana">Banana</option>
    <option value="orange">Orange</option>
</select>

<button id="opt" onclick="Fruit()">Enter</button>

I have managed to store them in an array as:

var storeArr = [];
quantity = 10;
selectItem = false;

function Fruit() {
    var selectedFruit;
    selectItem = document.getElementById("fruit");
    selectedFruit = selectItem.options[selectItem.selectedIndex].value;

    storeArr.push([selectedFruit,quantity,50]);
    quantity = quantity + 5;
    printArray();
}

function printArray(){
    const iterator = storeArr.values();
        for (const value of iterator) {
            console.log("values: "+value);
        }
}

It results exactly like I want to store the items. After multiple selections from the drop down list say apple, banana, apple etc, The output looks like this:

values: apple, 10, 50
values: banana, 15, 50
values: apple, 20, 50

Now I want to access say index 1 (banana, 15, 50) based on variable "selectedFruit" and split these values. I am not able to figure out a way to do that. Can anyone help?

Answer 1

UPDATE 2: As the OP wants to retain the structure

storeArr: [
    ['apple', 10, 50]
    ['banana', 15, 50]
    ['orange', 20, 50]
]

Add a function to your code

function getFruitDetails(fruit) {
    for(var i = 0; i < storeArr.length; i++) {
        if (storeArr[i][0] === fruit) {
            return storeArr[i]
        }
    }
}

And use like this

getFruitDetails(selectedFruit)[1] or getFruitDetails(selectedFruit)[2]

UPDATE: As per the OP's recent comment, you can change storeArr to an object, instead of an array. The structure of that object should look like

storeArr: {
    "apple": [10, 50],
    "banana": [15, 50],
    "orange": [20, 50]
}

and access like storeArr[selectedFruit][0] and so on...

ORIGINAL:

However, it looks like you have an array inside array which can be accessed like storeArr[1][0] , storeArr[1][1] and so on... (for banana )

The above will work if your array looks like

storeArr: [
    ['apple', 10, 50]
    ['banana', 15, 50]
    ['orange', 20, 50]
]

UPDATE 3: Although not recommended, but as asked by the OP

You can replace

storeArr.push([selectedFruit,quantity,50]);

in your code with

var recentIndex = storeArr.push([selectedFruit, quantity, 50]) - 1

to access the index of the last (recently) pushed element in the array.

But if you are considering banana, 15, 50 as a string

storeArr: [
    ["apple, 10, 50"]
    ["banana, 15, 50"]
    ["orange, 20, 50"]
]

The following should work:

var items = storeArr[1].split(', ');

items[0] will be banana , items[1] will be 20 and so on...

Answer 2

Your storeArr looks something like this [['apples', 10, 50], ['banana', 15, 50]] . It is an array of arrays. So in order to access item's quantity at index 1, you have to do storeArr[1][1] .

A suggestion would be to have a little modification in the Fruit function

function Fruit() {
    var selectedFruit;
    selectItem = document.getElementById("fruit");
    selectedFruit = selectItem.options[selectItem.selectedIndex].value;

    storeArr.push({selectedFruit, quantity,fixedPrice: 50});
    quantity = quantity + 5;
    printArray();
}

Notice we are pushing an object into the array, so you can access required item's quantity like storeArr[1].quantity

storeArr will be of this form now,

[
    {
        selectedFruit: 'apple',
        quantity: 10,
        fixedPrice: 50
    },
    {
        selectedFruit: 'banana',
        quantity: 15,
        fixedPrice: 50
    },
    {
        selectedFruit: 'orange',
        quantity: 20,
        fixedPrice: 50
    }
]

And if you want to access an object based on the fruit's name, you can use find

const banana = storeArr.find(obj => obj.selectedFruit === 'banana');

and it's quantity using banana.quantity

Answer 3

If I understood correctly, you could place the values inside an object. That way you can have something like the following:

[{
    fruit:'apple', 
    quantity: 4, 
    price: 50
},
{
    fruit:'banana'
    quantity: 1,
    price: 50
}]

For instance,

function printArray(){
    const iterator = storeArr.values();
    const arrayOfObjects = []
        for (const value of iterator) {
            const splitFruitString = value.split(',')
            arrayOfObjects.push({
                fruit: splitFruitString[0],
                quantity: splitFruitString[1],
                price: splitFruitString[2]
            })
        }
}
console.log(arrayOfObjects);

Answer 4

Why not store an array of objects instead of an array of arrays.

At the moment your array looks like this:

[
  [
    'apple',
    10,
    50,
  ],
  [
    'banana',
    15,
    50,
  ],
]

You say you're having difficulty accessing each set of values. While you could do something like storeArr[0][1] to get the quantity of the first fruit, it's more obvious if you stored an object for each fruit like so:

[
  {
    name: 'apple',
    quantity: 10,
    price: 50,
  },
  {
    name: 'banana',
    quantity: 15,
    price: 50,
  },
]

This way, you can access each the quantity of the second fruit like so:

storeArr[1].quantity

This is clearer than using a 2 dimensional array.