Dynamic dictionary using Javascript from two sources

Question

I'm new to JavaScript, and I think at this point I may have bit off more than I could chew. Essentially, I'm trying to make a dictionary (which will eventually be serialized to JSON, if that's relevant) that allows the user to define any number of entries and set both the key and value as they wish. I'm up for another implementation ideas, but this is how I've tried to solve it so far.

I have a button that calls the following code, which is mimicked exactly for newVariableDescription class. This creates the text input boxes on the web form.

    var nameElement = document.createElement("input");
    nameElement.type = "text";
    nameElement.className = "newVariableName";
    var nameDiv = document.createElement("div");
    nameDiv.type = "div";
    nameDiv.appendChild(nameElement);
    var newVariableNamesDiv = document.getElementById("newVariableNamesDiv");
    newVariableNamesDiv.appendChild(nameDiv);

    var descriptionElement = document.createElement("input");
    descriptionElement.type = "text";
    descriptionElement.className = "newVariableDescription";
    var descriptionDiv = document.createElement("div");
    descriptionDiv.type = "div";
    descriptionDiv.appendChild(descriptionElement);
    var newVariableDescriptionsDiv = document.getElementById("newVariableDescriptionsDiv");
    newVariableDescriptionsDiv.appendChild(descriptionDiv);

Now, this part works. I get all of the text boxes showing up just like I want, and can type into them. However, I can't figure out how to dynamically get access to this list AND pair them together.

This thread is very similar to what I want to do: dynamic dictionary using javascript

But I can't figure out how to get this code to do what I want:

var dictionary = {};
$('.newVariableName).each(function (index) {
    dictionary['['+index+'].Key'] = $(this).val();
    dictionary['['+index+'].Value'] = //access corresponding newVariableDescription here
});

I can obviously create a second loop with the other class (newVariableDescription), but that won't tie them together properly. I could store each of them in their own separate lists, and then combine those two lists into a dictionary, but I'm concerned about order remaining consistent and that's not an elegant solution.

Thanks in advance for any help.

It's a second class, used in a set of text inputs created with identical code to newVariableName. I just didn't want to copy/paste it when it was identical besides a name change. — JuniorIncanter
– JuniorIncanter, Commented Dec 26, 2013 at 17:30

Grundy · Accepted Answer · 2013-12-26 17:56:17Z

1

If i understand right you want something like this with :eq selector

var dictionary = {};
$('.newVariableName').each(function (index) {
    dictionary['['+index+'].Key'] = $(this).val();
    dictionary['['+index+'].Value'] = $('.newVariableDescription:eq('+index+')').val();
});

answered Dec 26, 2013 at 17:56

Grundy

13.4k3 gold badges39 silver badges57 bronze badges

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

1 Comment

JuniorIncanter Over a year ago

Almost. I was looking for: variables[$(this).val()] = $('.newVariableDescription:eq(' + index + ')').val(); But it was close enough that I was able to figure it out from there, so thank you.

Collectives™ on Stack Overflow

Dynamic dictionary using Javascript from two sources

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related