I'm trying to create a json with html tags and their corresponding attributes.
<!doctype html>
<html lang="es">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<title>test story</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6">
<div id="story" class="story">
<div class='block-title' style="background:red;color:white;">
<h2 class='title' style="font-weight:bold;"> title </h2>
</div>
<div class='block-image' data-value="value1" data-value2="value2">
<img class='foto' src="foto.png" alt=":)" />
</div>
<div class='block-content'>
<p class='texto'>
Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. Fue popularizado en los 60s con la creación de las hojas "Letraset", las cuales contenian pasajes de Lorem Ipsum, y más recientemente con software de autoedición, como por ejemplo Aldus PageMaker, el cual incluye versiones de Lorem Ipsum.
</p>
</div>
</div>
</div>
<div class="col-md-6">
<button> generar </button>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
<script src='js/js.js'></script>
</body>
<script>
$(document).ready(function(){
gen4('.story div')
})
</script>
</html>
With this script I get the name of the tags, and their attributes but when executing the script it returns all the attributes, it should return me for each div and also of its children elements
I should return in this way
tag:'div'
attr:{
name:'class',value:'block-title'
}
child:{
tag:'div'
attr:{
name:'class', value:'title'
}
child:{
}
}
function gen4(block){
var attr = []
var child = []
$(block).each(function(){
// objeto
var obj = new Object()
obj.tag = $(this).prop('tagName')
obj.attr = attr
obj.child = child
$(this.attributes).each(function(index){
var data = {'name':this.name, 'value':this.value}
attr.push(data )
})
$(this).children().each(function(index, element){
$(element.attributes).each(function(){
var data = {'name':this.name, 'value':this.value}
child.push(data)
})
})
console.log(obj)
//var arr = JSON.stringify(obj)
//console.log(arr)
})
}
I would appreciate your suggestions.