CODEWITHSUNDEEP
javascriptarrays
tekstrand
tekstrand

Reputation: 1493

Push new value into array if property matches

  1. Iterate through HTML items and push them into an array
  2. If item name matches an object's name property already in the array, just add it's data into that object.

I tried looking through a few different answers but either end up with console errors or overwriting my existing data.

var item = {};
var items = [];

$('li').each(function() {
    var itemName = $(this).find('.name').text();
    var itemData = $(this).find('.data').text();
    
    //for(var i = 0, lens = items.length; i < 1; i++) {
    //    if(items[i].name === itemName) {
    //         ?
    //    }
    //}

    item = {
        name: itemName,
        data: itemData
    }
    items.push(item);
});
<li>
    <span class="name">Item 1</span>
    <span class="data">3</span>
</li>
<li>
    <span class="name">Item 1</span>
    <span class="data">6</span>
</li>
<li>
    <span class="name">Item 1</span>
    <span class="data">9</span>
</li>
<li>
    <span class="name">Item 2</span>
    <span class="data">3</span>
</li>
<li>
    <span class="name">Item 2</span>
    <span class="data">6</span>
</li>

Upvotes: 2

Views: 2142

Answers (2)

Ismail RBOUH
Ismail RBOUH

Reputation: 10450

This code will achieve your aim:

var items = {};

$('li').each(function() {
    var itemName = $(this).find('.name').text();
    var itemData = $(this).find('.data').text();

    items[itemName] = items[itemName] || [];
    items[itemName].push(itemData);
});

var result = Object.keys(items).map(function(name) {
  return {name: name, data: items[name]};
});

console.log(result);

Update 1: (Add other properties)

var items = {};

$('li').each(function() {
    var itemName = $(this).find('.name').text();
    var itemData = $(this).find('.data').text();

    items[itemName] = items[itemName] || {name: itemName};
    //Add data
    items[itemName].data = items[itemName].data || [];
    items[itemName].data.push(itemData);
    //Add other property
    items[itemName].time = Date.now();
});

var result = Object.keys(items).map(function(name) {
  return items[name];
});

Demo:

var item = {};
var items = {};

$('li').each(function() {
    var itemName = $(this).find('.name').text();
    var itemData = $(this).find('.data').text();
  
    items[itemName] = items[itemName] || [];
    items[itemName].push(itemData);
});

var result = Object.keys(items).map(function(name) {
  return {name: name, data: items[name]};
});

console.log(result);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<li>
    <span class="name">Item 1</span>
    <span class="data">3</span>
</li>
<li>
    <span class="name">Item 1</span>
    <span class="data">6</span>
</li>
<li>
    <span class="name">Item 1</span>
    <span class="data">9</span>
</li>
<li>
    <span class="name">Item 2</span>
    <span class="data">3</span>
</li>
<li>
    <span class="name">Item 2</span>
    <span class="data">6</span>
</li>

Upvotes: 2

Krzysztof Duszczyk
Krzysztof Duszczyk

Reputation: 693

var item = {};
var items = [];

$('li').each(function () {
    var itemName = $(this).find('.name').text();
    var itemData = $(this).find('.data').text();

    var add_new = true;
    for(var i = 0, lens = items.length; i < lens; i++) {
        if(items[i].name === itemName) {
            items[i].data.push(itemData);
            add_new = false;
        }
    }
    if (add_new) {
        item = {
            name: itemName,
            data: [itemData]
        }
        items.push(item);
    }
});
console.log(items);

Upvotes: 1

Related Questions