如何在AngularJS中单独读取JSON的details嵌套属性？

嘿，我懂你遇到的困扰了——你想读取嵌套在details对象里的子属性，但用错了访问方式，导致代码无效。

为什么你的写法行不通？ #

你写的rdata['details.color']是在尝试访问rdata对象中直接名为"details.color"的键，但你的JSON结构里根本不存在这个键。实际上，details本身是一个嵌套对象，你得先访问这个对象，再去取它内部的子属性。

正确的嵌套属性读取方式 #

有两种常用且有效的方式可以访问JSON的嵌套属性：

1. 点符号访问（最直观，适合属性名是合法标识符的场景）：

   rdata.details.color
   rdata.details.location
   rdata.details.shape
   

2. 括号符号访问（适合属性名包含特殊字符，或者需要用变量动态访问的场景）：

   rdata['details']['color']
   rdata['details']['location']
   rdata['details']['shape']
   

修改后的完整代码 #

结合你的需求，调整后的success回调函数可以写成这样：

$http.get('/api/dataIuse')
 .success(function(rdata) {
  $scope.title = rdata.title; // 这里用点符号或rdata['title']都可以
  $scope.fullData = rdata;
  
  // 先初始化$scope.details为一个空对象，避免直接赋值子属性时报错
  $scope.details = {};
  // 正确读取嵌套属性并赋值
  $scope.details.color = rdata.details.color;
  $scope.details.location = rdata.details.location;
  $scope.details.shape = rdata.details.shape;
  
  console.log(rdata.title);
 })
 .error(function(rdata) {
  console.log('Error: ' + rdata);
 });

更简洁的写法（可选） #

如果不需要单独处理每个子属性，其实可以直接把整个details对象赋值过去，代码会更简洁：

$scope.details = rdata.details;

如果你的项目支持ES6语法，还可以用解构赋值一次性取出需要的属性，让代码更优雅：

$http.get('/api/dataIuse')
 .success(function(rdata) {
  $scope.title = rdata.title;
  $scope.fullData = rdata;
  
  // 解构details里的三个属性
  const { color, location, shape } = rdata.details;
  // 直接赋值给$scope.details
  $scope.details = { color, location, shape };
  
  console.log(rdata.title);
 })
 .error(function(rdata) {
  console.log('Error: ' + rdata);
 });

内容的提问来源于stack exchange，提问作者Mouthful OfTech