Question

出于某种原因，我无法使用我的JavaScript代码访问JSON。这些是我一直存在的问题：

1）我只能访问＆＃39;详细信息中的数据。通过使用索引（$ scope.details [0]），但不是（$ scope.details.difficulty）。为什么呢？

2）我无法使用

访问成分数据

$ scope.ingredients [1] = rdata [＆＃39; 0＆＃39;]为什么会这样？

3）如何获取成分和个别数量和名称？

这是我的代码：

JSON：

        {"title": "Salmon with beetroot, feta & lime salsa",
                "details": {
                  "difficulty": "easy",
                  "prep_time": "5 mins",
                  "cook_time": "10 mins"
                },
                "ingredients": {
                  "count":"3",
                  "0":{
                    "amount":"500 g",
                    "name": "salmon"
                  },
                  "1":{
                    "amount":"200 g",
                    "name": "beetroot"
                  },
                  "2":{
                    "amount":"150g",
                    "name":"feta"
                  }
                },
                "method":{
                  "step_count":"2",
                  "steps":{
                    "0": "To this and that",
                    "1": "Once this and that is done do that this"
                  }
                }
              };

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：

<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>

有什么想法吗？

谢谢！

Answer 1

这是因为你要覆盖同一个变量：与

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

你用成分的含量初始化它和

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

您在未定义的数组中转换变量，因为您必须执行data['ingredients']['count']才能访问嵌套字段

Answer 2

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

因为details是对象$scope.details[0]的键，所以细节是一个数组。索引不能访问对象键，而是dot(.)或square []大括号

我无法使用$ scope.ingredients [1] =访问成分数据 rdata ['0']为什么会这样？

与上述相同的原因。成分只是同一个对象的另一个关键

如何获取成分和个别数量和名称？

var x = {
  "title": "Salmon with beetroot, feta & lime salsa",
  "details": {
    "difficulty": "easy",
    "prep_time": "5 mins",
    "cook_time": "10 mins"
  },
  "ingredients": {
    "count": "3",
    "0": {
      "amount": "500 g",
      "name": "salmon"
    },
    "1": {
      "amount": "200 g",
      "name": "beetroot"
    },
    "2": {
      "amount": "150g",
      "name": "feta"
    }
  },
  "method": {
    "step_count": "2",
    "steps": {
      "0": "To this and that",
      "1": "Once this and that is done do that this"
    }
  }
};
var getIndigrents = x.ingredients // will give an object
// Here [] is a way of acceesing object key but this does not mean to be index
console.log(getIndigrents["0"].amount)
console.log(getIndigrents["0"].name)

JSON：无法访问嵌套数据（仅通过索引）

2 个答案: