Write JSON data via jQuery

Question

I try to write JSON data to a JSON file. This is my script in HTML page:

 <script type="text/javascript">
        jQuery(document).ready(function(){
          data = new Array();
          columns = [];
          var row = new Array();
          $('table tr').each(function(index,tr){
              var index = index;
              if(index == 0){ // First we get column names from th.

                $(tr).find('th').each(function(thIndex,thValue){
                  columns.push($(thValue).text());
                });
              } else {
                $(tr).find('td').each(function(tdIndex,tdValue){
                  row[tdIndex] = $(tdValue).text(); // Put each td value in row
                });

                data.push(row); // now push each row in data.
                row = new Array(); // reset row after push
              }

          });
        // Send it to PHP for further work:
          $.post('json.php', { data: data, columns: columns }, function(response){
          // TODO with response
          });
        })
        </script>

and this the PHP

<?php
$data = $_POST['data']; // Each rows values
$columns = $_POST['columns']; // Columns names


for($i = 0; $i < count($data); $i++) {

  $json[] = array(($i+1) => array_combine($columns, $data[$i]));

}
// 


$json1 = json_encode(array('values' => $json));

$jsonString = str_replace(utf8_encode("\u00a0"),"",$json1);
$jsonString1 = str_replace(utf8_encode("["),"",$jsonString);
$jsonString2 = str_replace(utf8_encode("]"),"",$jsonString1);

//str_replace(array('[',']',array('{','}'),$json1))  
file_put_contents('data.json', $jsonString2) 
?>

My HTML:

<html>
<TABLE border="3" rules="all" bgcolor="#E7E7E7" cellpadding="1" cellspacing="1">
<TR>
<TH align=center><font size="3" face="Arial">Date</font></TH>
<TH align=center><font size="3" face="Arial"><B>Teacher</B></font></TH>
<TH align=center><font size="3" face="Arial">?</font></TH>
<TH align=center><font size="3" face="Arial">Hour</font></TH>
<TH align=center><font size="3" face="Arial">Subject</font></TH>
<TH align=center><font size="3" face="Arial">Class</font></TH>
<TH align=center><font size="3" face="Arial">Room</font></TH>
<TH align=center><font size="3" face="Arial">(Teacher)</font></TH>
<TH align=center><font size="3" face="Arial">(Room)</font></TH>
<TH align=center><font size="3" face="Arial">XYY</font></TH>
<TH align=center><font size="3" face="Arial"><B>Information</B></font></TH>
<TH align=center><font size="3" face="Arial">(Le.) nach</font></TH>
</TR>
<TR><TD align=center><font size="3" face="Arial">24.9.</font></TD>
<TD align=center><font size="3" face="Arial"><B><strike>Dohe</strike></B></font></TD>
<TD align=center><font size="3" face="Arial">Free</font></TD>
<TD align=center><font size="3" face="Arial">1</font></TD>
<TD align=center><font size="3" face="Arial"><strike>Math</strike></font> </TD>
<TD align=center><font size="3" face="Arial">(9)</font> </TD>
<TD align=center><font size="3" face="Arial">---</font> </TD>
<TD align=center><font size="3" face="Arial"><strike>Dohe</strike></font></TD>
<TD align=center><font size="3" face="Arial">A001</font></TD>
<TD align=center>&nbsp;</TD>
<TD align=center>&nbsp;</TD>
<TD align=center><font size="3" face="Arial">Free.</font></TD>
</TR>
<TR><TD align=center><font size="3" face="Arial">26.9.</font></TD>
<TD align=center><font size="3" face="Arial"><B><strike>John</strike></B></font></TD>
<TD align=center><font size="3" face="Arial">Free</font></TD>
<TD align=center><font size="3" face="Arial">8</font></TD>
<TD align=center><font size="3" face="Arial"><strike>Bio</strike></font> </TD>
<TD align=center><font size="3" face="Arial">(9)</font> </TD>
<TD align=center><font size="3" face="Arial">---</font> </TD>
<TD align=center><font size="3" face="Arial"><strike>John</strike></font></TD>
<TD align=center><font size="3" face="Arial">A021</font></TD>
<TD align=center>&nbsp;</TD>
<TD align=center>&nbsp;</TD>
<TD align=center><font size="3" face="Arial">Freeeeeee.</font></TD>
</TR>
</TABLE>

<script type="text/javascript">
        jQuery(document).ready(function(){
          data = new Array();
          columns = [];
          var row = new Array();
          $('table tr').each(function(index,tr){
              var index = index;
              if(index == 0){ // First we get column names from th.

                $(tr).find('th').each(function(thIndex,thValue){
                  columns.push($(thValue).text());
                });
              } else {
                $(tr).find('td').each(function(tdIndex,tdValue){
                  row[tdIndex] = $(tdValue).text(); // Put each td value in row
                });

                data.push(row); // now push each row in data.
                row = new Array(); // reset row after push
              }

          });
        // Send it to PHP for further work:
          $.post('json.php', { data: data, columns: columns }, function(response){
          // TODO with response
          });
        })
        </script>

</html>

Now i get the response :

{"value": {"1":{"Hello":"Test", "Test":"Hello"}},{"2":{"Jello":"Test", "Test":"Jello"}}}

But I need this structure:

{"value": {"1":{"Hello":"Test", "Test":"Hello"},"2":{"Jello":"Test", "Test":"Jello"}}}

Because this is the only structure my App ca work with. One } is to much. But how can I change that and where.

this is valid: { "value": { "1": { "Hello": "Test", "Test": "Hello" }, "2": { "Jello": "Test", "Test": "Jello" } } } — mplungjan
– mplungjan, Commented Oct 9, 2015 at 14:35

Fabian Valle · Accepted Answer · 2015-10-15 02:46:14Z

The main problem is right here:

for($i = 0; $i < count($data); $i++) {

  $json[] = array(($i+1) => array_combine($columns, $data[$i]));

}

This line:

$json[] = array(($i+1) => array_combine($columns, $data[$i]));

Should be

 $json[$i+1] = array_combine($columns, $data[$i]);

Here is the working source code for json.php:

<?php
$data = $_POST['data']; // Each rows values
$columns = $_POST['columns']; // Columns names


for($i = 0; $i < count($data); $i++) {    

  $json[$i+1] = array_combine($columns, $data[$i]);

}

$json1 = json_encode(array('values' => array($json) ));

$jsonString = str_replace(utf8_encode("\u00a0"),"",$json1);
$jsonString1 = str_replace(utf8_encode("["),"",$jsonString);
$jsonString2 = str_replace(utf8_encode("]"),"",$jsonString1);

//str_replace(array('[',']',array('{','}'),$json1))  
file_put_contents('data.json', $jsonString2);
?>

Here is the working HTML & JavaScript:

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.js"></script>
</head>
<body>
<TABLE border="3" rules="all" bgcolor="#E7E7E7" cellpadding="1" cellspacing="1">
<TR>
<TH align=center><font size="3" face="Arial">Date</font></TH>
<TH align=center><font size="3" face="Arial"><B>Teacher</B></font></TH>
<TH align=center><font size="3" face="Arial">?</font></TH>
<TH align=center><font size="3" face="Arial">Hour</font></TH>
<TH align=center><font size="3" face="Arial">Subject</font></TH>
<TH align=center><font size="3" face="Arial">Class</font></TH>
<TH align=center><font size="3" face="Arial">Room</font></TH>
<TH align=center><font size="3" face="Arial">(Teacher)</font></TH>
<TH align=center><font size="3" face="Arial">(Room)</font></TH>
<TH align=center><font size="3" face="Arial">XYY</font></TH>
<TH align=center><font size="3" face="Arial"><B>Information</B></font></TH>
<TH align=center><font size="3" face="Arial">(Le.) nach</font></TH>
</TR>
<TR><TD align=center><font size="3" face="Arial">24.9.</font></TD>
<TD align=center><font size="3" face="Arial"><B><strike>Dohe</strike>    </B></font></TD>
<TD align=center><font size="3" face="Arial">Free</font></TD>
<TD align=center><font size="3" face="Arial">1</font></TD>
<TD align=center><font size="3" face="Arial"><strike>Math</strike></font>     </TD>
<TD align=center><font size="3" face="Arial">(9)</font> </TD>
<TD align=center><font size="3" face="Arial">---</font> </TD>
<TD align=center><font size="3" face="Arial"><strike>Dohe</strike></font>    </TD>
<TD align=center><font size="3" face="Arial">A001</font></TD>
<TD align=center>&nbsp;</TD>
<TD align=center>&nbsp;</TD>
<TD align=center><font size="3" face="Arial">Free.</font></TD>
</TR>
<TR><TD align=center><font size="3" face="Arial">26.9.</font></TD>
<TD align=center><font size="3" face="Arial"><B><strike>John</strike>    </B></font>
</TD>
<TD align=center><font size="3" face="Arial">Free</font></TD>
<TD align=center><font size="3" face="Arial">8</font></TD>
<TD align=center><font size="3" face="Arial"><strike>Bio</strike></font> </TD>
<TD align=center><font size="3" face="Arial">(9)</font> </TD>
<TD align=center><font size="3" face="Arial">---</font> </TD>
<TD align=center><font size="3" face="Arial"><strike>John</strike></font></TD>
<TD align=center><font size="3" face="Arial">A021</font></TD>
<TD align=center>&nbsp;</TD>
<TD align=center>&nbsp;</TD>
<TD align=center><font size="3" face="Arial">Freeeeeee.</font></TD>
</TR>
</TABLE>

<script type="text/javascript">
        jQuery(document).ready(function(){
          data = new Array();
          columns = [];
          var row = new Array();
          $('table tr').each(function(index,tr){
              var index = index;
              if(index == 0){ // First we get column names from th.

                $(tr).find('th').each(function(thIndex,thValue){
                  columns.push($(thValue).text());
                });
              } else {
                $(tr).find('td').each(function(tdIndex,tdValue){
                  row[tdIndex] = $(tdValue).text(); // Put each td value in row
                });

                data.push(row); // now push each row in data.
                row = new Array(); // reset row after push
              }

          });
        // Send it to PHP for further work:
          $.post('json.php', { data: data, columns: columns },     function(response){
              // TODO with response
              console.log('response',response);
              });
            })
            </script>

    </body>
    </html>

The resulting JSON string will be:

{   "values": {     "1": {       "Date": "24.9.",       "Teacher": "Dohe",       "?": "Free",       "Hour": "1",       "Subject": "Math ",       "Class": "(9) ",       "Room": "--- ",       "(Teacher)": "Dohe",       "(Room)": "A001",       "XYY": "",       "Information": "",       "(Le.) nach": "Free."     },     "2": {       "Date": "26.9.",       "Teacher": "John",       "?": "Free",       "Hour": "8",       "Subject": "Bio ",       "Class": "(9) ",       "Room": "--- ",       "(Teacher)": "John",       "(Room)": "A021",       "XYY": "",       "Information": "",       "(Le.) nach": "Freeeeeee."     }   } }

You can verify the structure of the resulting JSON string easily by using http://jsonprettyprint.com/

Few additional suggestions:

better structure your HTML [http://www.w3schools.com/html/html5_intro.asp]
better use of CSS (classes, ids, etc.) [http://www.w3schools.com/css/default.asp]

Hope this helps.

Collectives™ on Stack Overflow

Write JSON data via jQuery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related