Display data from object jquery?

Question

I have this

JS

var invoice = 1;
var orders = [
 [{
 "invoice": "1",
 "article": "Coca Cola",
 "qty": "5",
 "active": "Yes"
 }, {
 "invoice": "1",
 "article": "Fanta",
 "qty": "10",
 "active": "Yes"
 }, {
 "invoice": "1",
 "article": "Sprite",
 "qty": "40",
 "active": "Yes"
 },{
 "invoice": "1",
 "article": "Coca Cola",
 "qty": "40",
 "active": "Yes"
 }],
 [{
 "invoice": "2",
 "article": "Coca Cola",
 "qty": "55",
 "active": "Yes"
 }, {
 "invoice": "2",
 "article": "Fanta",
 "qty": "10",
 "active": "Yes"
 }]
];
var msg = "<div id=results>" + results + "</div>";

and final results in html to look like this lets say for invoice 1, to count all articles with same name all its qty, and display that article name with total amount of the qty. Here is html how it need to be display?

<div id="results">
<div class="each">
<input value="Coca Cola"><input value="45">
</div>
<div class="each">
<input value="Fanta"><input value="10">
</div>
<div class="each">
<input value="Sprite"><input value="40">
</div>

On Coca Cola i have to display countet values of qty? I have starded a working fiddle, but as you may see i have stucked at start.

• adeneo: It would probably be clearer and easier to understand if the values in the HTML actually matched the posted object ?
• loveNoHate: That is no JSON. At Invoice the numbers are missing "".
• loveNoHate: @adeneo He wants to add the 2 Coca Cola values together and display the rest as is
• Felix Kling: @DOCASAREL: a) Number literals are valid in JSON. b) Of course this isn't JSON, this is a JavaScript array. The context matters.
• Miomir Dancevic: Yes there are matched in html

Answer 1

Here's one way to do it

function getInvoice(numb) {
 return $('<section />', {
 'class' : 'results'
 }).append(
 $.map(orders, function(arr) {
 var o = {};
 $.each(arr, function(_, obj) {
 if (obj.invoice == numb)
 o[obj.article] = (o[obj.article] || 0) + (+obj.qty);
 });
 return $.map(o, function(qty, article) {
 return $('<div />', {
 'class' : 'each'
 }).append(
 $('<input />', {value : article}),
 $('<input />', {value : qty})
 ).get(0);
 });
 })
 );
}

FIDDLE

• Miomir Dancevic: Nice this is great can you correct it because i have to make is print like this var show ="<section>" + msg + "</section>
• adeneo: Sure, I suppose you just change the container from div to section, like above ?
• Miomir Dancevic: Sorry mate stil struglling to output, i need this html <div class='col-lg-6'> <p>Article</p> <input class='form-control' value='' name='whatArticle' disabled type='text'> </div> <div class='col-lg-6'> <p>Quantity</p> <input class='form-control' value='' name='whatQty' disabled type='text'> </div>
• adeneo: Well, that looks completely different from the question, but something like this maybe -> jsfiddle.net/bs80wn88/1
• Miomir Dancevic: Txanks mate, your are great