使用Javascript / JQUery解析JSON文件

Question

我有這個JSON文件：

{
"guest": {
    "permissions": {
        "webportal": [
            "access",
            "modify"
        ],
        {…}
        "test/dashboard": [
            "access"
        ]
    },
    "users": [
        "guest"
    ],
    "time_out": "3600000"
},
"administrator": {
    "permissions": {
        "webportal": [
            "monitoring",
            "access",
            "modify"
        ],
       {…}
        "test/settings": [
            "access",
            "modify"
        ]
    },
    "users": [
        "admin"
    ],
    "time_out": "3600000"
  }
}

我需要做的就是簡單地將FIRST項目放到選擇框中。 因此，例如：

“用戶”部分下的GUEST，ADMINISTRATOR和其他任何內容都可能是'n'個條目，需要將其輸入如下所示：

<select id='JSONFile'>
     <option value='administrator'>administrator</option>
     <option value='guest'>guest</option>
     <option value='useradmin'>useradmin</option>
</select>

JSON文件中的數據余額需要放入數組中，以便以后可以訪問並將其轉儲為CheckBoxes值。

例如：在來賓：權限： WebPortal - there's ACCESS and MODIFY 。 那是僅有的兩個權限。 因此，訪客可以訪問WebPortal； 他們必須具有訪問權限。 要編輯，請修改。 得到它？

因此，我是新手，只需要使其盡可能簡單即可。

哦，是的，我是否提到我們正在使用KNOCKOUT ，並且下拉列表必須是KO Observable Array？ 但是一次只有一件事。

第二部分稍后介紹。

再見！

Answer 1

了解淘汰賽映射插件后，我的淘汰賽生活變得更加輕松。

http://knockoutjs.com/documentation/plugins-mapping.html 。

這樣，您可以根據JSON數據自動創建模型。

viewModel = ko.mapping.fromJS(data);

一旦進入viewModel，您就可以迭代您的內心內容。 您可能想在您的json數據中添加一個根節點，以便更輕松地遍歷角色。

Answer 2

要獲取並顯示select元素中最高級別對象的鍵，請使用以下代碼。

var optionValues = [];

var data = JSON.parse(JSONdata);       //this parses your data securely into an object that you can easily use
for(option in selection) {             //goes through the highest level keys of the object
  if (data.hasOwnProperty(option)) {   //this ignores the default object properties (things you don't want)
    if(option === 'users')             //takes into account user titles
      JSONdata['users'].forEach(function(userTitle) { //iterates over all of the user data and appends usertitles to the array
        optionValues.push('user'+userTitle);
      });
    else {                           // for the default roles like admin
      optionValues.push(option);     //this puts all of the non-user keys into an array 
    }
  }
}

對於您上面發布的數據['guest','administrator','useradmin']這將輸出=> ['guest','administrator','useradmin'] 。 然后，您可以使用document.createElement和document.appendChild為所有這些選項創建選項，並將它們放置在文檔中的select元素下。