代码之家 › 专栏 › 技术社区 › Rachel

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

reactjs json javascript

Rachel · 技术社区 · 6 年前

我正在使用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"
};

所以,我现在在这里,在那里我准备通过JSON读取数据并读取数据,而不是显式地设置它。当然,下一步将设置express,并将JSON读/写到数据库。

但在将任务对象转换为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。

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

我相信这是非常简单的结构正确,但有人能给我一个提示吗?谢谢!

2 回复 | 直到 6 年前

Sagiv b.g 6 年前

您发布的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
  }
]

Train 6 年前

这些都是单独的对象,您根本不会将整个对象包装成单个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