Jak wypisać Obiekty z Tablicy w JS do DIV (Shopping Cart)

Question

Cześć

Mam takie problem i nie wiem jak go rozwiązać, chciałbym stworzyć koszyk na stronie i poprzez JS zapisuje do sessionStorage itemy

$('.add-cart-button').click(function() {
	var id = $(this).val();
	var ilosc = $("#S"+id).val();
	var name = $(this).attr("data-name");
	var cena = $("#C"+id).attr("data-cena");

	var product = {};
	var koszyk = [];
	
	var product = {
		Id: id,
		Ilosc: ilosc,
		Name: name,
		Cena: cena
	};
	
	if(sessionStorage.koszyk){
		koszyk = JSON.parse(sessionStorage.getItem('koszyk'));
    }else{
		koszyk=[];
    }
	
	koszyk.push(product)
    sessionStorage.setItem('koszyk', JSON.stringify(koszyk));
	
	var Object = sessionStorage.getItem('koszyk');
	var OBJ = JSON.parse(Object);
    console.log('Object: ', OBJ);



});

Udaje mi się je odczytać ale nie wiem jak je wypisać do DIV (Zdjęcie _blank)

Próbowałem tak i różne inne rozwiązania z stackoverflow ale albo mi pokazuje [Object] albo undefine :/

Proszę o pomoc jak ktoś wie co robię źle

	for (i = 0; i < OBJ.length; i++) {
		$('#paragon').append(OBJ[i]);
		console.log(OBJ[i]);
	 }

Tutaj cały kod z githuba bo nie chciałem go wklejać na forum bo jest długi 

Comments

Jeśli użyjesz JSON.stringify() to zwróci Ci string tego jsona co wypisujesz. Generalnie chcesz wypisać cały obiekt w jeden div?

$('#paragon').append(JSON.stringify(OBJ[i]));

The Element.append() method inserts a set of Node objects or string objects after the last child of the Element. String objects are inserted as equivalent Text nodes.

---

Tak generalnie chce wypisać wszystko jedno pod drugim w divie(tak jak by przygotować paragon z rzeczy które są w koszyku) <div id="paragon"></div>

najpierw nazwę obok cenę a na końcu ilość * cena a id ukryte bo z niego chciałbym dopiero stworzyć finalny paragon w php

dopiero zaczynam naukę z JSON

jest sukces bo się wyświetliło dziękuję, teraz to będę musiał porozbijać, chyba że jeszcze zapytam czy to dobra droga którą obrałem aby stworzyć koszyk ?

<div id="koszyk">
			<div class="koszyk-name">XXX<br>XXX</div>
			<div class="koszyk-info">
				<div class="koszyk-dane-operatora">AI-Inteligence</div>
				<div class="koszyk-data"><?php echo date('Y-m-d G:i:s');?></div>
			</div>
			<div class="OPT">PARAGON FISKALNY</div>
			<div id="paragon"></div>
		</div>

---

Próbowałeś np. tak

[ on-line ]

<div id="paragon"><pre></pre></div>

const basket = [
  { Id: '2', Ilosc: '1', Name: 'Bułka niezwykła', Cena: '1.05' },
  { Id: '1', Ilosc: '2', Name: 'Bułka zwykła', Cena: '0.65' },
  { Id: '2', Ilosc: '0', Name: 'Bułka zwykła', Cena: '0.65' },
  { Id: '3', Ilosc: '2', Name: 'Jajka op. 6szt.', Cena: '6.65' }
];

for (const i of basket) {
  if (i.Ilosc <= 0) continue;
  const value = ((i.Cena * i.Ilosc).toFixed(2)).padStart(5, ' ');
  $('#paragon pre').append(`${i.Cena} ${i.Name.padEnd(16, ' ')} x${i.Ilosc}  ${value}\n`);
}