Adding extra values to JS Object

Question

Ok I have an HTML list containing the data I need. It looks like this

ul
    li[data-trainer]>trainee
    li[data-trainer]>trainee
    li[data-trainer]>trainee

I iterate it and want to make an object that looks like this

{
    "Trainer":{0:Trainee1},
    "Trainer2":{1:Trainee2,2:Trainee3,3:Trainee4}
}

I tried this and a bunch more

var Data = new Object();
var i = 0;
$(".blah-blah-ul li.active").each(function(){
    i++;
    var trainer = $(this).attr("data-trainer");
    var trainee = $(this).text();
    Data[trainer] = {};
    Data[trainer][i] = trainee;
})
console.log(Data);

Data[trainer][i] = trainee leaves me with only the last trainee in the list.

Data from console.log:

Object
    Trainer1: Object
        2: Trainee2
    Trainer3: Object
        4: Trainee6

I tried making an array and using push or making a string but that didn't work.

If someone could please recommend a proper solution, it would be greatly appreciated.

Here's the HTML

<ul class="blah-blah-ul">
    <li class="active" data-trainer="Trainer1">Trainee1</li>
    <li class="active" data-trainer="Trainer1">Trainee2</li>
    <li data-trainer="Trainer2">Trainee3</li>
    <li data-trainer="Trainer2">Trainee4</li>
    <li class="active" data-trainer="Trainer3">Trainee5</li>
    <li class="active" data-trainer="Trainer3">Trainee6</li>
</ul>

I find it hard to understand how you get that kind of object from that kind of html structure. Can you please paste the real HTML or explain the situation you are in and what you are trying to achieve — Iliya Reyzis, May 03 '15 at 23:13
@IliyaReyzis - `.text` would be the contents between the greater and less than signs. `...>here<...`, while `data-trainer` is a custom attribute inside the tag like `src` or `alt`. — Kraang Prime, May 03 '15 at 23:16
@SanuelJackson Yeah, hats pretty abusive. I'm just trying to get the REAL html structure and the desired result. — Iliya Reyzis, May 03 '15 at 23:20

Kraang Prime · Accepted Answer · 2015-05-03T23:47:42.213

2

Your problem was in order to have more than one value assigned to the element in the array, the sub element must be an array. This allows for adding multiple Trainee to the Trainer item in the Data object.

var Data = new Object();
var i = 0;
$(".blah-blah-ul li.active").each(function(){
    i++;
    var trainer = $(this).attr("data-trainer");
    var trainee = $(this).text();
    if(typeof Data[trainer] === 'undefined') {
       Data[trainer] = {}; 
    }
  
    Data[trainer][i] = {trainee};
})
console.log(Data);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="blah-blah-ul">
    <li class="active" data-trainer="Trainer1">Trainee1</li>
    <li class="active" data-trainer="Trainer1">Trainee2</li>
    <li data-trainer="Trainer2">Trainee3</li>
    <li data-trainer="Trainer2">Trainee4</li>
    <li class="active" data-trainer="Trainer3">Trainee5</li>
    <li class="active" data-trainer="Trainer3">Trainee6</li>
</ul>

Documentation on Javascript Arrays using Push, can be found here w3schools

edited May 03 '15 at 23:47

answered May 03 '15 at 23:15

Kraang Prime

9,981
10
58
124

just realized i was declaring the opening array as `Object()` when it should have been `{}` – Kraang Prime May 03 '15 at 23:22
The data-trainer attribute is the same for some li's because they're coming from the same trainer. – Иван Божков May 03 '15 at 23:40
1

Gotcha. Let me revise. – Kraang Prime May 03 '15 at 23:42
Finished, the result is an array of Trainee's under each Trainer. – Kraang Prime May 03 '15 at 23:48
Argh, finally! You're a life saver! – Иван Божков May 03 '15 at 23:56

score 0 · Answer 2 · edited May 23 '17 at 12:31

0

Try the following approach:

Data[trainer][i] = trainee;

and you can find more info here: How can I add a key/value pair to a JavaScript object?

edited May 23 '17 at 12:31

Community

1
1

answered May 03 '15 at 23:15

Evgeni Atanasov

482
1
5
13

`Data.trainer.i` would not work because it needs to be dynamic to `i` and to `trainer`. It would literally look for them as keys. – aug May 03 '15 at 23:19

score 0 · Answer 3 · answered May 03 '15 at 23:17

0

var Data = {};
var i = 0;
$(".blah-blah-ul li.active").each(function(){
    i++;
    var trainer = $(this).attr("data-trainer");
    var trainee = $(this).text();
    Data[trainer] = {};
    Data[trainer][i] = trainee;
})
console.log(Data);

answered May 03 '15 at 23:17

braks

1,505
15
23

it still leaves me with the last trainee only :( – Иван Божков May 03 '15 at 23:22
Almost, the problem you are having is every loop, you are re-initializing the array for Data[trainer], which effectively clears any prior data which may have been stored. – Kraang Prime May 04 '15 at 00:10

Adding extra values to JS Object

3 Answers3