CODEWITHSUNDEEP
javascriptjqueryarraysobject
Sameer Joshi
Sameer Joshi

Reputation: 907

Javascript & jQuery push array to object based on custom attribute

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!

Upvotes: 0

Views: 1458

Answers (4)

Amit Joki
Amit Joki

Reputation: 59232

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;
});

Upvotes: 0

maddy
maddy

Reputation: 117

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

Upvotes: 0

nbrooks
nbrooks

Reputation: 18233

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>

Upvotes: 1

nisargjhaveri
nisargjhaveri

Reputation: 1509

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/

Upvotes: 1

Related Questions