Is there a way to increment JSON array key value through multiple arrays instead of starting over with each array?

Question

This is my first time using JSON so I'm not even sure if I'm asking this question correctly but hopefully you can understand what I'm getting at.

I am using the following data that to populate a select option based on the selection made in the previous select:

        prods = {
        Cookware: ["- Select -", "Round French Oven", "Oval French Oven", "Braiser", "Skillet", "Fry Pan", "Grill Pan", "Saute Pan", "Saucepan", "Saucier", "Griddle", "Roaster", "Stockpot", "Speciality Cookware", "Other"],
        Bakeware: ["- Select -", "Covered Casserole", "Baking Dish", "Stoneware Gratin", "Speciality Bakeware", "Individual Bakeware", "Metal Bakeware", "Other"],
        KitchenTools: ["- Select -", "Utensils", "Kitchen Accessories", "Cutlery", "Wine Tools", "Textiles", "Other"],
        DineEntertain: ["- Select -", "Dinnerware", "Serveware", "Tabletop Accessories", "Glassware", "Kettles", "Tea Collection", "Café Collection", "Other"]
        };

and here is the relevant jQuery I am using to do this:

                $.each(prods[catSelected], function (key, value) {
                    nextProdType
                        .append($("<option></option>")
                        .attr("value", key)
                        .attr("name", value)
                        .text(value));
                });

In the resulting HTML, the key counter starts over for each array. So if Bakeware is selected:

            <option value="0" name="- Select -">- Select -</option>
            <option value="1" name="Covered Casserole">Covered Casserole</option>
            <option value="2" name="Baking Dish">Baking Dish</option>
            <option value="3" name="Stoneware Gratin">Stoneware Gratin</option>

or if Accessories is selected:

        <option value="0" name="- Select -">- Select -</option>
        <option value="1" name="Utensils">Utensils</option>
        <option value="2" name="Kitchen Accessories">Kitchen Accessories</option>
        <option value="3" name="Cutlery">Cutlery</option>

As you can see the value always starts at 0, and what I would like is for the first - select - value to be 0 and the last option in DineEntertain be 39. This would allow me to store all these options in one table in the database without having duplicate numerical values.

I am using this on a dynamic form where users can add or subtract categories, so the value has to be fixed. Is there a way to do this? I have tried searching for this in the forums here and in Google but not finding any solutions, which makes me think I may not be asking the right question...

Good question! Because I copied this code from someone els and didn't bother to clean that up! I will remove that line from the jQuery, thanks :) — surfbird0713
– surfbird0713, Commented Jun 20, 2014 at 13:25

user1932079 · Accepted Answer · 2014-06-20 13:12:51Z

1

If you redefine your array, you'll get what you want. I suggest, though, that you're not storing - Select - over and over in your database, right?

prods = {
    Cookware: {0:"- Select -", 1:"Round French Oven", 2:"Oval French Oven", 3:"Braiser", "Skillet", "Fry Pan", "Grill Pan", "Saute Pan", "Saucepan", "Saucier", "Griddle", "Roaster", "Stockpot", "Speciality Cookware", "Other"},
    Bakeware: {"- Select -", "Covered Casserole", "Baking Dish", "Stoneware Gratin", "Speciality Bakeware", "Individual Bakeware", "Metal Bakeware", "Other"},
    KitchenTools: {"- Select -", "Utensils", "Kitchen Accessories", "Cutlery", "Wine Tools", "Textiles", "Other"},
    DineEntertain: {0:"- Select -", "Dinnerware", "Serveware", "Tabletop Accessories", "Glassware", "Kettles", "Tea Collection", "Café Collection", 39:"Other"}
    };

Now, I was lazy there, so be sure to fill in all the other ##:"" numbers! But, as you can see from the first row, the numbers get assigned; and, from the last row, you can set all the - Select - to 0.

answered Jun 20, 2014 at 13:12

user1932079

Sign up to request clarification or add additional context in comments.

4 Comments

surfbird0713 Over a year ago

I must be doing something wrong, my page breaks when I try this. It should be 0:"value", correct?

user1932079 Over a year ago

I didn't fill in every number. Each item in the prods object needs to point to another object where all the key/value pairs are defined.

surfbird0713 Over a year ago

Weird, it still doesn't work. I have assigned a value to each item. I tried setting each select to 0 and then only the first and last (wasn't sure based on your example). There are no error messages in the console. This is the page if you want to look at it: lcoawebservices.com/prod-reg-v2.html. Clicking Register Product should reveal the form I'm working on.

user1932079 Over a year ago

Ah, you didn't change the [] to {}. Notice the 3rd character after "KitchenTools", for example... I changed them to objects instead of arrays. Does that help? EDIT: And don't forget the closing bracket!

Subir Kumar Sao · Accepted Answer · 2014-06-20 13:07:17Z

0

You are setting the value in the loop.

$.each(prods[catSelected], function (key, value) {
                nextProdType
                    .append($("<option></option>")
                    .attr("value", key) <-- Here
                    .attr("name", value)
                    .text(value));
            });

Use your own logic and populate it there.

Some thing like below,

var counter = 0; // In global scope.

$.each(prods[catSelected], function (key, value) {
                nextProdType
                    .append($("<option></option>")
                    .attr("value", counter++)
                    .attr("name", value)
                    .text(value));
            });

answered Jun 20, 2014 at 13:07

Subir Kumar Sao

8,4393 gold badges28 silver badges51 bronze badges

2 Comments

surfbird0713 Over a year ago

Thanks! I see what you're saying but unfortunately that won't work. There are dynamic form fields being added or subtracted here and this approach increments with each one, rather than assigning a fixed value to each option. I will update my question.

Subir Kumar Sao Over a year ago

The best place to do that should be server side. You should be sending the value/id in the json response.

Tanatos · Accepted Answer · 2014-06-20 13:08:48Z

0

You can store all those values in the same table, without having to work with id numbers. I would suggest you would use a table structure like :

id, category, value

1, Cookware, Round French Oven etc

And when selecting, you can just select by the value in category.

answered Jun 20, 2014 at 13:08

Tanatos

1,9271 gold badge13 silver badges13 bronze badges

Comments

Tajinder · Accepted Answer · 2014-06-20 13:09:54Z

0

Try using a global counter variable initializing it to 0 just increment for each loop and replace .attr("value", key) with .attr("value", counter++)

answered Jun 20, 2014 at 13:09

Tajinder

1971 silver badge3 bronze badges

Collectives™ on Stack Overflow

Is there a way to increment JSON array key value through multiple arrays instead of starting over with each array?

4 Answers 4

4 Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related