AngularJS zeigt keine JSON-Daten in der Listenansicht an.

Ich habe einige Stunden damit verbracht und kann die Daten auf der Seite nicht anzeigen. Ich bekomme keine Fehler & Ich kann die abgerufenen Daten in der Konsolen-Toolbox sehen. Hier ist mein Code-AngularJS zeigt keine JSON-Daten in der Listenansicht an.

In der HTML-Seite -

<div class="row"> 
    <div class="col-md-8"> 
     <ul> 
      <li ng-repeat="menuContent in profileMenu"> 
       <a href="profileMenu/{{menuContent.menuId}}"> 
        {{menuContent.menuItem}} 
       </a> 
      </li> 
     </ul> 
    </div> 
</div>

Innerhalb der .json Datei -

[{ 
    "menuId":"1", 
    "menuItem":"About" 
},{ 
    "menuId":"2", 
    "menuItem":"Timeline" 
},{ 
    "menuId":"3", 
    "menuItem":"Teams" 
},{ 
    "menuId":"4", 
    "menuItem":"Liked Profiles" 
}]

Innerhalb der JS-Datei -

$http({ 
    method: "get", 
    url: "data/custom-menu.json" 
}).then(function(profileMenuContent){ 
    $scope.profileMenu = profileMenuContent; 
    console.log($scope.profileMenu.data); 
});

Quelle

2016-07-30 Naga Hemanth

Können Sie eine Plunker tun? Haben Sie auch ng-app und ng-controller in Ihrem HTML? – Srijith

Innerhalb von JSON hatten Sie den Objektnamen als "menuId" und "menuItem". Aber in HTML verwenden Sie wie "id" und "name". Bitte ändern und überprüfen – Thangadurai

Ja Srijith! Ich habe ng-app & ng-controller in der html Datei hinzugefügt. Verbleibender Code funktioniert gut. Aber das Problem ist nur mit der Liste. –

Danke Kumpels für Ihre Vorschläge! Ich kann jetzt die JSON-Daten ansehen. Der Fehler ist in der .js-Datei. Da ich Versprechungen zum Aufrufen der Daten verwende, sollte ich '.data' verwenden, um Daten in die $ scope-Variable zu bekommen. Hier ist der endgültige Code -

In HTML-Datei:

<div class="row"> 
<div class="col-md-8"> 
    <ul> 
     <li ng-repeat="menuContent in profileMenu"> 
      <a href="profileMenu/{{menuContent.menuId}}"> 
       {{menuContent.menuItem}} 
      </a> 
     </li> 
    </ul> 
</div>

In Json:

[{ 
"menuId":"1", 
"menuItem":"About" 
},{ 
"menuId":"2", 
"menuItem":"Timeline" 
},{ 
"menuId":"3", 
"menuItem":"Teams" 
},{ 
"menuId":"4", 
"menuItem":"Liked Profiles" 
}]

In js File-

$http({ 
method: "get", 
url: "data/custom-menu.json" 
}).then(function(profileMenuContent){ 
$scope.profileMenu = profileMenuContent.data; 
console.log($scope.profileMenu.data); 
});

Quelle

2016-08-03 10:36:15

hier Code arbeiten -

'use strict'; 
 
var app = angular.module("demo", [], function($httpProvider) { 
 

 
}); 
 

 
app.controller("demoCtrl", function($scope) { 
 
    $scope.profileMenu = [{ 
 
    "menuId":"1", 
 
    "menuItem":"About" 
 
},{ 
 
    "menuId":"2", 
 
    "menuItem":"Timeline" 
 
},{ 
 
    "menuId":"3", 
 
    "menuItem":"Teams" 
 
},{ 
 
    "menuId":"4", 
 
    "menuItem":"Liked Profiles" 
 
}]; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body ng-app="demo"> 
 
    <div ng-controller="demoCtrl"> 
 
      <ul> 
 
       <li ng-repeat="menuContent in profileMenu"> 
 
        <a href="profileMenu/{{menuContent.menuId}}"> 
 
         {{menuContent.menuItem}} 
 
        </a> 
 
       </li> 
 
      </ul> 
 
    </div> 
 
</body>

Quelle

2016-07-30 07:59:00

Ja, ich habe den Code entsprechend Ihrer Antwort bearbeitet. Aber immer noch wird die Liste nicht angezeigt. –

@NagaHemanth Ich habe ein funktionierendes Beispiel aktualisiert. (Die Daten werden nicht von der HTTP-Anforderung abgerufen, aber Sie können die Variable auch in der http-Anforderung festlegen.) –

Im Moment haben Sie falsch key in HTML

Verwenden menuContent.menuId statt menuContent.id und menuContent.menuItem statt menuContent.name verwenden.

Das wird funktionieren!

Quelle

2016-07-30 08:11:00 varit05

Ich habe den Code gemäß Ihrer Anweisung bearbeitet. Das Problem besteht jedoch weiterhin und zeigt die Liste nicht an. –

Was bekommen Sie in 'profileMenuContent'? – varit05

Ich erhalte die gesamten Daten von JSON-Datei wie this- { "menuId": "1", "menuItem": "Über"}, { "menuId": "2", "menuItem": "Timeline "}, {" menuId ":" 3 ", " menuItem ":" Teams "}, {" menuId ":" 4 ", " menuItem ":" Liked Profiles "} –

Verwenden Sie den folgenden Code:

$http({ 
     method: "get", 
     url: "data/custom-menu.json" 
}).then(function(profileMenuContent){ 
     $scope.profileMenu = profileMenuContent.data; 
     console.log($scope.profileMenu); 
});

Sie sind in Ihrem Dienst mit Versprechen, so wird es Ihre Daten in profileMenuContent.data zurückgegeben.

Quelle

2016-08-03 04:16:12 rroxysam

Danke rroxysam! Es funktioniert. Nach dem Hinzufügen von ".data" funktioniert es gut. Was ist das Geheimnis dahinter? –

Der Grund ist, dass .then() das Objekt zurückgibt, das auch andere Informationen über die $ http-Anfrage enthält und die tatsächlichen Anforderungsdaten in der Dateneigenschaft enthalten sind. So müssen wir .data -Eigenschaft verwenden, um unsere tatsächlichen Daten zu erhalten. Sie können es auch überprüfen, indem Sie die Antwort von then/promise trösten, die ein Objekt zurückgibt. – rroxysam

@Naga Zeichen des aufkommenden Stackoverflow-Entwicklers (kopieren, einfügen & verdienen) – rroxysam

AngularJS zeigt keine JSON-Daten in der Listenansicht an.

Antwort

Verwandte Themen