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
armasmikeAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

armasmikeAuthor Commented:
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,
armasmikeAuthor Commented:
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 FavorLinux/LXD/WordPress/Hosting SavantCommented:
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.
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

armasmikeAuthor Commented:
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.
armasmikeAuthor Commented:
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 FavorLinux/LXD/WordPress/Hosting SavantCommented:
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.
armasmikeAuthor Commented:
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, EE MVEDeveloper & EE ModeratorCommented:
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 FavorLinux/LXD/WordPress/Hosting SavantCommented:
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).
armasmikeAuthor Commented:
The php processing page is the same page.

I might need to re do this site
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
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

armasmikeAuthor Commented:
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, EE MVEDeveloper & EE ModeratorCommented:
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
armasmikeAuthor Commented:
I am still trying to make this work but just can't
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Start using your browser console.  Hit f12, go to the console tab and check for us errors or missing files.
armasmikeAuthor Commented:
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
armasmikeAuthor Commented:
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, EE MVEDeveloper & EE ModeratorCommented:
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.
armasmikeAuthor Commented:
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 ?
armasmikeAuthor Commented:
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'
armasmikeAuthor Commented:
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, EE MVEDeveloper & EE ModeratorCommented:
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

armasmikeAuthor Commented:
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, EE MVEDeveloper & EE ModeratorCommented:
Use the same code you had. I was using static data to show how it works.
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
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);.
armasmikeAuthor Commented:
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, EE MVEDeveloper & EE ModeratorCommented:
Correct
armasmikeAuthor Commented:
do I use element.setAttribute
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
What I have posted here https://www.experts-exchange.com/questions/29128349/Searching-though-a-JSON-with-php-and-jquery.html#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

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

Open in new window

armasmikeAuthor Commented:
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, EE MVEDeveloper & EE ModeratorCommented:
My previous example shows how to do that.

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

Looking at my example, you don't need to use the input file.
armasmikeAuthor Commented:
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
armasmikeAuthor Commented:
o hold on I think I know what your talking about let me try something
armasmikeAuthor Commented:
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, EE MVEDeveloper & EE ModeratorCommented:
OK!
armasmikeAuthor Commented:
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, EE MVEDeveloper & EE ModeratorCommented:
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.
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
My code is working  https://jsbin.com/?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 = $('#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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
armasmikeAuthor Commented:
no it's not working
The output is showing all the info it need to show just the 001
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
armasmikeAuthor Commented:
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

armasmikeAuthor Commented:
Very helpful and good back and form response time
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Good job!
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
PHP

From novice to tech pro — start learning today.