Populating a javascript array with variables before return

Question

Populating a JavaScript array with variables

Old JsFiddle

I'm attempting to create an array that looks like this

//mapping array
var mapping = [
    [ "[POSITION]" , $( ".position" ).val() ],
    [ "[NAME]" , $( ".name" ).val() ],
    [ "[TOWN/DISTRICT]" , $( ".town" ).val() ],
    [ "[REGION]" , $( ".region" ).val() ],
    [ "[COUNTRY]" , $( ".country" ).val() ],
    [ "[HOG/HOS]" , $( ".hoghos" ).val() ],
    [ "[TOURIST ATTRACTION]" , $( ".tourist" ).val() ],
    [ "[SECTOR1]" , $( ".sector1" ).val() ],
    [ "[SECTOR2]" , $( ".sector2" ).val() ],
    [ "[SECTOR3]" , $( ".sector3" ).val() ],
    [ "[PITCHER]" , $( ".pitcher" ).val() ]
];

out of a variable list here

//vars
var ie1 = "[POSITION]";
var ie2 = "[NAME]";
var ie3 = "[TOWN/DISTRICT]";
var ie4 = "[REGION]";
var ie5 = "[COUNTRY]";
var ie6 = "[HOG/HOS]";
var ie7 = "[TOURIST ATTRACTION]";
var ie8 = "[SECTOR1]";
var ie9 = "[SECTOR2]";
var ie10 = "[SECTOR3]";
var ie11 = "[PITCHER]";

I've been trying to push them in using this code

var mapping = [];

mapping.push({ ie1 : $( ".position" ).val() , ie2 : $( ".name" ).val() , ie3 : $( ".town" ).val() , ie4 : $( ".region" ).val() , ie5 : $( ".country" ).val() , ie6 : $( ".hoghos" ).val() , ie7 : $( ".tourist" ).val() , ie8 : $( ".sector1" ).val() , ie9 : $( ".sector2" ).val() , ie10 : $( ".sector3" ).val() , ie11 : $( ".pitcher" ).val() });

which will then update the text on a page using this

$(".CYB").html(function(index,text){
    for (var i = 0; i < mapping.length; i++) {
        text = text.split(mapping[i][0]).join(mapping[i][1]);
    }
    return text;
});

after this, the variables are updated with new values so that a page refresh isn't necessary

//new vars
var ie1 = $( ".position" ).val();
var ie2 = $( ".name" ).val();
var ie3 = $( ".town" ).val();
var ie4 = $( ".region" ).val();
var ie5 = $( ".country" ).val();
var ie6 = $( ".hoghos" ).val();
var ie7 = $( ".tourist" ).val();
var ie8 = $( ".sector1" ).val();
var ie9 = $( ".sector2" ).val();
var ie10 = $( ".sector3" ).val();
var ie11 = $( ".pitcher" ).val();

when I throw in an alert it's easy to see where it's going wrong as

//alert with array
alert(JSON.stringify(mapping));

outputs

[{ "ie1":"","ie2":"","ie3":"","ie4":"","ie5":"","ie6":"","ie7":"","ie8":"","ie9":"","ie10":"","ie11":"" }]

It's treating the variables as text rather than loading their values but I'm not sure how to fix this.

So in summary, I'm trying to reach a stage where I can input data into text boxes and have it update content on a page. If I want to make changes I wish to be able to do that without a page refresh by saving the variables I entered and having them loaded into an array.

I'd be grateful for any help.

Old JsFiddle

Edit:

I updated it slightly and this is now working more correctly... However I need to take the first variables out of the on click event and they aren't loading when I do. I would appreciate help in finding a solution to this problem.

For posterity: I changed

mapping.push({ ie1 : $( ".position" ).val() , ie2 : $( ".name" ).val() , ie3 : $( ".town" ).val() , ie4 : $( ".region" ).val() , ie5 : $( ".country" ).val() , ie6 : $( ".hoghos" ).val() , ie7 : $( ".tourist" ).val() , ie8 : $( ".sector1" ).val() , ie9 : $( ".sector2" ).val() , ie10 : $( ".sector3" ).val() , ie11 : $( ".pitcher" ).val() });

to

mapping.push([ ie1 , $( ".position" ).val() ],[ ie2 , $( ".name" ).val() ],[ ie3 , $( ".town" ).val() ],[ ie4 , $( ".region" ).val() ],[ ie5 , $( ".country" ).val() ],[ ie6 , $( ".hoghos" ).val() ],[ ie7 , $( ".tourist" ).val() ],[ ie8 , $( ".sector1" ).val() ],[ ie9 , $( ".sector2" ).val() ],[ ie10 , $( ".sector3" ).val() ],[ ie11 , $( ".pitcher" ).val() ]);

New JsFiddle

Is your current problem that after the first time you click generate, any future changes are not reflected below CYB? — sWW
– sWW, Commented Aug 4, 2014 at 12:54
That's exactly it, I know it's because I have the first variables inside the click event... but when I move them outside of the event it doesn't load them (they return as null). — Cameron Guthrie
– Cameron Guthrie, Commented Aug 4, 2014 at 13:10

sWW · Accepted Answer · 2014-08-04 15:11:28Z

1

The reason for your new problem is due to your [PLACEHOLDER] text getting overwritten the first time you click generate. Therefore any future clicks have no text to replace. I suggest you get around this by using spans with classes. I've mocked up a solution on your jsfiddle.

answered Aug 4, 2014 at 15:11

sWW

5974 silver badges13 bronze badges

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

1 Comment

Cameron Guthrie Over a year ago

This works like a charm, thank you very much. I'll update the question over lunch with your solution.

Alnitak · Accepted Answer · 2014-08-04 10:12:44Z

1

Your first line says you're trying to create a two-dimensional array, but your code is creating an array with a single element that is an object because you've written mapping.push( { ... } ) - note the curly brackets.

Instead, use:

var mapping = [
  [ie1, $( ".position" ).val()],
  [ie2, ...]
  ...
];

That said, you really should consider some alternate structure for your data - this mess of hard-coded variables with numeric suffixes indicates that you should be using arrays and loops to construct your data. The way you're overwriting those ieX variables is also confusing.

answered Aug 4, 2014 at 10:12

Alnitak

341k72 gold badges420 silver badges503 bronze badges

2 Comments

Cameron Guthrie Over a year ago

This is my first time working with arrays, would writing a loop to go through the different variables be a more correct solution to this problem?

Cameron Guthrie Over a year ago

Also, updated the fiddle to a half/working solution based on what you said new JsFiddle. Additionally I updated my question above. Do play with entering stuff into the text boxes and hitting generate. Right now I still require a page refresh when inputting new data which is less than ideal.

Collectives™ on Stack Overflow

Populating a javascript array with variables before return

Populating a JavaScript array with variables

Old JsFiddle

Old JsFiddle

Edit:

New JsFiddle

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Populating a JavaScript array with variables

Edit:

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related