Create JSON array by each-loop through parent and child elements

Question

HTML:

<section id="intro">
        <div id="ih" contenteditable="true">Header</div>
        <div id="ish" contenteditable="true">Subheader</div>
        <a id="ibtn" contenteditable="true">Test</a>
</section>

<section id="articles">
        <div id="ah" contenteditable="true">Header</div>
        <div id="ash" contenteditable="true">Subheader</div>
        <a id="btn-1" contenteditable="true">Button</a>
        <a id="btn-2" contenteditable="true">Button</a>
        <a id="btn-3" contenteditable="true">Button</a>
</section>

jQuery:

$(document).ready(function() {
    $('#edit-button').click(function() {
        var dataObj = [];
        var jsonObj = [];
        $('section').each(function() {
            var section = $(this).attr('id');
            if( $(this).find('[contenteditable]').length != 0 ) {
                $('[contenteditable=true]').each(function() {
                    var id = $(this).attr('id');
                    dataObj.push('\"' + id + '\":\"' + $(this).html() + '\"');
                });
                jsonObj.push('{\"' + section + '\":{' + dataObj + '}}');
                dataObj.length = 0;
            } else {
                return;
            }
        });
        alert(jsonObj);
    });
});

Goal:

Create an JSON array(?) which contains the section name followed by a set of elementID+html if any of the sections children contains the attribute contenteditable and that attribute is set to true.

Currently it's including it's not ending the jsonObj as it should, it includes the second section into that array as well and for the second section includes the first sections data.

I've tried to empty the dataObj array using dataObj.length = 0; without success.

What am I doing wrong?

Final goal:

Create a inline editor connected to a Laravel 5.1 back-end

gfpacheco · Accepted Answer · 2015-08-16 18:00:30Z

1

Much like Rejith's answer, I would recommend this approach:

$(document).ready(function() {
    $('#edit-button').click(function() {
        var jsonObj = {};
        $('section').each(function() {
            var section = {};

            $(this).find('[contenteditable="true"]').each(function() {
                section[$(this).attr('id')] = $(this).html();
            });

            jsonObj[$(this).attr('id')] = section;
        });
        alert(JSON.stringify(jsonObj));
    });
});

You don't need to build a JSON object form the start, you can build a regular object then convert it to the JSON notation.

answered Aug 16, 2015 at 18:00

gfpacheco

3,2352 gold badges37 silver badges56 bronze badges

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

1 Comment

Anton Flärd Over a year ago

Added my if-statement to not include sections in the JSON object doesn't contain elements with contenteditable attribute. After that, this solution works perfect. Thank you!

rrk · Accepted Answer · 2015-08-16 17:57:47Z

0

Is this what you are trying to get?

var objectMain = {};
$('section').each(function() {
  var section = $(this).attr('id');
  objectMain[section] = {};
  if ($(this).find('[contenteditable]').length != 0) {
    $('[contenteditable=true]').each(function() {
      var id = $(this).attr('id');
      objectMain[section][id] = $(this).html();
    });
  } else {
    return;
  }
});
console.log(objectMain);
$('#stringJ').html(JSON.stringify(objectMain))

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<section id="intro">
  <div id="ih" contenteditable="true">Header</div>
  <div id="ish" contenteditable="true">Subheader</div>
  <a id="ibtn" contenteditable="true">Test</a>
</section>

<section id="articles">
  <div id="ah" contenteditable="true">Header</div>
  <div id="ash" contenteditable="true">Subheader</div>
  <a id="btn-1" contenteditable="true">Button</a>
  <a id="btn-2" contenteditable="true">Button</a>
  <a id="btn-3" contenteditable="true">Button</a>
</section><br/><br/>
<div id="stringJ" ></div>

answered Aug 16, 2015 at 17:57

rrk

15.9k4 gold badges32 silver badges49 bronze badges

1 Comment

Anton Flärd Over a year ago

Tried this but got the same result as before, I'm sorry but it might just be because I'm so new to jQuery/JSON. Thank you for your help.

Collectives™ on Stack Overflow

Create JSON array by each-loop through parent and child elements

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related