1
小提琴：https://mikethedj4.github.io/kodeWeave/editor/#6aade2727e9d2a1a20eea1e948fe7dbc解析JSON字符串从
我有一个字符串解析JSON有点困难。在我的应用程序，我抓住它在一个onclick事件
var data = {
"files": JSON.parse($(selector).nextAll('textarea').val())
};
和数据存储到像这样一个textarea ...
JSON.stringify(data)
为了使这一过程进行调试容易我只是用一个简单的因为它在下面的代码中被替换。
在控制台，它出来的......
Uncaught TypeError: Cannot read property 'content' of undefined
我从var jsonSets = data.files["settings.json"].content;删除的内容，我能搬过去如此，但有...
Uncaught TypeError: Cannot read property 'siteTitle' of undefined
这我计划抓住.content。我不知道为什么我得到这个错误，甚至不知道如何克服它。
任何人都可以解释我做错了什么？
我怎样才能抓住我的settings.json。 siteTitle值的字符串？
如果有人能帮助它，将不胜感激。
var files = {
"files": {
"index.html": {
"content": "<div ng-app=\"App\" ng-controller=\"AppCtrl\" layout=\"row\" layout-fill ng-cloak>\n <md-sidenav class=\"md-sidenav-left md-whiteframe-z2\" role=\"sidenav\" md-component-id=\"left\" md-is-locked-open=\"$mdMedia('gt-md')\">\n <md-toolbar class=\"md-tall md-hue-2\" layout-align=\"end end\">\n <div class=\"md-toolbar-tools\" layout layout-padding>\n <md-icon>{{data.user.icon}}</md-icon>\n <div layout=\"column\" layout-padding>\n <span class=\"md-body-2\">{{data.user.name}}</span>\n <span class=\"md-caption\">{{data.user.email}}</span>\n </div>\n <span flex></span>\n <md-button class=\"md-icon-button\" aria-label=\"User Settings\" ng-click=\"toast('Logout')\">\n <md-icon>more_vert</md-icon>\n </md-button>\n </div>\n </md-toolbar>\n <md-content role=\"navigation\">\n <md-list ng-repeat=\"section in data.sidenav.sections\">\n <md-list-item ng-click=\"section.expand = !section.expand\">\n <p class=\"md-subheader md-primary\">{{section.name}}</p>\n <span flex></span>\n <md-icon class=\"md-primary md-icon-button\">{{section.expand ? 'arrow_drop_up' : 'arrow_drop_down'}}</md-icon>\n </md-list-item>\n <md-list-item ng-show=\"section.expand\" ng-repeat=\"action in section.actions\" ng-click=\"toast(action.link)\">\n <md-icon>{{action.icon}}</md-icon>\n <p class=\"md-body-2\">{{action.name}}</p>\n <span flex></span>\n <md-icon>chevron_right</md-icon>\n </md-list-item>\n </md-content>\n </md-sidenav>\n <section layout=\"column\" role=\"main\" flex>\n <md-toolbar role=\"toolbar\">\n <div class=\"md-toolbar-tools\">\n <md-button class=\"md-icon-button\" ng-click=\"toggleSidenav('left')\" hide-gt-md aria-label=\"Menu\">\n <md-icon>menu</md-icon>\n </md-button>\n <h4 class=\"md-title\">{{data.title}}</h4>\n <span flex></span>\n <md-button class=\"md-icon-button\" ng-repeat=\"button in data.toolbar.buttons\" aria-label={{button.name}} ng-click=\"toast(button.link)\">\n <md-icon>{{button.icon}}</md-icon>\n </md-button>\n <md-menu md-position-mode=\"target-right target\" ng-repeat=\"menu in data.toolbar.menus\">\n <md-button class=\"md-icon-button\" aria-label=\"{{menu.name}}\" ng-click=\"$mdOpenMenu($event)\">\n <md-icon>{{menu.icon}}</md-icon>\n </md-button>\n <md-menu-content width={{menu.width}}>\n <md-subheader>{{menu.name}}</md-subheader>\n <md-menu-item ng-repeat=\"action in menu.actions\">\n <md-button layout-fill md-ink-ripple ng-click=\"toast(action.message)\">\n <md-icon md-class=\"{{action.error ? 'md-warn' : 'md-primary'}}\" md-menu-align-target>{{action.completed ? 'done' : 'hourglass_empty'}}</md-icon>\n {{action.name}}\n </md-button>\n </md-menu-item>\n </md-menu-content>\n </md-menu>\n </div>\n </md-toolbar>\n <section id=\"content\" role=\"content\" layout=\"column\" layout-padding md-scroll-y>\n <md-content class=\"md-whiteframe-z2\" ng-cloak>\n <md-list ng-repeat=\"list in data.content.lists\">\n <div class=\"md-actions\" layout layout-align=\"end center\">\n <md-subheader class=\"md-no-sticky md-primary\">{{list.name}}</md-subheader>\n <span flex></span>\n <md-menu md-position-mode=\"target-right target\">\n <md-button class=\"md-icon-button\" aria-label=\"{{list.menu.name}}\" ng-click=\"$mdOpenMenu($event)\">\n <md-icon class=\"md-primary\">settings</md-icon>\n </md-button>\n <md-menu-content width={{list.menu.width}}>\n <md-subheader>{{list.menu.name}}</md-subheader>\n <md-menu-item ng-repeat=\"action in list.menu.actions\">\n <md-button layout-fill md-ink-ripple ng-click=\"toastList(action.message)\">\n <md-icon md-class=\"{{action.error ? 'md-warn' : 'md-primary'}}\" md-menu-align-target>{{action.completed ? 'done' : 'hourglass_empty'}}</md-icon>\n {{action.name}}\n </md-button>\n </md-menu-item>\n </md-menu-content>\n </md-menu>\n </div>\n <md-divider></md-divider>\n <md-list-item class=\"md-2-line\" ng-repeat=\"item in list.items\">\n <md-checkbox ng-click=\"toggle(item, selected)\"></md-checkbox>\n <md-content class=\"md-list-item-text\" layout=\"column\">\n <h3 class=\"md-body-2\">{{item.name}}</h3>\n <p class=\"md-caption\">{{item.description}}</p>\n </md-content>\n <span flex></span>\n <md-icon aria-label=\"Show Item\" ng-click=\"toast(item.link)\">chevron_right</md-icon>\n </md-list-item>\n </md-list>\n </md-content>\n </section>\n </section>\n</div>"
}
, "index.css": {
"content": "body {\n overflow: hidden;\n background-color: #EEEEEE;\n}\n\nmd-whiteframe {\n background: #fff;\n}\n\n#content {\n padding: 24px;\n}\n\n"
}
, "index.js": {
"content": "angular.module('App', [\n 'ngMaterial'\n]);\n\nangular.module('App').config(function($mdThemingProvider) {\n $mdThemingProvider.theme('default').primaryPalette('indigo');\n})\n\nangular.module('App').controller('AppCtrl', function($scope, $mdSidenav, $mdToast) {\n $scope.toggleSidenav = function(menu) {\n $mdSidenav(menu).toggle();\n }\n $scope.toast = function(message) {\n var toast = $mdToast.simple().content('You clicked ' + message).position('bottom right');\n $mdToast.show(toast);\n };\n $scope.toastList = function(message) {\n var toast = $mdToast.simple().content('You clicked ' + message + ' having selected ' + $scope.selected.length + ' item(s)').position('bottom right');\n $mdToast.show(toast);\n };\n $scope.selected = [];\n $scope.toggle = function(item, list) {\n var idx = list.indexOf(item);\n if (idx > -1) list.splice(idx, 1);\n else list.push(item);\n };\n $scope.data = {\n title: 'Dashboard',\n user: {\n name: 'Angular Ninja',\n email: '[email protected]',\n icon: 'face'\n },\n toolbar: {\n buttons: [{\n name: 'Button 1',\n icon: 'add',\n link: 'Button 1'\n }],\n menus: [{\n name: 'Menu 1',\n icon: 'message',\n width: '4',\n actions: [{\n name: 'Action 1',\n message: 'Action 1',\n completed: true,\n error: true\n }, {\n name: 'Action 2',\n message: 'Action 2',\n completed: false,\n error: false\n }, {\n name: 'Action 3',\n message: 'Action 3',\n completed: true,\n error: true\n }]\n }]\n },\n sidenav: {\n sections: [{\n name: 'Section 1',\n expand: true,\n actions: [{\n name: 'Action 1',\n icon: 'settings',\n link: 'Action 1'\n }, {\n name: 'Action 2',\n icon: 'settings',\n link: 'Action 2'\n }]\n }, {\n name: 'Section 2',\n expand: false,\n actions: [{\n name: 'Action 3',\n icon: 'settings',\n link: 'Action 3'\n }]\n }, {\n name: 'Section 3',\n expand: false,\n actions: [{\n name: 'Action 4',\n icon: 'settings',\n link: 'Action 4'\n }, {\n name: 'Action 5',\n icon: 'settings',\n link: 'Action 5'\n }, {\n name: 'Action 6',\n icon: 'settings',\n link: 'Action 6'\n }]\n }]\n },\n content: {\n lists: [{\n name: 'List 1',\n menu: {\n name: 'Menu 1',\n icon: 'settings',\n width: '4',\n actions: [{\n name: 'Action 1',\n message: 'Action 1',\n completed: true,\n error: true\n }]\n },\n items: [{\n name: 'Item 1',\n description: 'Description 1',\n link: 'Item 1'\n }, {\n name: 'Item 2',\n description: 'Description 2',\n link: 'Item 2'\n }, {\n name: 'Item 3',\n description: 'Description 3',\n link: 'Item 3'\n }]\n }]\n }\n }\n});"
}
, "libraries.json": {
"content": "{\"alertify\":false,\"angular\":false,\"angularmaterial\":false,\"animatecss\":false,\"backbone\":false,\"bootstrap\":false,\"chartjs\":false,\"codemirror\":false,\"createjs\":false,\"d3\":false,\"dojo\":false,\"enhance\":false,\"fabricjs\":false,\"foundation\":false,\"handlebars\":false,\"hintcss\":false,\"immutable\":false,\"jarallax\":false,\"jquery\":false,\"jqueryui\":false,\"jquerytools\":false,\"jqxsplitter\":false,\"jszip\":false,\"kinetic\":false,\"knockout\":false,\"lodash\":false,\"mdl\":false,\"modernizer\":false,\"moment\":false,\"momenttimezone\":false,\"mootools\":false,\"normalize\":false,\"paperjs\":false,\"polyui\":false,\"prefixfree\":false,\"processingjs\":false,\"prototypejs\":false,\"qooxdoo\":false,\"react\":false,\"raphael\":false,\"requirejs\":false,\"showdown\":false,\"scriptaculous\":false,\"smoothscroll\":false,\"snapsvg\":false,\"svgjs\":false,\"threejs\":false,\"uikit\":false,\"underscorejs\":false,\"vue\":false,\"webfontloader\":false,\"yui\":false,\"zepto\":false}"
}
, "settings.json": {
"content": "{\"siteTitle\":\"Angular Material\",\"WeaveVersion\":\"0.1\",\"editorFontSize\":\"14\",\"description\":\"Angular Material Test\",\"author\":\"Someone\"}"
}
}
}
var data = {
"files": files
};
var jsonSets = data.files["settings.json"].content;
console.log(jsonSets.siteTitle);