Display in HTML sessionStorage JSON datas angularjs

Question

I just want to know how to nicely display my sessionStorage JSON data in my html

My datas are well stored in my sessionStorage like that :

Bellow is my Controller

app.controller('optionController', ['$scope', function($scope) {
    var myObject = JSON.parse(sessionStorage.getItem("flight"));
    $scope.getItemSS = myObject;
    };
}])

Bellow is how I try to display them

<section ng-controller="optionController">
    <ul ng-repeat="data in getItemSS">
        <li>From <strong>{{ data.departure }}</strong></li>
        <li>To <strong>{{ data.destination }}</strong></li>
        <li>Departure at <strong>{{ data.time.departure }}h</strong></li>
        <li>Arrival at <strong>{{ data.time.destination }}h</strong></li>
        <li>For <strong>{{ data.firstName }} {{ data.lastName }}</strong></li>
        <li>Only for <strong>{{ data.price }}€</strong></li>
        <p>Congratulation, you confirmed your flight! An email has been sent to your email <strong>{{ data.email }}</strong></p>
    </ul>
</section>

I am not able to display my data. Any idea ?

Answer 1

Your code is implying that the session storage item by key flight is an array - it is not. It is an object whose top (and only) key is called flights that points to an array.

This is the code you want to use:

var myObject = JSON.parse(sessionStorage.getItem("flight"));
$scope.getItemSS = myObject.flights;

instead of

var myObject = JSON.parse(sessionStorage.getItem("flight"));
$scope.getItemSS = myObject;

Alternatively you could use the same JS and change your view to be:

<ul ng-repeat="data in getItemSS.flights">