Map object into array then output value with jQuery

Question

I have the below javascript which puts a list of customers into an object, then outputs then on the page.

    var name = ["andrew", "vic", "casey"];
    var job = ["builder", "baker", "dentist"];
    var product = [111, 222, 111];
    var qty = [1, 2, 3];
    var data = {};
    for (i = 0; i < name.length; i++) {
        a = {
            "name": name[i],
            "job": job[i],
            "product": product[i],
            "qty": qty[i]
        };
        a['xtra-' + product[i]] = qty[i];
        data[name[i]] = a;
        console.log(a);
    }
        data = $.map(data, function (val, key) {
            return val;
        });    
        data.sort();
        $.each(data, function (i, val) {
            $('body').append(val.name + ' - ' + val.job + ' - ' + val.product + ' - ' + val.qty + ' - ' + (val.xtra + val.product)  + '<br>');
        });

With what I have so far see fiddle, I am outputting the persons name - job - product - qty.

andrew - builder - 111 - 1 - NaN<br>
vic - baker - 222 - 2 - NaN<br>
casey - dentist - 111 - 3 - NaN<br>

I am also trying to print out some extra information which is storred in my object called 'xtra-' + product[i].

This is being storred in a as you can see from the console log eg xtra-222 however, I can't get it outputting in my each statement? I understand what I have done

val.xtra + val.product

is trying to add a number with a string and this is why it isn't working but I can't seem to get work out what syntax is required (possibly getting the last nth item) here or maybe there is another method to acheive what I want here? In case there is any confusion I want my output to be

andrew - builder - 111 - 1 - 1
vic - baker - 222 - 2 - 2
casey - dentist - 111 - 3 - 3

Where the last 1,2,3 comes from the value 'xtra-' + product[i] stored in a

Ignacio A. Rivas · Accepted Answer · 2014-06-05 12:09:09Z

2

The problem is inside the .each loop, more specifically in (val.xtra + val.product).

The val object for the first run of that loop is:

Object {name: "andrew", job: "builder", product: 111, qty: 1, xtra-111: 1}

As you can see, there's no xtra key in that object, instead you have an xtra-111 key. So if you use (val['xtra-' + val.product] + val.product) you'll get the result that you need.

Here's the fixed code http://jsfiddle.net/VdVax/

answered Jun 5, 2014 at 12:09

Ignacio A. Rivas

6467 silver badges13 bronze badges

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

3 Comments

ak85 Over a year ago

Thanks, I am not sure if your fiddle is up to date as it still says undefined? but putting in your suggestions definitely works! I found that it was better to use val['xtra-' + val.product] to get me the results I was after as if I add the extra val.product it will add this to the total of my 'xtra-' + val.product. Is there a way to target the index here as well? eg I have tried appending i[0] but get undefined?

Ignacio A. Rivas Over a year ago

Yeah, I forgot to save the fiddle. Here you go jsfiddle.net/VdVax/1. I dont quite get what are you trying to accomplish here with that, but if you give me an update fiddle I'm sure I can help you out.

ak85 Over a year ago

Thanks here is my fiddle jsfiddle.net/hU9AT if I add more data to the object, I want to be able to count the qty of each product per person. eg if data[name[i]] and product is true count extra to their qty. a.qty += +qty[i] I can get the qty incrementing however I can't work out how to say if the person doesn't have the product create another product for them with the qty.based on my I want andrew to look like this andrew-builder-(111-1)-(222-3)-1 as he has 1 of prodID 111 and 3 of prodID 222. Vic should look like this as in total she has 4 of prodID 222 vic-baker-(222-4)-2.

PaulParton · Accepted Answer · 2014-06-05 12:13:20Z

1

in your $.each did you mean

val["xtra-" + val.product]

?

Here is a working fiddle http://jsfiddle.net/p5Zhc/3/

answered Jun 5, 2014 at 12:13

PaulParton

1,0531 gold badge11 silver badges19 bronze badges

Collectives™ on Stack Overflow

Map object into array then output value with jQuery

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related