Javascript & jQuery push array to object based on custom attribute

Question

Problem

There are a couple of HTML tags with classes as follows

<span class="keyword" column-name="Product Group">Outdoors</span>
<span class="keyword" column-name="Material Code">10001003</span>
<span class="keyword" column-name="Material Code">10001000</span>

All the span needs to be iterated through and a new object would be created with the column-name attribute as its property and the relevant text passed into an array.

Code So Far

I am using the below code but the array passed consists of all the text from the span

var searchCriteria = {};
var keyword = [];
$('.keyword').each(function(index, elem) {
    col = $(elem).attr('column-name');
    keyword.push($(elem).text());
    searchCriteria[col] = (keyword);
});
console.log(searchCriteria);

The above code prepares the object as

{
    Material Code: ['Outdoors', '10001003', '10001000']
    Product Group: ['Outdoors', '10001003', '10001000']
}

Result Expected

The result of the object which I am expecting is

{
    Material Code: ['10001003', '10001000']
    Product Group: ['Outdoors']
}

JS Fiddle

Here is a JSFiddle of the same - http://jsfiddle.net/illuminatus/0g0uau4v/2/

Would appreciate any help!

I really suggest you refactor your HTML and make it more semantic, it's really badly written. — George Katsanos
– George Katsanos, Commented Sep 28, 2014 at 7:48
@GeorgeKatsanos; Any feedback of what needs to be changed with the HTML? And what are the repercussion that you can see with the existing markup? — Sameer Joshi
– Sameer Joshi, Commented Sep 28, 2014 at 7:54

nisargjhaveri · Accepted Answer · 2014-09-28 07:52:50Z

1

When you use searchCriteria[col] = (keyword);, it does not copy the keyword array. It just stores pointer to that array. So, if you update keyword after assigning it to some variable, it'll also get updated as both of them points to the same array. If you want to copy array you may use .slice() on array. But here it is not needed.

Use the following code instead

var searchCriteria = {};
$('.keyword').each(function(index, elem) {
    col = $(elem).attr('column-name');
    if ( !Array.isArray(searchCriteria[col]) )
        searchCriteria[col] = [];
    searchCriteria[col].push($(elem).text());
});
console.log(searchCriteria);

http://jsfiddle.net/0g0uau4v/3/

answered Sep 28, 2014 at 7:52

nisargjhaveri

1,50912 silver badges23 bronze badges

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

Comments

nbrooks · Accepted Answer · 2014-09-28 07:55:17Z

1

You can't use the same array as the value for each column. Instead, create a new array each time you encounter a new column, or simply append the value to the existing array if the column-name already exists:

$(function() {
    var searchCriteria = {};
    $('.keyword').each(function(index, elem) {
        var col = $(elem).attr('column-name');
        var keyword = searchCriteria[col] ? searchCriteria[col] : [];
        keyword.push($(elem).text());
        searchCriteria[col] = (keyword);
    });
    $("#result").text("Result: " + JSON.stringify(searchCriteria));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<span class="keyword" column-name="Product Group">Outdoors</span>
<span class="keyword" column-name="Material Code">10001003</span>
<span class="keyword" column-name="Material Code">10001000</span>
<div id="result"></div>

edited Sep 28, 2014 at 7:55

answered Sep 28, 2014 at 7:47

nbrooks

18.2k5 gold badges58 silver badges68 bronze badges

1 Comment

Sameer Joshi Over a year ago

This worked great. I had a hunch that something is wrong with the array declaration, but could not figure out what. Thanks a lot for the help!

maddy · Accepted Answer · 2014-09-28 08:02:33Z

0

That was becoz, you were using same updated array for all.

var searchCriteria = {};
var keyword = [];
$('.keyword').each(function(index, elem) {
    col = $(elem).attr('column-name');
    if( !searchCriteria[col])
         searchCriteria[col] = [];
    searchCriteria[col].push($(elem).text());
});
console.log(searchCriteria);

Here in this code im searching for, if property doesn't exist . Then make that index as array. And futher you push elements.

Working fiddle

answered Sep 28, 2014 at 8:02

maddy

1178 bronze badges

Comments

Amit Joki · Accepted Answer · 2014-09-28 08:29:30Z

0

You can instead do this

var searchCriteria = {};
$('.keyword').each(function(){
   var key = $(this).attr("column-name");
   var value = $('[column-name='+key+']').map(function(){return $(this).text()}).get();
   if(!searchCriteria.hasOwnProperty(key)) searchCriteria[key] = value;
});

edited Sep 28, 2014 at 8:29

answered Sep 28, 2014 at 7:54

Amit Joki

59.4k7 gold badges80 silver badges96 bronze badges

2 Comments

nbrooks Over a year ago

Clever way to use map...but JS objects don't have a push method. That last line should simply be searchCriteria[key] = value;.

Amit Joki Over a year ago

@nbrooks thanks.. push only exists in arrays.. forgot that. :)

Collectives™ on Stack Overflow

Javascript & jQuery push array to object based on custom attribute

4 Answers 4

Comments

1 Comment

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related