Consume REST API in AngularJS Beispiel

-2

Ich habe eine kleine Anwendung, in der ich eine URL von Drittanbietern habe, die stark mit JSON-Daten geladen ist und diese JSON-Daten benutze, um mit AngularJS eine Seite zu erstellen. Kann mir jemand helfen, damit zu arbeiten? Da ich sehr neu AngularJS bin. Ich brauche eine einfache Arbeitsdemo.Consume REST API in AngularJS Beispiel

Der Komplex JSON ist wie folgt:

"_embedded":{ 
     "session":[ 
     { 
      "createdDate":"2017-03-10T14:51:44.000+0000", 
      "updatedDate":"2017-03-10T14:51:44.000+0000", 
      "deletedDate":null, 
      "title":"xxx xxx cccc", 
      "track":"cccc cccccc cccc", 
      "speaker":"Speaker: ddddddddd", 
      "sessionAbstract":"loremipsum loremipsum loremipsum loremipsum loremipsum loremipsumloremipsum loremipsum loremipsumloremipsum loremipsum loremipsumloremipsum loremipsum loremipsumloremipsum loremipsum loremipsumloremipsum loremipsum loremipsumloremipsum loremipsum loremipsumloremipsum loremipsum loremipsum", 
      "sessionDate":null, 
      "_links":{ 
       "self":{ 
        "href":"http://www.someurl.com/adcbf" 
       }, 
       "session":{ 
        "href":"http://www.someurl.com/adcbffdfdsf/57457" 
       } 
      } 
     }, 
     { 
      "createdDate":"2017-03-10T14:51:44.000+0000", 
      "updatedDate":"2017-03-10T14:51:44.000+0000", 
      "deletedDate":null, 
      "title":"xxx xxx cccc", 
      "track":"cccc cccccc cccc", 
      "speaker":"Speaker: ddddddddd", 
      "sessionAbstract":"loremipsum loremipsum loremipsum loremipsum loremipsum loremipsumloremipsum loremipsum loremipsumloremipsum loremipsum loremipsumloremipsum loremipsum loremipsumloremipsum loremipsum loremipsumloremipsum loremipsum loremipsumloremipsum loremipsum loremipsumloremipsum loremipsum loremipsum", 
      "sessionDate":null, 
      "_links":{ 
       "self":{ 
        "href":"http://www.someurl.com/adcbf" 
       }, 
       "session":{ 
        "href":"http://www.someurl.com/adcbffdfdsf/57457" 
       } 
      } 
     } 
     ] 
     }

Vom komplexen JSON-Objekt, ich nur "title" erhalten müssen, "Spur", "Lautsprecher"

ich diesen Code unten müde:

angular.module('myApp', []).controller('MyController', function ($scope, $http) { 
    $scope.findValue = function() { 

$scope.complexJSON = [{"_embedded":{ 
     "session":[ 
     { 
      "createdDate":"2017-03-10T14:51:44.000+0000", 
      "updatedDate":"2017-03-10T14:51:44.000+0000", 
      "deletedDate":null, 
      "title":"xxx xxx cccc", 
      "track":"cccc cccccc cccc", 
      "speaker":"Speaker: ddddddddd", 
      "sessionAbstract":"m", 
      "sessionDate":null, 
      "_links":{ 
       "self":{ 
        "href":"http://www.someurl.com/adcbf" 
       }, 
       "session":{ 
        "href":"http://www.someurl.com/adcbffdfdsf/57457" 
       } 
      } 
     }  ] 
     } 

<div ng-app="myApp"> 
<div class="row"> 
     <fieldset class="scheduler-border col-lg-6" ng-controller="MyController"> 
<input type="text" class="form-control" placeholder="Session Search" ng-model="getSession.title" /> 
<input type="text" class="form-control" placeholder="Tracks" ng-model="getSession.track" /> 

<button type="button" ng-disabled="!getSession" ng-click="findValue()">Search</button> 

<p data-ng-bind="getSumAssured"></p> 
      <ul> 
       <li ng-repeat="pa in complexJSON | filter:getSession"> 
        <p>Age: <b data-ng-bind="pa.title"></b> 

        </p> 
       </li> 
      </ul>

Quelle

2017-03-21 phphunger

http://jsfiddle.net/vitconte/tG46g/ –

Hallo Jatin, danke für die Antwort spezifischere Lösung bieten kann. Aber dein JSON ist nicht so viel komplex, da ich die komplexen Daten gerne konsumieren muss. Ich habe meinen Beitrag geändert. Bitte sehen Sie es sich an. – phphunger

Das Konzept bleibt für jede Datenmenge gleich. Probieren Sie es aus und lassen Sie mich wissen, wo Sie das Problem haben. Sie können Ihren Code, den Sie bisher ausprobiert haben, posten. –

Sind Sie auf der Suche nach so etwas?

<ul> 
    <li ng-repeat="pa in complexJSON._embedded.session | filter:getSession"> 
     <p>Title: <b data-ng-bind="pa.title"></b> </p> 
     <p>Track: <b data-ng-bind="pa.track"></b></p> 
     <p>Speaker: <b data-ng-bind="pa.speaker"></b></p> 
    </li> 
</ul>

Sie bitte Ihre Frage erarbeiten, damit wir

Quelle

2017-03-21 13:28:01

Ja ähnlich wie so etwas. Aber ich bin nicht in der Lage, die Daten aus dem REST-API-Dienst zu erhalten, es wirft mir eine Ausnahme als ** Fett ** XMLHttpRequest laden kann nicht http://52.43.36.180:8080/session?size=1000. Kein 'Access-Control-Allow-Origin'-Header ist auf der angeforderten Ressource vorhanden. Origin 'http: // localhost: 81' ist daher nicht erlaubt. ** fett ** – phphunger

Dann ist Ihr 1. Problem der Zugriff auf die API-Ressource. Das Abrufen und Anzeigen von Daten ist ein sekundäres Problem. Siehe http://stackoverflow.com/questions/21455045/angularjs-http-cors-and-http-authentication für den ersten Teil Ihres Problems –

Consume REST API in AngularJS Beispiel

Antwort

Verwandte Themen