Wie JSON-Array erhalten Objekt aus

Question

Ich bin ziemlich neu in JSON und ich versuche, das Array zu extrahieren Namen „Schritte“ und die Zeichenfolge „Schritt“ in diesem JSON Anfrageergebnis in AngularJS erhalten:

Allerdings kann ich diese Informationen erhalten, indem Sie den folgenden Versuch (die nicht definiert oder Fehler geben):

payload.data.steps 
payload.data.steps[0].step 
payload.data[0].steps 

jede gui Tanz würde geschätzt werden, danke!

Gelöst Vielen Dank für Ihre durchdachte und gründliche Antworten. Ich machte ein paar Fehler einschließlich derjenigen mit asynchronen http.get-Ergebnissen.

Für die Zukunft, in meinem services.js habe ich die GET-Anfrage an meinen Controller auf diese Weise:

var recipes = payload.data[0].steps; 

und in meinem controller.js ich sicher, dass es haben, warten Sie auf den Rückruf kommen (anstatt Empfang ein Versprechen) und dann zum Umfang sparen:

RecipeDetails.getInstructions($scope.details.id).then(function(InstructionPayload){ 
     $scope.instructions = InstructionPayload; 

und in meinem HTML-Seite die Schritte einzeln anzuzeigen:

//Steps: 
<div ng-repeat="list in instructions track by $index"> 
<p>{{ list.step }}</p> 

Answer 1

Hier ist ein kurzer Blick darauf, hoffe es hilft. Ich kann immer aktualisieren, wenn nötig.

function exampleController($scope) { 
 
    $scope.example = [{ 
 
    name: "", 
 
    steps: [{ 
 
     equipment: [], 
 
     ingredients: [], 
 
     number: 1, 
 
     step: 'Blah' 
 
    }] 
 
    }, { 
 
    name: "", 
 
    steps: [{ 
 
     equipment: [], 
 
     ingredients: [], 
 
     number: 2, 
 
     step: 'Bibbidi' 
 
    }] 
 
    }, { 
 
    name: "", 
 
    steps: [{ 
 
     equipment: [], 
 
     ingredients: [], 
 
     number: 3, 
 
     step: 'Bobbidi' 
 
    }] 
 
    }, { 
 
    name: "", 
 
    steps: [{ 
 
     equipment: [], 
 
     ingredients: [], 
 
     number: 4, 
 
     step: 'Boo' 
 
    }] 
 
    }]; 
 

 
    function extractSteps() { 
 
    $scope.stepArray = []; 
 
    $scope.example.forEach(function(step) { 
 
     if (step.steps && Array.isArray(step.steps)) { 
 
     step.steps.forEach(function(value, index) { 
 
      if (value && value.step) { 
 
      $scope.stepArray.push({ 
 
       'step': value.step 
 
      }) 
 
      } 
 
     }); 
 
     } 
 
    }); 
 
    } 
 
    extractSteps(); 
 
} 
 

 
angular 
 
    .module('app', []) 
 
    .controller('exampleController', exampleController);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div class="container-fluid" ng-app="app"> 
 
    <div class="container" ng-controller="exampleController"> 
 
    <div class="row" ng-repeat="(key, value) in example" ng-bind="value.steps[0].step"> 
 
    </div> 
 
    <div class="row" ng-repeat="value in stepArray"> 
 
     <pre>{{value | json}}</pre> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

Wenn Sie unterstreichen oder lodash in Ihre Anwendung können Sie Kette ein paar Dinge zusammen, etwa so:

_.chain(obj.data) // wrap the data so we can chain transformations 
    .map('steps') // gather all the steps arrays from the main array 
    .flatten() // smash them into a single array 
    .map('step') // grab all the step properties from those 
    .value() // return the value -> ["Blah", "Bibbidi", "Bobbidi", "Boo"] from alphapilgrim's example data