asked on

Searching though a JSON with php and jquery

Searching though a JSON with php and jquery

I have some code that querys a DB with php and put the info in a json array here is my code

<html>
<head>
<title>Search</title>
<link rel="stylesheet" type="text/css" href="PrintMeThatLabel.css" />
<script src = "cookie.js" type="text/javascript"> </script>

<script src = "jquery-1.4.3.min.js" type="text/javascript"> </script>
<script src = "http://www.labelwriter.com/software/dls/sdk/js/DYMO.Label.Framework.3.0.js" type="text/javascript" charset="UTF-8"> </script>
<script src = "PrintMeThatLabel2.js" type="text/javascript" charset="UTF-8"> </script>
<style type=text/css>

.text {color: #000; font-family:Arial, Helvetica, sans-serif }
.head {color: #000; font-family:Arial, Helvetica, sans-serif }
.input {display:none;}



.tftable {font-size:12px;color:#333333;width:100%;border-width: 1px;border-color: #729ea5;border-collapse: collapse;}
.tftable th {font-size:12px;background-color:#acc8cc;border-width: 1px;padding: 8px;border-style: solid;border-color: #729ea5;text-align:left;}
.tftable tr {background-color:#d4e3e5;}
.tftable td {font-size:12px;border-width: 1px;padding: 8px;border-style: solid;border-color: #729ea5;}
.tftable tr:hover {background-color:#ffffff;}




</style>

</head>
<body>


    <div class=text align="center">

<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="POST" >

<span class=text>Enter Work Order #: </span>
<input type="text"  name="Work_Order" length="30"  value="">


<input type="submit" name="submit" value = "Search">

</form>
</div>
<div id="wrapper">
<div class='labelDesignArea'> 

    
     <label for="printersSelect">Printer:</label>
        <select id="printersSelect"></select>
        <button id="printButton">Print</button>
<div class='printerSettings'>
    <a  href='javascript:void(0)' style='visibility: hidden' id='printerSettingsButton'>Printer location (url)</a> 
    <div style='visibility: hidden'id='printerSettingsDiv'>
        <label style='visibility: hidden' for='printerUriTextBox'></label>
      <input  style='visibility: hidden' type='text' id='printerUriTextBox'></input>
      <button style='visibility: hidden' id='addPrinterUriButton'>Add</button>
      <button  style='visibility: hidden'id='clearPrinterUriButton'>Clear</button>
    </div>  

</div>
</div>

</div>



<?php
       ini_set("display_errors",1);
       error_reporting(E_ALL);


if(isset($_POST['submit']))
{


$UsrWorkOrder = $_POST['Work_Order'];


//db connect info
include 'conn.php';
//Where the query are stored 
include 'Query.php';






$result_Vis = odbc_exec($conn_Vis,$sql_Vis);  // Get Data From Result
    while($row2 = odbc_fetch_array($result_Vis))
    {
//Store the data in the new array

 

            $result_cor1db01_2 = odbc_exec($conn_cor1db01_2,$sql_cor1db01_2);  // Get Data From Result



$json = array();




echo "<div><table class='tftable'><tbody><tr>";
Echo "<tr><th>Work Order</th><th>Part Number</th><th>Description</th><th>Mfg Lot Number</th><th>Cable Length</th><th>Test Results A</th><th>Test Results B</th></tr>";

$num_rows = odbc_num_rows($result_cor1db01_2);



            while($row3 = odbc_fetch_array($result_cor1db01_2))
            {

//This stores the data 
            	$Barcode = $row3["Work Order No"]."-". $row3["Serial No"];
       			$part = $row2["PART_X"];
        		$DESCR = $row2["DESCR_X"];
        		$MFG = $row3["Work Order No"]."-". $row3["Serial No"];
            	$Cable_Length = $row3["ValueInches"];   

				IF(number_format($row3["Value1"],2)[0] < "1"){
					$Test_A = substr(number_format($row3["Value1"],2), 1);
					
				}Else{
					$Test_A = number_format($row3["Value1"],2);
					
				}

				IF(number_format($row3["Value2"],2)[0] < "1"){
					$Test_A = substr(number_format($row3["Value2"],2), 1);
					
				}Else{
					$Test_A = number_format($row3["Value2"],2);
					
				}



            	
 					// put all the data in to a json array for batch printing labels. 
				    $json []= array (
				        'Barcode' => $Barcode,
				        'part' => $part,
				        'DESCR' => $DESCR,
				        'MFG' => $MFG,
				        'Cable_Length' => $Cable_Length,
				        'Test_A' => $Test_A,
				        'Test_B' => $Test_B

				         );

				   

                   // Echo "<br><br><img src=barcode.php?codetype=Code128B&size=80&text=".$row3["Work Order No"]."-". $row3["Serial No"] ." />";
                    Echo "<td>".$row3["Work Order No"]."-". $row3["Serial No"]."</td>";
                    Echo "<td>".$part."</td>";
                    Echo "<td>".$DESCR."</td>";
                    Echo "<td>" .$row3["Work Order No"]."-". $row3["Serial No"]."</td>";
                    Echo "<td>". $row3["ValueInches"]."</td>";

                    IF(number_format($row3["Value1"],2)[0] < "1"){

                    Echo "<td>".substr($row3["SS1"], -1)." " .substr(number_format($row3["Value1"],2), 1)."</td>";

				}Else{
					Echo "<td>".substr($row3["SS1"], -1)." " .number_format($row3["Value1"],2)."</td>";
					
				}

				IF(number_format($row3["Value2"],2)[0] < "1"){
					Echo "<td>".substr($row3["SS2"], -1)." " .substr(number_format($row3["Value2"],2), 1)."</td> ";
					
				}Else{
					Echo "<td>".substr($row3["SS2"], -1)." " .number_format($row3["Value2"],2)."</td>";
					
				}

				echo "<td > <input type='button' id='bt_".$row3["Serial No"]."' type='submit' value='Print ME'></td></tr>";

                    //Echo "Test Results: ".substr($row3["SS1"], -1)." " .number_format($row3["Value1"],2)."<br>";
                    //Echo "Test Results: ".substr($row3["SS2"], -1)." " .number_format($row3["Value2"],2)."<br>";

            }

echo "<br>".$num_rows ." Rows<br><br>";
             
Echo "</tbody></table></div>";
    }

   ?>
			


<script type="text/javascript">


$("input").click(function() {


  alert(this.id);
  
});

</script>

<?php  
odbc_close($conn_cor1db01_2);
odbc_close($conn_Vis);

}

?>

<!-- This is storing the Json data then this gets pulled in to the PrintMeThatLabel.js   -->
<input type='hidden' value='<?php echo json_encode($json); ?>'  name='mike' id='mike'></input>
</body>
</html>

Open in new window

I have added a Print Me button on line 180 to each row it's pulls in. I want the Print Me button to update the json array with just the row that hold the info the user clicked.

So if it pulls in 5 row and the user click "Print me" on row 2 it will redo the json array with just the info from row 2 and then trigger the <button id="printButton">Print</button>

Also the key ID is $row3["Serial No"] there is one $row3["Serial No"] for each row so that can be used to identify the row the user click

armasmike

ASKER

Well I see that I have out put the $row3["Serial No"] in to the json array I will fix the code

so I fixed this

				    $json []= array (
				    	'Serial_No' => $Serial_No,
				        'Barcode' => $Barcode,
				        'part' => $part,
				        'DESCR' => $DESCR,
				        'MFG' => $MFG,
				        'Cable_Length' => $Cable_Length,
				        'Test_A' => $Test_A,
				        'Test_B' => $Test_B

				         );

Open in new window

now the json is getting the 'Serial_No' => $Serial_No,

armasmike

ASKER

ok my Json data looks like this

[{"Serial_No":"001","Barcode":"M123342-001","part":"F06984-0036","DESCR":"BACC69CCC0036J\/BOEIN, REV R","MFG":"M123342-001","Cable_Length":"36.75 Inches","Test_A":".14","Test_B":null},{"Serial_No":"002","Barcode":"M123342-002","part":"F06984-0036","DESCR":"BACC69CCC0036J\/BOEIN, REV R","MFG":"M123342-002","Cable_Length":"36.75 Inches","Test_A":".09","Test_B":null},{"Serial_No":"003","Barcode":"M123342-003","part":"F06984-0036","DESCR":"BACC69CCC0036J\/BOEIN, REV R","MFG":"M123342-003","Cable_Length":"36.75 Inches","Test_A":".03","Test_B":null},{"Serial_No":"004","Barcode":"M123342-004","part":"F06984-0036","DESCR":"BACC69CCC0036J\/BOEIN, REV R","MFG":"M123342-004","Cable_Length":"36.75 Inches","Test_A":".07","Test_B":null},{"Serial_No":"005","Barcode":"M123342-005","part":"F06984-0036","DESCR":"BACC69CCC0036J\/BOEIN, REV R","MFG":"M123342-005","Cable_Length":"36.625 Inches","Test_A":".08","Test_B":null},]

Open in new window

so each row has it's own "Serial_No":"00x"

David Favor

How you accomplish "Searching though a JSON with php and jquery" is very different.

PHP runs on server side + your JSON will be a PHP data structure.

JQuery runs on client side against + your JSON will be accessed either as actual JSON data or in the browser DOM.

From what you've placed above, looks like you're parsing JSON at server side PHP, then rendering this later in a browser.

Also looks like you figured out + fixed your problem.

If you still require assistance, place an update.

armasmike

ASKER

Well I do need help in if a user press print me button at the end of each row it need to reload the Json data with the info from just that row.

armasmike

ASKER

Or would it be best to when a user press the print me button run a new query just getting the info from the row the user picked ?

Or query the current stored json and only pick the info out from witch the user press print me on

David Favor

Likely best to consider changing to AJAX to handle individual row updates, where many rows are being displayed... otherwise, your entire process is going to become very complex.

armasmike

ASKER

The I don’t want to display the json data. It just storing the info from the dB so I can push it to a label printer.

I just need the json data updated with the info form the row from were the user pressed print me

Scott Fell

What David is saying is correct.

If you have a print me button on each row, the workflow should be to click the print button which sends an ajax request to your php processing page which returns your json data. The json is not displayed, but rather parsed using js/jquery and sent to the printer by your file, PrintMeThatLabel2.js.

David Favor

Another way of saying this... is if you have... say 20 rows setup, pressing a button to update one row is better than refetching all 20 rows each time a button clicks.

This becomes a huge consideration as data size increases (use LIMIT in your SQL statements).

armasmike

ASKER

The php processing page is the same page.

I might need to re do this site

Scott Fell

Yes, your processing page should just accept input such as the product id, then send back the appropriate json response. However, you may already have the required information sent to the screen. In that case, you don't need an external processing page and you can let JavaScript grab what it needs and return json. If there is data that does not get displayed but you need to capture it, you can do so in a td tag with a data attribute like

  <tr>
    <td>Part No</td> 
  </tr>
  <tr>
    <td class="part-number" data-barcode="abc123">1111</td> 
 </tr>

Open in new window

armasmike

ASKER

how do i do the request to get the info form the row that user press the print me button and update the json ver

Scott Fell

There are multiple options. One way is to add it to your print me button like this.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>test</title>
  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  <script>
    $(function(){
      $('button.printme').on('click',function(){
        var json = $(this).data('json');
        // send json to your javascript function for printing

      });
    });
  </script>
</head>
<body>

<table>
  <tr>
    <td>Row 1 Col 1</td>
    <td>Roiw 1 Col 2</td>
    <td><button data-json='[{"row":"1","col":"1","col":"2"}]' class="printme">Print Me</button></td>
  </tr>
  <tr>
    <td>Row 2 Col 1</td>
    <td>Roiw 2 Col 2</td>
    <td><button data-json='[{"row":"2","col":"1","col":"2"}]' class="printme">Print Me</button></td>
  </tr>
  </table>
</body>
</html>

Open in new window

In your example, when you are using your php to build rows

<?php


 $json []= array (
				    	'Serial_No' => $Serial_No,
				        'Barcode' => $Barcode,
				        'part' => $part,
				        'DESCR' => $DESCR,
				        'MFG' => $MFG,
				        'Cable_Length' => $Cable_Length,
				        'Test_A' => $Test_A,
				        'Test_B' => $Test_B

				         );

$printMe= json_encode($json);
echo  "<td><button data-json='$printMe' class="printme">Print Me</button></td>"
?>

Open in new window

Then your jquery to detect the print me button

<script>
    $(function(){
      $('button.printme').on('click',function(){
        var json = $(this).data('json');
        // send json to your javascript function for printing
        // alert(json);  //Should show object:object

      });
    });
  </script>

Open in new window

https://jsbin.com/gohihazupu/edit?html,output

armasmike

ASKER

I am still trying to make this work but just can't

Scott Fell

Start using your browser console. Hit f12, go to the console tab and check for us errors or missing files.

armasmike

ASKER

I am trying to do this here is my full code

<html>
<head>
<title>Search</title>
<link rel="stylesheet" type="text/css" href="PrintMeThatLabel.css" />
<script src = "cookie.js" type="text/javascript"> </script>

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src = "http://www.labelwriter.com/software/dls/sdk/js/DYMO.Label.Framework.3.0.js" type="text/javascript" charset="UTF-8"> </script>
<script src = "PrintMeThatLabel2.js" type="text/javascript" charset="UTF-8"> </script>
<style type=text/css>

.text {color: #000; font-family:Arial, Helvetica, sans-serif }
.head {color: #000; font-family:Arial, Helvetica, sans-serif }
.input {display:none;}



.tftable {font-size:12px;color:#333333;width:100%;border-width: 1px;border-color: #729ea5;border-collapse: collapse;}
.tftable th {font-size:12px;background-color:#acc8cc;border-width: 1px;padding: 8px;border-style: solid;border-color: #729ea5;text-align:left;}
.tftable tr {background-color:#d4e3e5;}
.tftable td {font-size:12px;border-width: 1px;padding: 8px;border-style: solid;border-color: #729ea5;}
.tftable tr:hover {background-color:#ffffff;}




</style>

</head>
<body>


    <div class=text align="center">

<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="POST" >

<span class=text>Enter Work Order #: </span>
<input type="text"  name="Work_Order" length="30"  value="">


<input type="submit" name="submit" value = "Search">

</form>
</div>
<div id="wrapper">
<div class='labelDesignArea'> 

    
     <label for="printersSelect">Printer:</label>
        <select id="printersSelect"></select>
        <button id="printButton">Print</button>



<div class='printerSettings'>
    <a  href='javascript:void(0)' style='visibility: hidden' id='printerSettingsButton'>Printer location (url)</a> 
    <div style='visibility: hidden'id='printerSettingsDiv'>
        <label style='visibility: hidden' for='printerUriTextBox'></label>
      <input  style='visibility: hidden' type='text' id='printerUriTextBox'></input>
      <button style='visibility: hidden' id='addPrinterUriButton'>Add</button>
      <button  style='visibility: hidden'id='clearPrinterUriButton'>Clear</button>
    </div>  

</div>
</div>

</div>



<?php
       ini_set("display_errors",1);
       error_reporting(E_ALL);


if(isset($_POST['submit']))
{


$UsrWorkOrder = $_POST['Work_Order'];


//db connect info
include 'conn.php';
//Where the query are stored 
include 'Query.php';






$result_Vis = odbc_exec($conn_Vis,$sql_Vis);  // Get Data From Result
    while($row2 = odbc_fetch_array($result_Vis))
    {
//Store the data in the new array

 

            $result_cor1db01_2 = odbc_exec($conn_cor1db01_2,$sql_cor1db01_2);  // Get Data From Result



$json = array();




echo "<div><table class='tftable'><tbody><tr>";
Echo "<tr><th>Work Order</th><th>Part Number</th><th>Description</th><th>Mfg Lot Number</th><th>Cable Length</th><th>Test Results A</th><th>Test Results B</th></tr>";

$num_rows = odbc_num_rows($result_cor1db01_2);



            while($row3 = odbc_fetch_array($result_cor1db01_2))
            {

//This stores the data 
            	$Serial_No = $row3["Serial No"];
            	$Barcode = $row3["Work Order No"]."-". $row3["Serial No"];
       			$part = $row2["PART_X"];
        		$DESCR = $row2["DESCR_X"];
        		$MFG = $row3["Work Order No"]."-". $row3["Serial No"];
            	$Cable_Length = $row3["ValueInches"]; 



				IF(number_format($row3["Value1"],2)[0] < "1"){
					$Test_A = substr(number_format($row3["Value1"],2), 1);
					
				}Else{
					$Test_A = number_format($row3["Value1"],2);
					
				}

				IF(number_format($row3["Value2"],2)[0] < "1"){
					$Test_A = substr(number_format($row3["Value2"],2), 1);
					
				}Else{
					$Test_A = number_format($row3["Value2"],2);
					
				}



            	
 					// put all the data in to a json array for batch printing labels. 
				    $json []= array (
				    	'Serial_No' => $Serial_No,
				        'Barcode' => $Barcode,
				        'part' => $part,
				        'DESCR' => $DESCR,
				        'MFG' => $MFG,
				        'Cable_Length' => $Cable_Length,
				        'Test_A' => $Test_A,
				        'Test_B' => $Test_B

				         );

				   

                   // Echo "<br><br><img src=barcode.php?codetype=Code128B&size=80&text=".$row3["Work Order No"]."-". $row3["Serial No"] ." />";
                    Echo "<td>".$row3["Work Order No"]."-". $row3["Serial No"]."</td>";
                    Echo "<td>".$part."</td>";
                    Echo "<td>".$DESCR."</td>";
                    Echo "<td>" .$row3["Work Order No"]."-". $row3["Serial No"]."</td>";
                    Echo "<td>". $row3["ValueInches"]."</td>";

                    IF(number_format($row3["Value1"],2)[0] < "1"){

                    Echo "<td>".substr($row3["SS1"], -1)." " .substr(number_format($row3["Value1"],2), 1)."</td>";

				}Else{
					Echo "<td>".substr($row3["SS1"], -1)." " .number_format($row3["Value1"],2)."</td>";
					
				}

				IF(number_format($row3["Value2"],2)[0] < "1"){
					Echo "<td>".substr($row3["SS2"], -1)." " .substr(number_format($row3["Value2"],2), 1)."</td> ";
					
				}Else{
					Echo "<td>".substr($row3["SS2"], -1)." " .number_format($row3["Value2"],2)."</td>";
					
					
				}
echo  "<td><button data-bob='$Serial_No' class='printme'>Print Me</button></td></tr>";

				
                    //Echo "Test Results: ".substr($row3["SS1"], -1)." " .number_format($row3["Value1"],2)."<br>";
                    //Echo "Test Results: ".substr($row3["SS2"], -1)." " .number_format($row3["Value2"],2)."<br>";

            }
//$printMe= json_encode($json);
//echo json_encode($json);
echo "<br>".$num_rows ." Rows<br><br>";
             
Echo "</tbody></table></div>";
    }

   ?>
			


<script type="text/javascript">


 $(function(){
      $('button.printme').on('click',function(){
      	
var mike = '[{"Serial_No":"001","Barcode":"M123346-002","part":"F06984-00437","DESCR":"BACC69CCC0043J\/BOEIN, REV R","MFG":"M123346-002","Cable_Length":"43.375 Inches","Test_A":".05","Test_B":".13"}]';
        
      	function findByRow(mike, Serial_No) {
   return mike.filter(function(r) { return r["Serial_No"] == Serial_No })[0]||null;

}

      	var result =  JSON.stringify(findByRow(mike, 001));

         alert(result);  
         alert("mike");

      });
    });

</script>

<?php  
odbc_close($conn_cor1db01_2);
odbc_close($conn_Vis);

}

?>

<!-- This is storing the Json data then this gets pulled in to the PrintMeThatLabel.js   -->
<input type='hidden' value='<?php echo json_encode($json); ?>'  name='mike' id='mike'></input>
</body>
</html>

Open in new window

this is just the javascript.

<script type="text/javascript">


 $(function(){
      $('button.printme').on('click',function(){
      	
var mike = '[{"Serial_No":"001","Barcode":"M123346-002","part":"F06984-00437","DESCR":"BACC69CCC0043J\/BOEIN, REV R","MFG":"M123346-002","Cable_Length":"43.375 Inches","Test_A":".05","Test_B":".13"}]';
        
      	function findByRow(mike, Serial_No) {
   return mike.filter(function(r) { return r["Serial_No"] == Serial_No })[0]||null;

}

      	var result =  JSON.stringify(findByRow(mike, 001));

         alert(result);  
         alert("mike");

      });
    });

</script>

Open in new window

so the code on 211

var mike = '[{"Serial_No":"001","Barcode":"M123346-002","part":"F06984-00437","DESCR":"BACC69CCC0043J\/BOEIN, REV R","MFG":"M123346-002","Cable_Length":"43.375 Inches","Test_A":".05","Test_B":".13"}]';

Open in new window

I am trying to get the php

// put all the data in to a json array for batch printing labels. 
				    $json []= array (
				    	'Serial_No' => $Serial_No,
				        'Barcode' => $Barcode,
				        'part' => $part,
				        'DESCR' => $DESCR,
				        'MFG' => $MFG,
				        'Cable_Length' => $Cable_Length,
				        'Test_A' => $Test_A,
				        'Test_B' => $Test_B

				         );

Open in new window

go to the var mike on line 211 in the javacode when the user first enters a work order and click the search button.

Then if they click the Print Me button it searches the Var Mike for the Serial_No

echo  "<td><button data-bob='$Serial_No' class='printme'>Print Me</button></td></tr>";

Open in new window

but it's not working I am missing something

armasmike

ASKER

ok so I am now getting a error msg in the console here is the code

<script type="text/javascript">


 $(function(){
      $('button.printme').on('click',function(){
      	var json = $(this).data('json');
      	
var mike = '[{"Serial_No":"001","Barcode":"M123346-002","part":"F06984-00437","DESCR":"BACC69CCC0043J\/BOEIN, REV R","MFG":"M123346-002","Cable_Length":"43.375 Inches","Test_A":".05","Test_B":".13"}]';
        
var Newmike =  mike.filter(function(ss) {
	return ss.Serial_No == json;
});

      	

         alert(NewMike);  
         alert("mike");

      });
    });

</script>

Open in new window

Error is SCRIPT438: Object doesn't support property or method 'filter' and it's going to this line

var Newmike =  mike.filter(function(ss) {
	return ss.Serial_No == json;
});

Open in new window

Scott Fell

I don't think your var Mike should be enclosed with quotes.

Try this for testing.

https://jsbin.com/depunijifu/edit?html,console

$(function(){
  
  var mike = [{"Serial_No":"001","Barcode":"M123346-002","part":"F06984-00437","DESCR":"BACC69CCC0043J\/BOEIN, REV R","MFG":"M123346-002","Cable_Length":"43.375 Inches","Test_A":".05","Test_B":".13"}];
        

  var Newmike = mike.filter(function (ss) {
    return (ss.Serial_No === "001");
  });

  console.log(Newmike);
  
});

Open in new window

The response is

[[object Object] {
  Barcode: "M123346-002",
  Cable_Length: "43.375 Inches",
  DESCR: "BACC69CCC0043J/BOEIN, REV R",
  MFG: "M123346-002",
  part: "F06984-00437",
  Serial_No: "001",
  Test_A: ".05",
  Test_B: ".13"
}]

Open in new window

If you run into any issues, try and recreate it on jsfiddle or jsbin with just the front end html and javascript/jquery. The php is only generating the html and not needed to figure out this issue other than if it is outputting bad data.

armasmike

ASKER

You got to be kidding me it was the damn quotes.

now how to I get the php

 $json []= array (
				    	'Serial_No' => $Serial_No,
				        'Barcode' => $Barcode,
				        'part' => $part,
				        'DESCR' => $DESCR,
				        'MFG' => $MFG,
				        'Cable_Length' => $Cable_Length,
				        'Test_A' => $Test_A,
				        'Test_B' => $Test_B

				         );

Open in new window

down to the var mike in the javacode ?

armasmike

ASKER

ok to I added

<script type="text/javascript">


 $(function()
 {
      $('button.printme').on('click',function()
      {
      	var json = $(this).data('json');

      	
      	var mike = document.getElementById('mike').value;

		
        
console.log(mike);
		var NewMike =  mike.filter(function(ss) 
			{
				return ss.Serial_No == json;
										
			});

      	

         console.log(NewMike); 
     
      });
});

</script>

Open in new window

and I am back to the SCRIPT438: Object doesn't support property or method 'filter'

armasmike

ASKER

the out put on the console.lo(mike) on line 15 is this

 [{"Serial_No":"001","Barcode":"M123340-001","part":"F06984-0035","DESCR":"BACC69CCC0035J\/BOEIN, REV R","MFG":"M123340-001","Cable_Length":"35.125 Inches","Test_A":".19","Test_B":null},{"Serial_No":"002","Barcode":"M123340-002","part":"F06984-0035","DESCR":"BACC69CCC0035J\/BOEIN, REV R","MFG":"M123340-002","Cable_Length":"35 Inches","Test_A":".04","Test_B":null}]

Open in new window

I don't see any quotes

It works if I hard code the data in there but no when I use

var mike = document.getElementById('mike').value;

Open in new window

Scott Fell

OK, you have to parse the json.

https://jsbin.com/wahokijexi/edit?html,console

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>test</title>
<script src="https://code.jquery.com/jquery-git.js"></script>
  <script>
$(function(){
  
  //var mike = [{"Serial_No":"001","Barcode":"M123346-002","part":"F06984-00437","DESCR":"BACC69CCC0043J\/BOEIN, REV R","MFG":"M123346-002","Cable_Length":"43.375 Inches","Test_A":".05","Test_B":".13"}];
   var mike = document.getElementById('mike').value;  
  var objMike = JSON.parse(mike);

  var Newmike = objMike.filter(function (ss) {
    return (ss.Serial_No === "001");
  });

  console.log(Newmike);
  
});

  </script>
  </head>
<body>

<input type='hidden' value='[{"Serial_No":"001","Barcode":"M123346-002","part":"F06984-00437","DESCR":"BACC69CCC0043J\/BOEIN, REV R","MFG":"M123346-002","Cable_Length":"43.375 Inches","Test_A":".05","Test_B":".13"}]'  name='mike' id='mike'></input>

</body>
</html>

Open in new window

armasmike

ASKER

how do I get it to load the Newmike info Back in to the <input type='hidden' value='Newmike' name='mike' id='mike'></input>

Scott Fell

Use the same code you had. I was using static data to show how it works.

Scott Fell

You had

<input type='hidden' value='<?php echo json_encode($json); ?>'  name='mike' id='mike'></input>

Open in new window

If there are issues, then you want to check the output of the echo json_encode($json);.

armasmike

ASKER

ok so the data is loaded with php.

<input type='hidden' value='<?php echo json_encode($json); ?>'  name='mike' id='mike'></input>
</body>
</html>

Open in new window

when the user click print me it need to reload that data with the new json info

Scott Fell

Correct

armasmike

ASKER

do I use element.setAttribute

Scott Fell

What I have posted here https://www.experts-exchange.com/questions/29128349/Searching-though-a-JSON-with-php-and-jquery.html?anchorAnswerId=42752825#a42752825 works as expected.

The only difference is you wiill change

<input type='hidden' value='[{"Serial_No":"001","Barcode":"M123346-002","part":"F06984-00437","DESCR":"BACC69CCC0043J\/BOEIN, REV R","MFG":"M123346-002","Cable_Length":"43.375 Inches","Test_A":".05","Test_B":".13"}]'  name='mike' id='mike'></input>

Open in new window

<input type='hidden' value='<?php echo json_encode($json); ?>'  name='mike' id='mike'>

Open in new window

armasmike

ASKER

I just don't see it man.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>test</title>
<script src="https://code.jquery.com/jquery-git.js"></script>
  <script>
$(function(){
  
  //var mike = [{"Serial_No":"001","Barcode":"M123346-002","part":"F06984-00437","DESCR":"BACC69CCC0043J\/BOEIN, REV R","MFG":"M123346-002","Cable_Length":"43.375 Inches","Test_A":".05","Test_B":".13"}];
   var mike = document.getElementById('mike').value;  
  var objMike = JSON.parse(mike);

  var Newmike = objMike.filter(function (ss) {
    return (ss.Serial_No === "001");
  });

 
  console.log(Newmike);
  
});

  </script>
  </head>
<body>

<input type='hidden' value='[{"Serial_No":"001","Barcode":"M123346-001","part":"F06984-00437","DESCR":"BACC69CCC0043J\/BOEIN, REV R","MFG":"M123346-002","Cable_Length":"43.375 Inches","Test_A":".05","Test_B":".13"},{"Serial_No":"002","Barcode":"M123346-002","part":"F06984-00437","DESCR":"BACC69CCC0043J\/BOEIN, REV R","MFG":"M123346-002","Cable_Length":"43.375 Inches","Test_A":".05","Test_B":".13"}]'  name='mike' id='mike'></input>

   </body>
</html>

Open in new window

ones it runs the input value need to change to

<input type='hidden' value='[{"Serial_No":"001","Barcode":"M123346-001","part":"F06984-00437","DESCR":"BACC69CCC0043J\/BOEIN, REV R","MFG":"M123346-002","Cable_Length":"43.375 Inches","Test_A":".05","Test_B":".13"}]'  name='mike' id='mike'></input>

Open in new window

How to a push the new json data to the old input value ?

Scott Fell

My previous example shows how to do that.

https://www.experts-exchange.com/questions/29128349/Searching-though-a-JSON-with-php-and-jquery.html?anchorAnswerId=42750357#a42750357

Looking at my example, you don't need to use the input file.

armasmike

ASKER

I do need the input file as that info gets loaded in to the

<script src = "PrintMeThatLabel2.js" type="text/javascript" charset="UTF-8"> </script>

using

var mike = document.getElementById('mike').value;

        //This is parse the json data. 
        var obj = jQuery.parseJSON(mike);
       


        function loadcreateLabelSet(json)
        {
            labelSet = createLabelSet(json);
        };

        function createLabelSet(json)
        {
          
            var labelSet = new dymo.label.framework.LabelSetBuilder();
         
         //This is looping thought the data in the josn so we can put a var to each obj.
            for (var i in obj) 

            {
              //This is getting the name Barcode from the json an storeing the next field after the ,.
                var Barcode = obj[i].Barcode;
                var part = obj[i].part;
                var DESCR = obj[i].DESCR;
                var MFG = obj[i].MFG;
                var Cable_Length = obj[i].Cable_Length;
                var Test_A = obj[i].Test_A;
                var Test_B = obj[i].Test_B;


                //This is addeding the the json data to each text field in the lable xml.
                var record = labelSet.addRecord();

                // so "BARCODE" is the place holder in the label xml and Barcode is the var from the json data. 
                record.setText("BARCODE", Barcode);
                record.setText("PartNumber", part);
                record.setText("Description", DESCR);
                record.setText("MfgLotNumber", MFG);
                record.setText("CableLength", Cable_Length);

                record.setText("TestResultsA", Test_A);
                record.setText("TestResultsB", Test_B);
                

            }

            
            return labelSet;
        }

Open in new window

This is how I load the data in to the the dymo printer
so I need to reload the input file is the new json data so that the

<script src = "PrintMeThatLabel2.js" type="text/javascript" charset="UTF-8"> </script>

can put the label with the new json data when the user click print me

armasmike

ASKER

o hold on I think I know what your talking about let me try something

armasmike

ASKER

ok take a look at this

https://jsbin.com/kuvexizuyu/edit?html,console,output

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>test</title>
<script src="https://code.jquery.com/jquery-git.js"></script>
  <script>
$(function(){
  
  //var mike = [{"Serial_No":"001","Barcode":"M123346-002","part":"F06984-00437","DESCR":"BACC69CCC0043J\/BOEIN, REV R","MFG":"M123346-002","Cable_Length":"43.375 Inches","Test_A":".05","Test_B":".13"}];
   var mike = document.getElementById('mike').innerText;  
  var objMike = JSON.parse(mike);

  var Newmike = objMike.filter(function (ss) {
    return (ss.Serial_No === "001");
  });
  
  var objMike2 = JSON.parse(Newmike);

  console.log(Newmike);
  
  document.getElementById('mike').innerText = Newmike
  
});

  </script>
  </head>
<body>
<div id='mike' name='mike'> [{"Serial_No":"002","Barcode":"M123346-002","part":"F06984-00437","DESCR":"BACC69CCC0043J\/BOEIN, REV R","MFG":"M123346-002","Cable_Length":"43.375 Inches","Test_A":".05","Test_B":".13"},{"Serial_No":"001","Barcode":"M123346-001","part":"F06984-00437","DESCR":"BACC69CCC0043J\/BOEIN, REV R","MFG":"M123346-002","Cable_Length":"43.375 Inches","Test_A":".05","Test_B":".13"}]</div>
</body>
</html>

Open in new window

Scott Fell

OK!

armasmike

ASKER

the output still shows

[{"Serial_No":"002","Barcode":"M123346-002","part":"F06984-00437","DESCR":"BACC69CCC0043J\/BOEIN, REV R","MFG":"M123346-002","Cable_Length":"43.375 Inches","Test_A":".05","Test_B":".13"},{"Serial_No":"001","Barcode":"M123346-001","part":"F06984-00437","DESCR":"BACC69CCC0043J\/BOEIN, REV R","MFG":"M123346-002","Cable_Length":"43.375 Inches","Test_A":".05","Test_B":".13"}]

and I get a error

"jQuery.Deferred exception: JSON.parse Error: Invalid character at position:2"

"SyntaxError: JSON.parse Error: Invalid character at position:2
at Anonymous function (https://null.jsbin.com/runner:21:2)
at mightThrow (https://code.jquery.com/jquery-git.js:3531:10)
at Anonymous function (https://code.jquery.com/jquery-git.js:3599:12)"

undefined

"error"

"Script error. (line 0)"

If I take off var objMike2 = JSON.parse(Newmike);

the out put changes to [object Object]

Scott Fell

That is the idea. I think you will be better off using jquery to grab the content though because it will be easier to work with multiple browser support.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>test</title>
<script src="https://code.jquery.com/jquery-git.js"></script>
  <script>
$(function(){
  
  //var mike = [{"Serial_No":"001","Barcode":"M123346-002","part":"F06984-00437","DESCR":"BACC69CCC0043J\/BOEIN, REV R","MFG":"M123346-002","Cable_Length":"43.375 Inches","Test_A":".05","Test_B":".13"}];
  var mike = $('#mike').text(); 
  var objMike = JSON.parse(mike);
  var Newmike = objMike.filter(function (ss) {
    return (ss.Serial_No === "001");
  });

  console.log(Newmike);
  
});

  </script>
  </head>
<body>
<div id='mike' name='mike'>[{"Serial_No":"002","Barcode":"M123346-002","part":"F06984-00437","DESCR":"BACC69CCC0043J\/BOEIN, REV R","MFG":"M123346-002","Cable_Length":"43.375 Inches","Test_A":".05","Test_B":".13"},{"Serial_No":"001","Barcode":"M123346-002","part":"F06984-00437","DESCR":"BACC69CCC0043J\/BOEIN, REV R","MFG":"M123346-002","Cable_Length":"43.375 Inches","Test_A":".05","Test_B":".13"}]</div>
</body>
</html>

Open in new window

Also, in <div id='mike' name='mike'></> make sure to not leave any white space.

ASKER CERTIFIED SOLUTION

Scott Fell

membership

Create a free account to see this answer

Signing up is free and takes 30 seconds. No credit card required.

See answer

armasmike

ASKER

no it's not working

the console shows

[[object Object] {
  Barcode: "M123346-002",
  Cable_Length: "43.375 Inches",
  DESCR: "BACC69CCC0043J/BOEIN, REV R",
  MFG: "M123346-002",
  part: "F06984-00437",
  Serial_No: "001",
  Test_A: ".05",
  Test_B: ".13"
}]

Open in new window

the output is

[{"Serial_No":"003","Barcode":"M123346-003","part":"F06984-00437","DESCR":"BACC69CCC0043J\/BOEIN, REV R","MFG":"M123346-002","Cable_Length":"43.375 Inches","Test_A":".05","Test_B":".13"},{"Serial_No":"001","Barcode":"M123346-002","part":"F06984-00437","DESCR":"BACC69CCC0043J\/BOEIN, REV R","MFG":"M123346-002","Cable_Length":"43.375 Inches","Test_A":".05","Test_B":".13"}]

when it runs the output need to change to

{"Serial_No":"001","Barcode":"M123346-002","part":"F06984-00437","DESCR":"BACC69CCC0043J\/BOEIN, REV R","MFG":"M123346-002","Cable_Length":"43.375 Inches","Test_A":".05","Test_B":".13"}]

and this is just not doing it unless I am missing something

armasmike

ASKER

ok got it working

 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>test</title>
<script src="https://code.jquery.com/jquery-git.js"></script>
  <script>
$(function(){
  
  //var mike = [{"Serial_No":"001","Barcode":"M123346-002","part":"F06984-00437","DESCR":"BACC69CCC0043J\/BOEIN, REV R","MFG":"M123346-002","Cable_Length":"43.375 Inches","Test_A":".05","Test_B":".13"}];
  var mike = $('#mike').text(); 
  var objMike = JSON.parse(mike);
  var Newmike = objMike.filter(function (ss) {
    return (ss.Serial_No === "001");
  });

  console.log(Newmike);
  
  var bob = JSON.stringify(Newmike)
  
  $('#mike').text(bob);
  
});

  </script>
  </head>
<body>
<div id='mike' name='mike'>[{"Serial_No":"003","Barcode":"M123346-003","part":"F06984-00437","DESCR":"BACC69CCC0043J\/BOEIN, REV R","MFG":"M123346-002","Cable_Length":"43.375 Inches","Test_A":".05","Test_B":".13"},{"Serial_No":"001","Barcode":"M123346-002","part":"F06984-00437","DESCR":"BACC69CCC0043J\/BOEIN, REV R","MFG":"M123346-002","Cable_Length":"43.375 Inches","Test_A":".05","Test_B":".13"}]</div>
</body>
</html>

Open in new window

armasmike

ASKER

Very helpful and good back and form response time

Scott Fell

Good job!