convert data into json using jquery

Question

I am dynamically adding data using jquery. Instead of explaining the code, i will paste it here. All i need is to put the group-data individually into database. I have to get the data and convert to JSON and then insert into database.

the code is

<!DOCTYPE HTML>
<html>
<head>
<body>

<style type="text/css">
   .task,
   .added-task {
    margin-left: 50px;
  }

  .added-task .task {
    margin-left: 0px;
  }

  .added-module {
    font-weight: bold;
  }

  .delete-module,
  .edit-module,
  .delete-task,
  .edit-task {
    display: none;
    margin: 0 10px;
  }

  .added-module:hover {

  }


</style>

<form method='post' name='EstimationForm' class="estimationform">

</form>
<a href="Javascript:void(0)" id="add-group">Add Group</a>


<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript">


//Adding new Module

$("#add-group").click(function(){
  var module_length = $(".module").length;
  if(module_length > 0) {
    if($(".module").text() == "") {
        alert("please enter module name");
    }
    else {
        $(".estimationform").append("<div class='new-module'><input type='text' class='module'/><a href='Javascript:void(0)' class='add-new-task'>add Task</a></div><br />");
    }
  }
  else {
    $(".estimationform").append("<div class='new-module'><input type='text' class='module'/><a href='Javascript:void(0)' class='add-new-task'>add Task</a></div><br />");
  }
});


// Adding First Task
$(".add-new-task").live("click", function(){
  if($(this).parent().find(".module").val() == "" ) {
    alert("please enter module name");
  }
  else {
    var added_module = $(".module").val();
    $(this).parent().append("<div class='added-module'><span class='module-name'>" + added_module +"</span><a href='Javascript:void(0)' class='edit-module'>edit</a><a href='Javascript:void(0)' class='delete-module'>delete</a><input type='hidden' value='" + added_module + "' /></div><input type='text' class='task' /><a href='Javascript:void(0)' class='add-task'>add Task</a>");
    $(this).remove();
    $(".module").remove();
  }

});


// Adding other Task
$(".add-task").live("click", function(){
  if($(this).parent().find(".task").val() == "" ) {
    alert("please enter task name");
  }
  else {
         var added_task = $(this).parent().find(".task").val();
         $(this).parent().find(".task").remove();
         $(this).parent().append("<div class='added-task'><span class='task-name'>" + added_task +"</span><a href='Javascript:void(0)' class='edit-task'>edit</a><a href='Javascript:void(0)' class='delete-task'>delete</a><input type='hidden' value='" + added_task + "' /></div><input type='text' class='task' /><a href='Javascript:void(0)' class='add-task'>add Task</a>");
         $(this).remove();
  }
});


// Showing the edit and delete on hover
$(".added-module, .added-task").live({
    mouseenter:
       function()
       {
          $(this).find("a").stop(true, true).fadeIn();
       },
    mouseleave:
       function()
       {
          $(this).find("a").stop(true, true).fadeOut();
       }
   }
);


//Edit buttons
$(".edit-task").live("click", function(){
    var text = $(this).parent().find('.task-name').text();
    console.log(text);
    $(this).parent().html("").append("<input type = 'text' class='task active' value='" + text + " '/><a href='Javascript:void(0)' class='save-task'>save</a>");

});

$(".edit-module").live("click", function(){
    var text = $(this).parent().find('.module-name').text();
    console.log(text);
    $(this).parent().html("").append("<input type = 'text' class='module active' value='" + text + " '/><a href='Javascript:void(0)' class='save-module'>save</a>");

});


//Save buttons
$(".save-module").live("click", function(){
    var added_module = $(this).parent().find('.module').val();
    $(this).parent().html("").append("<span class='module-name'>" + added_module +"</span><a href='Javascript:void(0)' class='edit-module'>edit</a><a href='Javascript:void(0)' class='delete-module'>delete</a><input type='hidden' value='" + added_module + "' />");
    $(this).remove();

});

$(".save-task").live("click", function(){
  if($(this).parent().find(".task").val() == "" ) {
    alert("please enter task name");
  }
  else {
          var added_task = $(this).parent().find(".task").val();
          $(".task.active").remove();
         $(this).parent().append("<span class='task-name'>" + added_task +"</span><a href='Javascript:void(0)' class='edit-task'>edit</a><a href='Javascript:void(0)' class='delete-task'>delete</a><input type='hidden' value='" + added_task + "' />");
         $(this).remove();
  }
});


//Delete buttons
$(".delete-module").live("click", function(){
    $(this).parent().parent().remove();
});

$(".delete-task").live("click", function(){
    $(this).parent().remove();
});






</script>

</body>
</html>

I used

$('.module-name').text();

But of no use. Please help me

I need it in this format

{
  'group': 'name': 'somename1', 
            'tasks':{'task1':'name1','task2':'name2'}
}
{'group': 'name':'somename2',
            'tasks':'{'task1':'name1','task2':'name2'}'

}

if you run the code, you can understand it better. I cant explain the process, that is what I meant.

I need 2 solutions here.

First retrieve the data which is in div tags and secondly i need the code to be converted into JSON like in the above format.

So you want to convert something to JSON. What does the something you want to convert look like? — Tim Rogers
– Tim Rogers, Commented Jun 7, 2013 at 8:28
Give some explanation other than just pasting a wall of code. — MrCode
– MrCode, Commented Jun 7, 2013 at 8:34
This may be helps you stackoverflow.com/questions/3904269/… — commit
– commit, Commented Jun 7, 2013 at 8:35
"Instead of explaining the code, i will paste it here." So you are dumping us a page of irrelevant codes including the CSS which has nothing to do with this question. — Antony
– Antony, Commented Jun 7, 2013 at 8:35

Jared · Accepted Answer · 2013-06-07 08:48:49Z

0

Modern browsers have native functions to help you handle JSON. Older browsers (IE8) will need a fallback (or "polyfill").

JSON.stringify(myobject); converts a JavaScript object or array or whatever to valid JSON.

JSON.parse(myjson); reverses it.

answered Jun 7, 2013 at 8:48

Jared

3,0264 gold badges31 silver badges47 bronze badges

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

Collectives™ on Stack Overflow

convert data into json using jquery

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related