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, Jun 07 '13 at 08:28
Give some explanation other than just pasting a wall of code. — MrCode, Jun 07 '13 at 08:34
This may be helps you http://stackoverflow.com/questions/3904269/convert-object-to-json-string — commit, Jun 07 '13 at 08: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, Jun 07 '13 at 08:35
when you need this output? when click [edit] button? and ['group': 'name':'somename2'] not like this, it's invalid!!! — Stiger, Jun 07 '13 at 08:43
@ stiger I will use a submit/save button. Onclick the whole process should happen — spod, Jun 07 '13 at 08:45

score 0 · Answer 1 · answered Jun 07 '13 at 08:48

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 07 '13 at 08:48

Jared

2,978
4
26
45

convert data into json using jquery

1 Answers1