How do I create and modify an associative array in JavaScript?

Question

I'm trying to move some code from server side to client side. I'm struggling to work with Javascript. It seeems what I need to achieve uses objects vs arrays.

I have some input fields with data attributes that I loop through.

$(".selection:checked").each(function(){

    $selection_id=$(this).data('selection_id');
    $swatch_id=$(this).data('swatch_id');

});

Firstly, I want to create an array in the following form:

$array[$selection_id]=$swatch_id;

ie array(100=>123,200=456,300=789)

Secondly, I want to loop through a list of elements and swap out a value according to the array key.

ie element has key 100 and value 1000 then:

$array[100]=1000;

New array is array(100=>1000,200=456,300=789)

Finally, I need to take that array and turn it into a string in the form:

"100:1000,200:456,300:789"

I'm new to Javascript and still struggling to get my head around objects. Any help is appreciated.

Please add the HTML code too will help to check scenario

Rishab
– Rishab

2019-09-26 05:45:14 +00:00
Commented Sep 26, 2019 at 5:45 — Rishab
– Rishab, Commented Sep 26, 2019 at 5:45

Ajay Varghese · Accepted Answer · 2019-09-26 06:05:07Z

2

You better create an object for storing the $selection_id => $watch_id mapping. You can achieve it using following syntax

const mapping = {};
mapping[$selection_id] = $watch_id;

Then this array(100=>123,200=456,300=789) will look like

mapping = {
   100: 123,
   200: 456,
   300: 789
}

Values Can be accessed using mapping[100] which will give you 123. If you want to convert it into string like you specified do the following.

const mapString = Object.keys(mapping).reduce((acc, curr) =>
  `${acc}${curr}:${mapping[curr]},`,
"").slice(0, -1)

It will give you this output "100:123,200:456,300:789"

Update

For generating mapString, use the following. Thanks, @Soc for the suggestion.

const mapString = Object.keys(mapping).map(key => `${key}:${mapping[key]}`).join(',');

edited Sep 26, 2019 at 6:05

answered Sep 26, 2019 at 5:53

Ajay Varghese

7695 silver badges14 bronze badges

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

1 Comment

Soc Over a year ago

I personally prefer: const mapString = Object.keys(mapping).map(key => `${key}:${mapping[key]}`).join(',')

Adil Liaqat · Accepted Answer · 2019-09-26 05:54:32Z

0

First create an object

var obj = {}

Then loop over it like

$(".selection:checked").each(function(){

    $selection_id=$(this).data('selection_id');
    $swatch_id=$(this).data('swatch_id');
    obj[$selection_id] = $swatch_id;
});

it will create an object something like :

{"100": 123, "200": 456, "300": 700}

you can change value of 100 like:

obj[100] = 1000

Then To convert into a string:

Object.keys(obj).reduce((acc, val) => {
   acc.push(`${val}:${obj[val]}`); 
   return acc;
},[]).join()

answered Sep 26, 2019 at 5:54

Adil Liaqat

2293 silver badges11 bronze badges

Comments

Rishab · Accepted Answer · 2019-09-26 05:57:29Z

Simplest method using the javascript object you can achieve this

var mapObj = {};
$(".selection:checked").each(function(){


    var selection_id= $(this).data('selection_id');
    var swatch_id= $(this).data('swatch_id');
    //insert value in object
    mapObj[selection_id] = swatch_id;

});
// print object
console.log(mapObj);

// fetch particular key value
console.log(mapObj[100]);

// change value of object 
mapObj[100] = 1000;
console.log(mapObj);

// convert to string 
var string = "";
$.each(mapObj,function(index,val){
  string += index+':'+val+','; 
});
string = string.replace(/(^\s*,)|(,\s*$)/g, '');
console.log(string);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <input class="selection" data-selection_id="100" data-swatch_id="123" type="checkbox"  name="vehicle1" value="Bike" checked> I have a bike<br>
    <input class="selection" data-selection_id="200" data-swatch_id="456" type="checkbox" name="vehicle2" value="Car" checked> I have a car<br>
    <input class="selection" data-selection_id="300" data-swatch_id="789" type="checkbox" name="vehicle3" value="Boat" checked> I have a boat<br>

Collectives™ on Stack Overflow

How do I create and modify an associative array in JavaScript?

3 Answers 3

Update

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Update

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related