title: Uncaught SyntaxError: Unexpected end of JSON input
body: <p>I am trying to get d3 design based on input </p>
  
  <p>MySQL table</p>
  
  <pre><code>value    id       name      parent
  A         1        A         0
  A         2        A1        1
  A         3        A2        1
  B         4        B         0
  B         5        B1        4
  </code></pre>
  
  <p>php code to get mysql data into json format to use in d3</p>
  
  <p>UPDATED PHP AND JSON RESULT BASED ON @Z-BONE ANSWER</p>
  
  <p><strong>index.php</strong></p>
  
  <pre><code>&lt;?php
  
  if(isset($_GET['input']))
  {
  $con=mysqli_connect("localhost","root","admin321","php");       
  
  if (mysqli_connect_errno())                
    {
    echo "Failed to connect to MySQL: " . mysqli_connect_error();
    }
     $name=$_GET['input'];
   $sql="SELECT * FROM tab where value LIKE '%".$name."%'";
  $r = mysqli_query($con,$sql);
          $data = array();
          while($row = mysqli_fetch_assoc($r)) {
           $data[] = $row;
           }  
           function buildtree($src_arr, $parent_id = 0, $tree = array())
  {
      foreach($src_arr as $idx =&gt; $row)
      {
          if($row['parent'] == $parent_id)
          {
              foreach($row as $k =&gt; $v)
                  $tree[$row['id']][$k] = $v;
              unset($src_arr[$idx]);
              $tree[$row['id']]['children'] = buildtree($src_arr, $row['id']);
          }
      }
      ksort($tree);
      return $tree;
  }
  
  function insertIntoNestedArray(&amp;$array, $searchItem){
  
      if($searchItem['parent'] == 0){
          array_push($array, $searchItem);
          return;
      }
      if(empty($array)){ return; }
   array_walk($array, function(&amp;$item, $key, $searchItem){
      if($item['id'] == $searchItem['parent']){
              array_push($item['children'], $searchItem);
              return;
          }
          insertIntoNestedArray($item['children'], $searchItem);
  }, $searchItem);
  }
  $nestedArray = array();
  foreach($data as $itemData){
  
      $nestedArrayItem['id'] = $itemData['id'];
      $nestedArrayItem['name'] = $itemData['name'];
   $nestedArrayItem['parent'] = $itemData['parent'];
      $nestedArrayItem['children'] = array();
  
      insertIntoNestedArray($nestedArray, $nestedArrayItem);
  }
     header('Content-Type: application/json');
   $json= json_encode($nestedArray);
  echo $json ;
  
  }
  ?&gt;
  </code></pre>
  
  <p>json result from PHP  is below based on my input (B)</p>
  
  <pre><code>      [
        {
    "id":"4",
    "name":"B",
    "parent":"0",
    "children":[
       {
          "id":"5",
          "name":"B1",
          "parent":"4",
          "children":[
  
          ]
       }
    ]
    }
     ]
  </code></pre>
  
  <p>BEFORE UPDATE PHP AND JSON RESULT IS as here - <a href="http://pastebin.com/409DfSuQ" rel="nofollow noreferrer">http://pastebin.com/409DfSuQ</a></p>
  
  <p>I used </p>
  
  <pre><code>        echo $json = substr($json, 1, -1);
  </code></pre>
  
  <p>here ,to remove the first and last brackets which give "cannot read property of foreach"error in D3.</p>
  
  <p><strong>draw.html</strong></p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
  &lt;title&gt; draw&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;form name="vinform"method="get"&gt;
  &lt;input type="text" name="input"&gt;
  &lt;input type="submit" value="Show" id="display"&gt;
  &lt;/form&gt;
  &lt;div id="content"&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>if I run this code with</p>
  
  <pre><code>&lt;form name="vinform"method="get"action="index.php"&gt;
  </code></pre>
  
  <p>the output is A valid json..and i also tried copying this json into a separate file and used in d3...that works fine...
  but the problem is when i used the draw.html file with</p>
  
  <pre><code>&lt;form name="vinform"method="get"action="index.html"&gt;
  </code></pre>
  
  <p>it shows <a href="https://i.stack.imgur.com/PypEY.png" rel="nofollow noreferrer">this</a>
  and this error  take me to this line in index.html</p>
  
  <pre><code>           d3.json("index.php", function(error,flare) {
            if (error) throw error;  //shows Unexpected end of json input
  </code></pre>
  
  <p><strong>my index.html is</strong> </p>
  
  <pre><code>    &lt;!DOCTYPE html&gt;
       &lt;html&gt;
      &lt;head&gt;
         &lt;title&gt;Radial Cluster Demo&lt;/title&gt;
      &lt;script src="//d3js.org/d3.v3.min.js"&gt;&lt;/script&gt; 
       &lt;style&gt;
      .node {
          cursor: pointer;
      }
      .overlay {
          background-color:white;
      }
      .node circle {
          fill: #fff;
          stroke: steelblue;
          stroke-width: 1.5px;
      }
      .node text {
           font: sans-serif;
          font-size: 80%;
          text-align: center;
      }
      .link {
          fill: none;   
      } 
      .parent{
      fill :red;
      }
      div#tooltip {   
          position: absolute;         
            font: 15px sans-serif;        
          background: orange; 
           border-radius: 8px;    
              padding-left: 5px;
              padding-right: 5px;
          pointer-events: none;           
      }
  
       &lt;/style&gt;
          &lt;/head&gt;
  
        &lt;body&gt;
       &lt;div id="tooltip" style="display:none"&gt;&lt;/div&gt;
      &lt;div id="tree-container"class="full"&gt;&lt;/div&gt;
      &lt;script type="text/javascript"&gt;
  
  
      var selectedNode = null;
      var draggingNode = null;
  
      var panSpeed = 200;
      var panBoundary = 0; 
  
      var i = 0;
      var duration = 750;
      var root;
  
      var width = 5000;
      var height = 5000;
  
      var diameter = 750;
  
      var tree = d3.layout.tree().size([360, diameter / 2 - 120])
  
          .separation(function (a, b) {
          return (a.parent == b.parent ? 1 : 5) / a.depth;
      });
      var diagonal = d3.svg.diagonal.radial()
  
          .projection(function (d) {
          return [d.y, d.x / 180 * Math.PI];
      });
  
  
      d3.select(self.frameElement).style("height", width);
  
  
  
      function sortTree() {
          tree.sort(function (a, b) {
          return b.name.toLowerCase() &lt; a.name.toLowerCase() ? 1 : -1;
          });
      }
      sortTree();
      var baseSvg = d3.select("#tree-container").append("svg")
          .attr("width", width)
          .attr("height", height)
          .attr("class", "overlay")
  
       .attr("transform", "translate(" + 1000 + "," + 1000 + ")");
  
  
      function expand(d) {
  
          if (d._children) {
              d.children = d._children;
              d.children.forEach(expand);
              d._children = null;
          }
      }
      d3.json("index.php", function(error,flare) {
        if (error) throw error;
  
        root = flare;
        root.x0 = height / 2;
        root.y0 = 0;
  
  
  
      function collapse(d) {
  
          if (d.children) {
              d._children = d.children;
              d._children.forEach(collapse);
              d.children = null;
          }
  
      update(d);
      }
       flare.children.forEach(collapse);
        update(root);
  
      function toggleChildren(d) {
  
          if (d.children) {
              d._children = d.children;
              d.children = null;
          } else if (d._children) {
              d.children = d._children;
              d._children = null;
          }
          return d;
      }
  
  
      function click(d) {
  
      if (!d.children) 
           root.children.forEach(collapse);
      //d.children = d._children;
      //    d._children = null;
          if (d3.event.defaultPrevented) return; 
  
          d = toggleChildren(d);
  
          update(d);
  
  
      }
  
      function update(source) {
  
          var levelWidth = [1];
          var childCount = function (level, n) {
              if (n.children &amp;&amp; n.children.length &gt; 0) {
      if (levelWidth.length &lt;= level + 1) levelWidth.push(0);
  
                  levelWidth[level + 1] += n.children.length;
                  n.children.forEach(function (d) {
                      childCount(level + 1, d);
                  });
              }
          };
          childCount(0, root);
           var nodes = tree.nodes(root); 
          links = tree.links(nodes);
          node = svgGroup.selectAll("g.node")
              .data(nodes, function (d) {
              return d.id || (d.id = ++i);
          });
  
  
  
  
          var nodeEnter = node.enter().append("g")
           .attr("class", "node")
          .on('click', click);
  
            nodeEnter.append("circle")
              .attr("class", "smallcircle")
                  .style("stroke", function(d) { return d.color;});
  
  
          nodeEnter.append("text")
        .text(function (d) { return d.name;  })
           //   .style("font", "12px serif")
              .style("opacity", 1)
              .style("fill-opacity", 0)
              .on("mouseover", function (d) {
      var r = d3.select(this).node().getBoundingClientRect();
                 d3.select("div#tooltip")
                      .style("display", "inline")
                     .style("top", (r.top-25) + "px")
                     .style("top", 10 + "px")
                  .style("left", (d3.event.pageX) + "px")     
                      .style("top", (d3.event.pageY - 40) + "px") 
                    .style("left", r.left + 40+"px")
                    .style("left",  + "px")
                      .style("position", "absolute")
                     .text(d.t);
               })
          .on("mouseout", function(){
             d3.select("div#tooltip").style("display", "none")
         });
  
  
          node.select("circle.nodeCircle")
              .attr("r", 4.5)
     .style("fill", function (d) { return d._children ? "red" : "#fff"; });
  
  
                                  //     });
           var nodeUpdate = node.transition()
              .duration(duration)
      .attr("transform", function (d) { return
     "rotate(" + (d.x - 90) + ")translate
     (" + d.y + ")rotate(" + (-d.x + 90) + ")"; });
        nodeUpdate.select("circle").attr("r", 4.5)
  
     .style("fill", function (d) {return d._children ? 
   "lightsteelblue" : "#fff";});
  
          nodeUpdate.select("text")
              .style("fill-opacity", 4)
         .attr("fill",function(d){return (d.children?"red":"black");})
          .attr("stroke-width",function(d)
      {return (d.children?"4":"1");})
           .attr("stroke-width",function(d)
         {return (d.children?"4 px":"1 px");})
  
          .attr("dy", ".35em")
              .attr("text-anchor", function (d) {
              return d.x &lt; 180 ? "start" : "end";
          })
  
  
              .attr("transform", function (d) {
      return d.x &lt; 180 ? "translate(8)" : "rotate(360)translate(-8)";
          });
  
          var nodeExit = node.exit().transition()
              .duration(duration)
              .attr("transform", function (d) {
              return "translate(" + source.x + "," + source.y + ")"; })
              .remove();
  
          nodeExit.select("circle")
              .attr("r", 0);
  
          nodeExit.select("text")
              .style("fill-opacity", 0);
  
  
          var link = svgGroup.selectAll("path.link")
              .data(links, function (d) {
              return d.target.id;
          })
      link.style("stroke", function(d) {
            return d.color;
          })
  
          link.enter().insert("path", "g")
              .attr("class", "link")
               link.style("stroke", function(d) {
            return d.target.color;
          })
              .attr("d", function (d) {
              var o = {
                  x: source.x0,
                  y: source.y0
              };
              return diagonal({
                  source: o,
                  target: o
              });
          });
  
  
          link.transition()
              .duration(duration)
              .attr("d", diagonal);
  
  
          link.exit().transition()
              .duration(duration)
              .attr("d", function (d) {
              var o = {
                  x: source.x,
                  y: source.y
              };
              return diagonal({
                  source: o,
                  target: o
              });
          })
              .remove();
  
  
          nodes.forEach(function (d) {
              d.x0 = d.x;
              d.y0 = d.y;
          });
      }
      });
      var svgGroup = baseSvg.append("g")
    .attr("transform", "translate(" + 550 + "," + 300 + ")");
  
  
      d3.selectAll("text").style("fill", function (d) 
     { return d3.select(this).classed(d.cond, true); });
       &lt;/script&gt;
      &lt;/body&gt;
  
      &lt;/html&gt;
  </code></pre>
  
  <p>Any idea about this problem???</p>