What I'm trying to do is take the information out of a json, and then put it inside a div with a specific size it's supposed or what I should do is put the divs with an specific size inside a container, if it fits , otherwise it should create's another container to put it, I have tried using a while and with fors loops but the truth does not fit, if they realize the json has different chains with different sizes in order to have the div a size different but it does not work well.
Can you help me?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="pdf.js"></script>
<style>
.contenedor{
background: aqua;
width: 350px;
height: 180px;
margin-bottom: 10px;
position: relative;
}
</style>
</head>
<body>
<div class="por_desaparecer" id="por_desaparecer" style="background: pink; width: 350px">
</div>
<script>
lista = {productos: [
'1 NAME ITEM, NAME ITEM, NAME ',
'2 NAME ITEM, NAME ITEM, NAMEaaaaaaaaaaaaaa ',
'3 NAME ITEM, NAME ITEM, NAME ',
'4 NAME ITEM, NAME ITEM, NAME ',
'5 NAME ITEM, NAME ITEM, NAME ',
'6 NAME ITEM, NAME ITEM, NAME ',
'7 NAME ITEM, NAME ITEM, NAME ',
'8 NAME ITEM, NAME ITEM, NAME ',
'9 NAME ITEM, NAME ITEM, NAME ',
'10 NAME ITEM, NAME ITEM, NAME ',
'11 NAME ITEM, NAME ITEM, NAME ',
'12 NAME ITEM, NAME ITEM, NAME ',
'13 NAME ITEM, NAME ITEM, NAME ',
'14 NAME ITEM, NAME ITEM, NAME ',
'15 NAME ITEM, NAME ITEM, NAME ',
'16 NAME ITEM, NAME ITEM, NAME ',
'17 NAME ITEM, NAME ITEM, NAME ',
'18 NAME ITEM, NAME ITEM, NAME ',
'19 NAME ITEM, NAME ITEM, NAME ',
'20 NAME ITEM, NAME ITEM, NAME NAME ITEM, NAME ITEM, NAME NAME ITEM, NAME ITEM, NAMENAME ITEM, NAME ITEM, NAME ',
'21 NAME ITEM, NAME ITEM, NAME NAME ITEM, NAME ITEM, NAMENAME ITEM, NAME ITEM, NAME',
'22 NAME ITEM, NAME ITEM, NAME ',
'23 NAME ITEM, NAME ITEM, NAME ',
'24 NAME ITEM, NAME ITEM, NAME ',
'25 NAME ITEM, NAME ITEM, NAME ',
'26 NAME ITEM, NAME ITEM, NAME ',
'26 NAME ITEM, NAME ITEM, NAME ',
'25 NAME ITEM, NAME ITEM, NAME ',
'26 NAME ITEM, NAME ITEM, NAME ',
'26 NAME ITEM, NAME ITEM, NAME ',
]}
//Sacamos la info del json para despues eliminarla
for (x in lista.productos){
hola = document.createElement('div')
hola.setAttribute("class", "item_por_desaparecer")
hola.setAttribute("style", "width: 350px; word-wrap: break-word")
hola.innerHTML = lista.productos[x]
document.getElementById('por_desaparecer').appendChild(hola)
}
//Sacamos la info del json para despues eliminarla
//creamos el contenedor de los items
contenedor = document.createElement('div')
contenedor.className = "contenedor";
document.body.appendChild(contenedor)
//creamos el contenedor de los items
v = 0
contenedor = document.getElementsByClassName('contenedor')[v].offsetHeight
suma = 0
for ( i = 0; i < document.getElementsByClassName('item_por_desaparecer').length; i++ ) {
if(this.document.getElementsByClassName('item_por_desaparecer')[0].offsetHeight + suma <= document.getElementsByClassName('contenedor')[v].offsetHeight) {
console.log('si')
agregar = document.getElementsByClassName('item_por_desaparecer')[0]
document.getElementsByClassName('contenedor')[v].appendChild(agregar)
suma += document.getElementsByClassName('item_por_desaparecer')[0].offsetHeight
} else {
v++
suma = 0
//creamos el contenedor de los items
contenedor = document.createElement('div')
contenedor.className = "contenedor";
document.body.appendChild(contenedor)
//creamos el contenedor de los items
agregar = this.document.getElementsByClassName('item_por_desaparecer')[0]
document.getElementsByClassName('contenedor')[v].appendChild(agregar)
suma += document.getElementsByClassName('item_por_desaparecer')[0].offsetHeight
}
}
</script>
</body>
</html>