How can I add more than 3 rows to my json output?

Question

I'm trying to write a website where productinfo from a database gets shown and filtered. But I'm running into a problem with my json output: I'm trying to put my data into an array where i can grab my data from later on my html. But I cant get more than 3 rows into my array, if I try to add more I get the error 'Uncaught SyntaxError: JSON.parse: bad control character in string literal at line 1 column 550 of the JSON data'. How can I add at least one more?

<script>
                   var xmlhttp = new XMLHttpRequest();
                var url = "getInstruments.php";
                xmlhttp.onreadystatechange=function() {
                  if (this.readyState == 4 && this.status == 200) {
                    myFunction(this.responseText);
                  }
                }
                
                xmlhttp.open("GET", url, true);
                xmlhttp.send();
                
                function myFunction(response) {
                  var arr = JSON.parse(response);
                  var i;
                  var j = '<div class="row" style="display:grid;">';
                  var k = '<div class="tile">'; 
                  var l = '<div class="card-deck">';
                  var m = '<div class="card border-secondary">';
                  var n = '<img style="height:300;" src="images/" class="card-img-top">';
                  var o = '<div class="card-title">';
                  var p = '<h6 class="text-light bg-info text-center rounded p-1">';
                  var q = '<div class="card-body">';
                  var r = '<h4 class="card-title text-danger">';
                  var s = '<div class="hovertext">';   
                
                  
                  var out = j; 
                  for(i = 0; i < arr.length; i++) {
                    out += k;
                    
                    out += l;
                    out += m;
                    out += n;
                    out += o;
                    out += p;
                    out += arr[i].Name;
                    out += "</h6>";
                    out += q;
                    out += "<h5>";
                    out += "Artikelnr.: "
                    out += arr[i].Artikelnr;     
                    out += "</h5>"
                    out += r;
                    out += "Preis ";
                    out += arr[i].Preis;
                    out += " Euro";
                    out += "</h4>"
                    out += s;
                    out += "</div>";
                    out += "</div>";
                    out += "</div>";
                    out += "</div>";
                    out += "</div>";
                    out += "</div>";
                  }
                  out += "</div>";
                  document.getElementById("id01").innerHTML = out;
                }
                </script>

<?php
header("Access-Control-Allow-Origin: *");
header("Content-Type: application/json; charset=UTF-8");

$conn = new mysqli("localhost","root","","musik");
if($conn->connect_error) {
  exit('Could not connect');
}



$result = $conn->query("SELECT ARTIKELNR, ART, BEZ, PREIS, BEM, BILDPFAD FROM INSTRUMENT ");
$outp = "[";
while($rs = $result->fetch_array(MYSQLI_ASSOC)) {
    if ($outp != "[") {$outp .= ",";}
    $outp .= '{"Name":"'  . $rs["BEZ"] . '",';
    $outp .= '"Artikelnr":"'   . $rs["ARTIKELNR"] . '",';
    //$outp .= '"Art":"'  .$rs["ART"] .'",'; ->IF I ADD IT, I GET THE ERROR
    $outp .= '"Preis":"'. $rs["PREIS"]     . '"}';
}
$outp .="]";

$conn->close();


echo ($outp);

?>

How can I add more than 3 rows to my json output?

0 Answers0