Uncaught SyntaxError: Неожиданный конец ввода JSON

Я пытаюсь получить дизайн d3 на основе ввода

Таблица MySQL

value id name parent A 1 A 0 A 2 A1 1 A 3 A2 1 B 4 B 0 B 5 B1 4

PHP-код для получения данных mysql в формате json для использования в d3

ОБНОВЛЕНО РЕЗУЛЬТАТЫ PHP И JSON НА ОСНОВЕ @ Z-BONE ANSWER

index.php

 <?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 => $row) { if($row['parent'] == $parent_id) { foreach($row as $k => $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(&$array, $searchItem){ if($searchItem['parent'] == 0){ array_push($array, $searchItem); return; } if(empty($array)){ return; } array_walk($array, function(&$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 ; } ?> с <?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 => $row) { if($row['parent'] == $parent_id) { foreach($row as $k => $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(&$array, $searchItem){ if($searchItem['parent'] == 0){ array_push($array, $searchItem); return; } if(empty($array)){ return; } array_walk($array, function(&$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 ; } ?>

Результат json от PHP ниже на основе моего ввода (B)

  [ { "id":"4", "name":"B", "parent":"0", "children":[ { "id":"5", "name":"B1", "parent":"4", "children":[ ] } ] } ]

ПЕРЕД ОБНОВЛЕНИЕМ РЕЗУЛЬТАТОВ PHP И JSON – здесь: http://pastebin.com/409DfSuQ

я использовал

  echo $json = substr($json, 1, -1);

здесь, чтобы удалить первый и последний скобки, которые дают ошибку «невозможно прочитать свойство foreach» в D3.

draw.html

 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title> draw</title> </head> <body> <form name="vinform"method="get"> <input type="text" name="input"> <input type="submit" value="Show" id="display"> </form> <div id="content"> </div> </body> </html>

если я запустил этот код с помощью

 <form name="vinform"method="get"action="index.php">

выход является допустимым json..and я также попытался скопировать этот json в отдельный файл и использовать в d3 …, который отлично работает … но проблема в том, что когда я использовал файл draw.html с

 <form name="vinform"method="get"action="index.html">

он показывает это, и эта ошибка приводит меня к этой строке в index.html

  d3.json("index.php", function(error,flare) { if (error) throw error; //shows Unexpected end of json input

my index.html – это

  <!DOCTYPE html> <html> <head> <title>Radial Cluster Demo</title> <script src="//d3js.org/d3.v3.min.js"></script> <style> .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; } </style> </head> <body> <div id="tooltip" style="display:none"></div> <div id="tree-container"class="full"></div> <script type="text/javascript"> 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 [dy, dx / 180 * Math.PI]; }); d3.select(self.frameElement).style("height", width); function sortTree() { tree.sort(function (a, b) { return b.name.toLowerCase() < 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 && n.children.length > 0) { if (levelWidth.length <= 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(dt); }) .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(" + (dx - 90) + ")translate (" + dy + ")rotate(" + (-dx + 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 dx < 180 ? "start" : "end"; }) .attr("transform", function (d) { return dx < 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 = dx; d.y0 = dy; }); } }); 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); }); </script> </body> </html>

Любая идея об этой проблеме ???

В вашем файле PHP:

Вы переопределяете тип содержимого json HTML … Удалите этот header('Content-Type: text/html; charset=utf-8'); строки header('Content-Type: text/html; charset=utf-8'); и оставьте строку перед ней, которая объявляет json …
Также почему вы удаляете корневые скобки этой строкой: echo $json = substr($json, 1, -1); ? Это сделает json недействительным. Просто повторите кодированный JSON массив, как есть.