2017-04-04 88 views
-4

嘿,我有我的項目一個JSON文件,該JSON文件從服務器端過來,我需要讀取JSON文件在客戶端如何做閱讀角的js嵌套的JSON文件

{ 
"color": { 
    "white": "#FFFFFF", 
    "black": "#262626", 
    "neutral": { 
     "20": "#222222", 
     "90": "#EEEEEE" 
    }, 
    "blue": { 
     "50": "#0000ff", 
     "90": "#3333ff" 
    }, 
    "red": { 
     "50": "#ff0000", 
     "95": "#ff8080" 
    }, 
    "Green": { 
     "40": "#00cc00", 
     "80": "#99ff99" 
    }, 
    "Pink": { 
     "30": "#ff0080", 
     "80": "#ff99cc" 
    }, 
    "Yellow": { 
     "40": "#ffff00", 
     "70": "#ffff66" 
    }, 
    "border": { 
     "brand": "#1589ee", 
     "brand-dark": "#0070d2", 
     "customer": "#ff9a3c", 
     "destructive": "#c23934", 
     "destructive-hover": "#a61a14" 
    }, 
    "interactive-color": { 
     "default": "#0000ff", 
     "dark": "#3333ff" 
    }, 
    "background-color": { 
     "default": "#FFFFFF", 
     "light": "#EEEEEE", 
     "dark": "#222222", 
     "disabled": "#EEEEEE" 
    }, 
    "text-color": { 
     "default": "#222222", 
     "on-light": "#222222", 
     "on-dark": "#FFFFFF", 
     "light": "#222222", 
     "disabled": "#222222", 
     "link": { 
      "default": "#0000ff", 
      "on-dark": "#FFFFFF" 
     } 
    } 
}, 
"font": { 
    "family": { 
     "text": "Salesforce Sans", 
     "heading": "Arial" 
    }, 
    "weight": { 
     "light": "300", 
     "regular": "300", 
     "bold": "300" 
    }, 
    "size": { 
     "xx-small": ".625rem FONT_SIZE_1 10px", 
     "x-small": ".75rem FONT_SIZE_2 12px", 
     "small": ".8125rem FONT_SIZE_3 13px", 
     "medium": ".1rem FONT_SIZE_5 16px", 
     "large": "1.125rem FONT_SIZE_6 18px", 
     "x-large": "1.25rem FONT_SIZE_7 20px" 
    }, 
    "line-height": { 
     "heading": "1.25", 
     "text": "1.5", 
     "reset": "1", 
     "tab": "2.5rem 40px", 
     "button": "1.875rem 30px", 
     "button-small": "1.75rem 28px" 
    } 
}, 
"space": { 
    "default": "16px", 
    "xxs": "2px", 
    "xs": "4px", 
    "s": "8px", 
    "m": "16px", 
    "l": "32px", 
    "xl": "64px", 
    "inset": { 
     "default": "16px 16px 16px 16px", 
     "xxs": "2px 2px 2px 2px", 
     "xs": "4px 4px 4px 4px", 
     "s": "8px 8px 8px 8px", 
     "m": "16px 16px 16px 16px", 
     "l": "32px 32px 32px 32px", 
     "xl": "64px 64px 64px 64px" 
    } 
}, 
"shadow": { 
    "drag": "0 2px 4px 0 rgba(0, 0, 0, 0.40)", 
    "drop-down": "0 2px 3px 0 rgba(0, 0, 0, 0.16)", 
    "header": "0 2px 4px rgba(0, 0, 0, 0.07)", 
    "button-focus": "0 0 3px #0070D2", 
    "inline-edit": "0 2px 4px 4px rgba(0, 0, 0, 0.16)" 
}, 
"duration": { 
    "instantly": "0s", 
    "immediately": "0.05s", 
    "quickly": "0.1s", 
    "promptly": "0.2s", 
    "slowly": "0.4s" 
} 
} 

並顯示在一個格式像

顏色白色 顏色黑色 的中性色,20 的中性色-70 我使用的角度JS在客戶端,請幫我這個

回答

0

您可以使用$http服務從服務器獲取JSON文件。

$http.get('someFile.json').success(function(data) { 
    console.log(data.data) 
    //data.data contains the response config  
}); 
0

您可以訪問這樣的JSON文件,

app.controller('myCtrl', function ($scope,$http) { 
$http.get('data.json'). 
    then(function (response) { 
     $scope.myData = response.data; 
     console.log($scope.myData); 
    }); 
}); 

,並使用鍵值做了NG-重複在嵌套元素,

<div ng-repeat="(key, value) in myData"> 
    <div ng-repeat="(key1, value1) in value"> 
    {{key}} {{key1}} 
    </div> 
    </div> 

DEMO