Javascript JSON:can'；t访问嵌套数据（仅通过索引）

由于某些原因，我无法使用JavaScript代码访问JSON。这些是我一直面临的问题：

1） 我只能使用索引（$scope.details[0]）访问“details”中的数据，但不能使用（$scope.details.details）。为什么?

2） 我无法使用访问配料数据

$scope.components[1]=rdata['0']为什么

3） 我如何获取成分、单个数量和名称

这是我的代码：

JSON:

JavaScript:

$http.get('/api/recipe')
  .success(function(data) {

    $scope.title = data['title'];
    $scope.details = data['details'];
    $scope.details[0] = data['difficulty'];
    $scope.details[1] = data['prep_time'];
    $scope.details[2] = data['cook_time'];
    $scope.ingredients = data['ingredients'];
    $scope.ingredients[0] = data['count'];
    //$scope.ingredients[1] = rdata['0'];
    $scope.ingredients[1].amount = data['amount'];
    /*$scope.ingredients[2] = rdata['1'];
    $scope.ingredients[3] = rdata['2'];*/
    $scope.method = data['method'];
    $scope.method[0] = data['step_count'];
    $scope.method[1] = data['steps'];
    $scope.recipeData = data;

    console.log(data['title']);
  })

  .error(function(data) {
    console.log('Error: ' + data);
  });

HTML:

详细信息
困难：{{details.difficity}

准备时间：{{details.prep_time}

烹饪时间：{{details.cook_time}



成分
成分总数：{{成分.计数}

1） {{成分[1]。数量}



方法
{{method}}

所需步骤总数：{{method.step_count}

步骤：{{method.Steps}}

有什么想法吗

---

谢谢

这是因为您正在覆盖相同的变量： 与

您可以使用成分的内容对其进行初始化 和

---

您在未定义的数组中转换变量，因为您必须执行

数据['components']['count']

才能访问嵌套字段

这是因为您正在覆盖相同的变量： 与

您可以使用成分的内容对其进行初始化 和

在一个未定义的数组中转换变量，因为要访问嵌套字段，必须执行

数据['components']['count']

我只能使用索引访问“详细信息”中的数据( $scope.details[0]），但不是（$scope.details.details）。为什么?

因为

details

是对象

$scope的键。details[0]

希望details是数组。对象键不能通过索引访问，而是通过

dot（.）

或

square[]

大括号访问

我无法使用$scope访问配料数据。配料[1]= rdata['0']这是为什么

原因同上。这只是同一对象的另一个键

我如何获取成分、单个数量和名称

var x={
“标题”：“甜菜根三文鱼、羊奶和酸橙沙拉”，
“详情”：{
“难度”：“容易”，
“准备时间”：“5分钟”，
“烹饪时间”：“10分钟”
},
“成分”：{
“计数”：“3”，
"0": {
“金额”：“500克”，
“名称”：“鲑鱼”
},
"1": {
“数量”：“200克”，
“名称”：“甜菜根”
},
"2": {
“金额”：“150g”，
“名称”：“feta”
}
},
“方法”：{
“步骤计数”：“2”，
“步骤”：{
“0”：“对这个和那个”，
“1”：“这件事做了，那件事做了”
}
}
};
var getIndigrents=x.components//将给出一个对象
//这里[]是一种访问对象键的方法，但这并不意味着是索引
console.log（getIndigrents[“0”].amount）
console.log（getIndigrents[“0”].name）

我只能使用索引访问“详细信息”中的数据( $scope.details[0]），但不是（$scope.details.details）。为什么?

因为

details

是对象

$scope的键。details[0]

希望details是数组。对象键不能通过索引访问，而是通过

dot（.）

或

square[]

大括号访问

我无法使用$scope访问配料数据。配料[1]= rdata['0']这是为什么

原因同上。这只是同一对象的另一个键

我如何获取成分、单个数量和名称

var x={
“标题”：“甜菜根三文鱼、羊奶和酸橙沙拉”，
“详情”：{
“难度”：“容易”，
“准备时间”：“5分钟”，
“烹饪时间”：“10分钟”
},
“成分”：{
“计数”：“3”，
"0": {
“金额”：“500克”，
“名称”：“鲑鱼”
},
"1": {
“数量”：“200克”，
“名称”：“甜菜根”
},
"2": {
“金额”：“150g”，
“名称”：“feta”
}
},
“方法”：{
“步骤计数”：“2”，
“步骤”：{
“0”：“对这个和那个”，
“1”：“这件事做了，那件事做了”
}
}
};
var getIndigrents=x.components//将给出一个对象
//这里[]是一种访问对象键的方法，但这并不意味着是索引
console.log（getIndigrents[“0”].amount）
console.log（getIndigrents[“0”].name）

为什么要对属性进行所有这些分流？为什么不仅仅是

$scope.recipe=data

和

难度：{{{recipe.details.details}}

？@slim这很有效！非常感谢。你为什么要把所有的财产都转来转去？为什么不仅仅是

$scope.recipe=data

和

难度：{{{recipe.details.details}}

？@slim这很有效！非常感谢。

$http.get('/api/recipe')
  .success(function(data) {

    $scope.title = data['title'];
    $scope.details = data['details'];
    $scope.details[0] = data['difficulty'];
    $scope.details[1] = data['prep_time'];
    $scope.details[2] = data['cook_time'];
    $scope.ingredients = data['ingredients'];
    $scope.ingredients[0] = data['count'];
    //$scope.ingredients[1] = rdata['0'];
    $scope.ingredients[1].amount = data['amount'];
    /*$scope.ingredients[2] = rdata['1'];
    $scope.ingredients[3] = rdata['2'];*/
    $scope.method = data['method'];
    $scope.method[0] = data['step_count'];
    $scope.method[1] = data['steps'];
    $scope.recipeData = data;

    console.log(data['title']);
  })

  .error(function(data) {
    console.log('Error: ' + data);
  });

<h4>Details</h4>
<p>Dificulty: {{details.difficulty}}</p>
<p>Preparation time: {{details.prep_time}}</p>
<p>Cooking time: {{details.cook_time}}</p>
</br>

<h4>Ingredients</h4>
<p>Number of total ingredients: {{ingredients.count}}</p>
<!--<p>{{ingredients.0}}</p>

<p>2) {{ingredients.count}}</p>
<p>3) {{ingredients.count}}</p>
-->
<p>1) {{ingredients[1].amount}}</p>
</br>

<h4>Method</h4>
<p>{{method}}</p>
<p>Total steps required: {{method.step_count}}</p>
<p>Steps: {{method.steps}}</p>

$scope.ingredients = data['ingredients'];

$scope.ingredients[0] = data['count'];
$scope.ingredients[1].amount = data['amount'];