Show first JSON data Object without selecting any link using Angular JS

Question

I'm trying to build a webpage to show JSON data based on the link we select and i had done it and its working fine. My issue is I need to show first JSON data object before selecting any link (initially).

Plunker Link - http://embed.plnkr.co/SPbvgPhfdeCqZG0yzzeZ/

My HTML:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Testing</title>
<link href="css/style.css" rel="stylesheet" />

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>
</head>
<body ng-app="richPortfolio">



<div class="container" ng-controller="adsCtrl">
    <nav>
        <ul class="accordion" onclick="myFunction(event)">
            <li ng-repeat="ad in ads">
                <a class="ad" href="" id="ad{{ ad.id }}" ng-click="select(ad)">{{ ad.title }}</a>
            </li>
        </ul>
    </nav>
    <div class="showCase_container">
        <div id="ad{{ selectedItem.id }}Case" class="adActive">
            <div class="description">
                <h3 class="ad_name">{{ selectedItem.title }}</h3>
                <p>{{selectedItem.content}}</p>
                <hr>
                <h3>Description</h3>
                <p>{{ selectedItem.desc }}</p>
                <hr>
                <h3>Dimension</h3>
                <p>{{ selectedItem.dim }}</p>
            </div>
        </div>
    </div>
</div>

<script src="rich.js"></script>
</body>
</html>

My JSON:

[
  {
    "id": "1",
    "title": "cube",
    "content": "cube 1 cube",
    "desc":"orem ipsum dolor sit amet, consectetur adipiscing elit",
    "dim":"300x250"
  },
  {
    "id": "2",
    "title": "Gallery",
    "content": "Gallery 2 Gallery",
    "desc":"orem ipsum dolor sit amet, consectetur adipiscing elit",
    "dim":"300x250, 300x600, 728x90, 970x250"
  }

]

My JS:

// Modules

var rich = angular.module('richPortfolio', ['ngRoute']);

rich.config(function($routeProvider){
    $routeProvider
        .when('/', {
            controller: 'adsCtrl',
            templateUrl: 'pages/home.html'
        })
        .otherwise({ redirectTo: '/' });
});

// controllers

rich.controller('adsCtrl', ['$scope', 'ads', function($scope, ads , element){
      ads.then(function(data){
        $scope.ads = data;
      });

      // devices
      $scope.tab = 1;

    $scope.setTab = function(newTab){
      $scope.tab = newTab;
    };

    $scope.isSet = function(tabNum){
      return $scope.tab === tabNum;
    };

    // nav redirection
    $scope.select = function(item) {
        $scope.selectedItem = item;  
    };

}]);

//services

rich.factory('ads', ['$http', function($http){

    // after v1.6 need to use .then function to get it worked
    return $http.get('ads.json')
            .then(function(response){
                //alert('success');
                return data = response.data;
            },function(error){
                //alert('error');
            });

}]);

function myFunction(e) {
  var elems = document.querySelector(".accordion .active");
  if(elems !==null){
   elems.classList.remove("active");
  }
 e.target.className = "active";
}

Plunker Link - http://embed.plnkr.co/SPbvgPhfdeCqZG0yzzeZ/

Now after selecting the respective link it shows the corresponding data. Need to show first JSON data object before selecting any link.

Any help would be appreciated.

michaelitoh · Accepted Answer · 2018-08-16 12:58:56Z

2

When you click and a element you call a function named select(ad) which set some info to the $scope.selectedItem property and you're displaying that variable info. So, in order to get the some data before click something you should set a default value the $scope.selectedItem property. Check this code:

rich.controller('adsCtrl', ['$scope', 'ads', function($scope, ads , element){
ads.then(function(data){
    $scope.ads = data;
    $scope.selectedItem = data[0]; //Set default element
});

edited Aug 16, 2018 at 12:58

answered Aug 16, 2018 at 12:53

michaelitoh

2,34016 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

karthick ravindranath Over a year ago

Thanks, you are a lifesaver. Works like a charm.

karthick ravindranath Over a year ago

Michael can you help me on adding an active class for the above-selected data. @Michael Alexander Montero

Collectives™ on Stack Overflow

Show first JSON data Object without selecting any link using Angular JS

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related