Question

我正在使用React开发一个漂亮的todo应用程序，并从一个工作示例开始，我正在设置示例数据状态，如下所示：

this.state = {
  Task: [{
      name: "Art",
      items: [{
          item: 'Work on glazing technique',
          isDone: false,
          dateCompleted: ""
        },
        {
          item: 'Prank call Dali and hang up',
          isDone: true,
          dateCompleted: "07/15/2018"
        },
        {
          item: 'Prepare new Masonite panels',
          isDone: true,
          dateCompleted: "07/15/2018"
        },
        {
          item: 'Purchase sable brush',
          isDone: true,
          dateCompleted: "07/15/2018"
        }
      ]
    },
    {
      name: "Music",
      items: [{
          item: 'Work on Symphony',
          isDone: false,
          dateCompleted: ""
        },
        {
          item: 'Finish Berklee class',
          isDone: true,
          dateCompleted: "07/12/2018"
        },
        {
          item: 'Practice guitar',
          isDone: true,
          dateCompleted: "07/10/2018"
        },
        {
          item: 'Build new studio',
          isDone: true,
          dateCompleted: "07/10/2108"
        }
      ]
    },
    {
      name: "Writing",
      items: [{
          item: 'Finish novel structure',
          isDone: false,
          dateCompleted: ""
        },
        {
          item: 'Work on middle part',
          isDone: true,
          dateCompleted: "07/08/2018"
        },
        {
          item: 'Puchase some index cards',
          isDone: true,
          dataCompleted: "07/08/2018"
        }
      ]
    }
  ],
  filter: [{
    keyword: '',
    Status: "SHOW_ALL"
  }],
  selectedProject: "0"
};

因此，我现在要设置axios并通过JSON读取数据，而不是显式设置它。当然，下一步将是设置express并将JSON写入数据库。

但是在将Task Object转换为JSON时，我做得不好。这是我到目前为止的内容：

{
  "name": "Art",
  "items": [{
      "item": "Work on glazing technique",
      "isDone": "false"
    },
    {
      "item": "Prank call Dali and hang up",
      "isDone": "true"
    },
    {
      "item": "Prepare new Masonite panels",
      "isDone": "true"
    },
    {
      "item": "Purchase sable brush",
      "isDone": "true"
    }
  ]
}, {
  "name": "Music",
  "items": [{
      "item": "Work on Symphony",
      "isDone": "false"
    },
    {
      "item": "Finish Berklee class",
      "isDone": "true"
    },
    {
      "item": "Practice guitar",
      "isDone": "true"
    },
    {
      "item": "Build new studio",
      "isDone": "true"
    }
  ]
}, {
  "name": "Writing",
  "items": [{
      "item": "Finish novel structure",
      "isDone": "false"
    },
    {
      "item": "Work on middle part",
      "isDone": "true"
    },
    {
      "item": "Puchase some index cards",
      "isDone": "true"
    },
    {
      "item": "Install Scrivener",
      "isDone": "true"
    }
  ]
}, {
  "filter": [{
    "keyword": "",
    "Status": "SHOW_ALL"
  }],
  "selectedCatelog": 0
}

在关闭}, {的第一个实例中，它在导入时抛出错误：

syntax error, encountered comma

奇怪的是，JSON验证程序说我的JSON有效。我没有正确构建JSON。

基本上我认为我这里有个收藏。包含键值对的多个项目的字典，第二个“项目”是一个项目数组。

我确信正确地构造此结构非常简单，但是有人可以给我提示吗？谢谢！

Answer 1

您发布的json无效（您可以here对其进行检查），似乎您要显示对象列表。

因此，您将需要用数组包装整个东西：

[
  {
    "name": "Art",
    "items": [
      {
        "item": "Work on glazing technique",
        "isDone": "false"
      },
      {
        "item": "Prank call Dali and hang up",
        "isDone": "true"
      },
      {
        "item": "Prepare new Masonite panels",
        "isDone": "true"
      },
      {
        "item": "Purchase sable brush",
        "isDone": "true"
      }
    ]
  },
  {
    "name": "Music",
    "items": [
      {
        "item": "Work on Symphony",
        "isDone": "false"
      },
      {
        "item": "Finish Berklee class",
        "isDone": "true"
      },
      {
        "item": "Practice guitar",
        "isDone": "true"
      },
      {
        "item": "Build new studio",
        "isDone": "true"
      }
    ]
  },
  {
    "name": "Writing",
    "items": [
      {
        "item": "Finish novel structure",
        "isDone": "false"
      },
      {
        "item": "Work on middle part",
        "isDone": "true"
      },
      {
        "item": "Puchase some index cards",
        "isDone": "true"
      },
      {
        "item": "Install Scrivener",
        "isDone": "true"
      }
    ]
  },
  {
    "filter": [
      {
        "keyword": "",
        "Status": "SHOW_ALL"
      }
    ],
    "selectedCatelog": 0
  }
]

Answer 2

这些都是单独的对象，您根本不会包装整个东西以使其成为单个json对象。这只是一堆用逗号分隔的对象。

//you never wrap the json with an opener
    {//start
        "name": "Art",
        "items": [{
                "item": "Work on glazing technique",
                "isDone": "false"
            },
            {
                "item": "Prank call Dali and hang up",
                "isDone": "true"
            },
            {
                "item": "Prepare new Masonite panels",
                "isDone": "true"   
            },
            {
                "item": "Purchase sable brush",
                "isDone": "true"
            }]
    } //end of object
    ,//then a comma
    { //start of an object
        "name": "Music",
        "items": [{
                "item": "Work on Symphony",
                "isDone": "false"
            },
            {
                "item": "Finish Berklee class",
                "isDone": "true"
            },
            {
                "item": "Practice guitar",
                "isDone": "true"   
            },
            {
                "item": "Build new studio",
                "isDone": "true"
            }]
    }//end
    ,//then comma
 {//etc....
        "name": "Writing",
        "items": [{
                "item": "Finish novel structure",
                "isDone": "false"
            },
            {
                "item": "Work on middle part",
                "isDone": "true"
            },
            {
                "item": "Puchase some index cards",
                "isDone": "true"   
            },
            {
                "item": "Install Scrivener",
                "isDone": "true"
            }]
    },{
    "filter":[
            { 
                "keyword": "", 
                "Status": "SHOW_ALL" 
            }],
                "selectedCatelog": 0
     }
//close json here

将React State Object转换为正确的JSON模式

2 个答案: