创建一个动态toc.json以与treesaver.js一起使用

时间:2014-05-06 10:41:34

标签: javascript php jquery html json

我已经使用一个简单的后端(基于Spagent - 一个平面文件博客脚本)工作了很长时间,以便与令人惊叹的javascript库treesaver.js一起使用。我的问题是我的json技能设置不足,并且不能让世界弄清楚如何将数组添加到我的.json ......

我的文件如下:

{
  "contents": [
{
  "url": "index.html",
  "hidden": true
},
{
  "url": "section1.html",
  "title": "Section One",
  "thumb": "openroad-thumb.jpg",
  "byline": "John Doe"
},
{
  "url": "one.html",
  "title": "Article One",
  "thumb": "river-thumb.jpg",
  "byline": "Jane Doe"
},
{
  "url": "two.html",
  "title": "Article Two",
  "thumb": "river-thumb.jpg",
  "byline": "Jane Doe"
},
{
  "url": "section2.html",
  "title": "Section Two",
  "thumb": "river-thumb.jpg",
  "byline": "Jane Doe"
},
{
  "url": "three.html",
  "title": "Article Three",
  "thumb": "river-thumb.jpg",
  "byline": "Jane Doe"
},
{
  "url": "four.html",
  "title": "Article Four",
  "thumb": "river-thumb.jpg",
  "byline": "Jane Doe"
},
{
  "url":"five.html",
  "title":"Article Five",
  "thumb":"unknown-thumb.jpeg",
  "byline":"John Doe"
}
  ]
}

当我使用这些脚本时: form.php的

<!doctype html>
<html class="no-js no-treesaver">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1,minimum-scale=1,maximum-scale=1">
    <title>Treesaver - Article One</title>
  </head>
<body>
<form name="postform" action="post.php" method="post" enctype="multipart/form-data">
<table class="postarea" id="postarea">
    <tbody>
<tr>    <td class="postblock">URL:</td><td><input type="text" name="url"></td></tr>
<tr>    <td class="postblock">Titel:</td><td><input type="text" name="title"></td></tr>
<tr>    <td class="postblock">Thumb:</td><td><textarea id="text" rows="5" cols="30" type="text" name="thumb"></textarea> </td> </tr>
<tr>    <td class="postblock">Skribent:</td><td><input type="text" name="byline"></td></tr>

<tr>    <td class="postblock"></td><td> <input type="submit" value="Submit Entry"> </td>    </tr>
</tbody>
</table>
</form>
</form>
</body>
</html>

post.php中

<?php
// check if a form was submitted
if( !empty( $_POST ) ){

// convert form data to json format
    $postArray = array(
      "url" => $_POST['url'],
      "title" => $_POST['title'],
      "thumb" => $_POST['thumb'],
      "byline" => $_POST['byline']
    );
    //you might need to process any other post fields you have..
$json = json_encode( $postArray);
// make sure there were no problems
//if( json_last_error() != JSON_ERROR_NONE ){
    //exit;  // do your error handling here instead of exiting
// }
$file = 'entries.json';
// write to file
//   note: _server_ path, NOT "web address (url)"!
file_put_contents( $file, $json, FILE_APPEND);  
}

我添加的数组是这样生成的:

{
  "url": "index.html",
  "hidden": true
},
{
  "url": "section1.html",
  "title": "Section One",
  "thumb": "openroad-thumb.jpg",
  "byline": "John Doe"
},
{
  "url": "one.html",
  "title": "Article One",
  "thumb": "river-thumb.jpg",
  "byline": "Jane Doe"
},
{
  "url": "two.html",
  "title": "Article Two",
  "thumb": "river-thumb.jpg",
  "byline": "Jane Doe"
},
{
  "url": "section2.html",
  "title": "Section Two",
  "thumb": "river-thumb.jpg",
  "byline": "Jane Doe"
},
{
  "url": "three.html",
  "title": "Article Three",
  "thumb": "river-thumb.jpg",
  "byline": "Jane Doe"
},
{
  "url": "four.html",
  "title": "Article Four",
  "thumb": "river-thumb.jpg",
  "byline": "Jane Doe"
},
{
  "url":"five.html",
  "headline":"Article Five",
  "thumb":"nagot.jpg",
  "byline":"Gustaf"
}{"url":"six.html","title":"Article Six","thumb":"jasas.jpg","byline":"John Doe"}

在我的数组和脚本损坏之后,没有生成逗号。我该如何解决这个问题?

3 个答案:

答案 0 :(得分:0)

您将新的JSON对象附加到已包含一个的文件中。您可以通过在您正在编写的数据前加上逗号来解决它,但我会说这是解决此问题的错误方法。你正试图直接用JSON格式编写,但你应该让PHP为你做这件事 - 它已经很好地完成了这一点,并且没有必要重新发明轮子。

因此我会读取文件的内容,根据需要将其转换为对象或数组(使用json_decode)。然后,您可以将所有内容附加到此结构并重新编码,然后将整个内容写入不带附加标记的文件。

如果此文件中的数据量很大,您可以采用另一种方式解决问题:对于您希望编写的每个新结构,将其放在单独的文件中,然后在需要时在博客脚本中读取它们

答案 1 :(得分:0)

变化 file_put_contents( $file, $json, FILE_APPEND);

file_put_contents( $file, ",".$json, FILE_APPEND);

您可以将上述语句放在if语句中,该语句检查文件是否为空,因为如果您是第一次插入,则不需要逗号。

答案 2 :(得分:0)

最好建议您阅读现有的json数据并将其转换回PHP条件,这是一个具有属性'contents'的类,它是一个数组。

然后将新数组推送到现有数组,然后再将其全部编码为json,并将其全部写回json文件。

// check if a form was submitted
if( !empty( $_POST ) ){

    $file = 'entries.json';

    $json = file_get_contents($file);

    // convert json back to a php stdClass
    $phpClass = json_decode($json);

    $postArray = array(
         "url" => $_POST['url'],
         "title" => $_POST['title'],
         "thumb" => $_POST['thumb'],
         "byline" => $_POST['byline']
    );

     // push the new $postArray onto the bottom of phpClass
     array_push($phpClass->contents, $postArray);

     // encode php class into json again
     $new_json = json_encode($phpClass);

     // write it out
     file_put_contents( $file, $new_json);
}