How can I get Title and hyperlinks data from the JSON ULR from google sheet exported

问题

I'm able to get the data from G-sheet and display but my requirement is to display sheet name and hyperlinks also. The sheet name should not get filtered with search it should always display only data should be filtered

The hyperlink cell data information from JSON feed UEL is like "gsx$topic":{"$t":"Global Audience Reach Figures"},"gsx$response":{"$t":"Verizon Media Global Product Portfolio Toolkit (internal cheatsheet)"},"gsx$_cre1l":{"$t":"https://docs.google.com/spreadsheets/d/10tz7wQFG7OIMZgI59SnUF3ER

The title information is stored in JSON feed url as below. "title":{"type":"text","$t":"Data"}

you can find my sample code below

<div ng-app="sample" ng-controller="sampleController">        
    <div class="black">      
        <input type="text" name="search" ng-model="search"
               placeholder="search" ng-click="didSelectLanguage()"/>          
    </div>
    <br>
    <br>
    <br>
  <table  style="border: 1px solid black ;">
    <tbody>
        <tr>
            <td><center><b>Question</b></center></td>
            <td ><center><b>Response</b></center></td>
        </tr>
      <tr ng-repeat="user in users | filter:searchFilter">
        <td style="border: 1px solid black ; width:30%;white-space: pre-wrap;">{{user.gsx$topic.$t}}</td>
        <td style="border: 1px solid black ; width:70%;white-space: pre-wrap;">{{user.gsx$response.$t}}</td>
      </tr>
    </tbody>
  </table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script>
angular.module('sample', []).
 controller('sampleController', ['$scope', '$http', function ($scope, $http) {              
    var url = "https://spreadsheets.google.com/feeds/list/153Obe1TdWlIPyveZoNxEw53rdrghHsiWU9l-WgGwCrE/1/public/values?alt=json";
// var url2 = "https://spreadsheets.google.com/feeds/list/153Obe1TdWlIPyveZoNxEw53rdrghHsiWU9l-WgGwCrE/2/public/values?alt=json";
    $http.get(url)
    .success(function(data, status, headers, config) {     
         $scope.users = data.feed.entry;
         console.log($scope.users);
    })
    .error(function(error, status, headers, config) {
         console.log(status);
         console.log("Error occured");
    }); 
    $scope.search='';
    $scope.searchFilter=function(item){
        if(item.gsx$topic.$t.indexOf($scope.search) != -1 || item.gsx$response.$t.indexOf($scope.search) != -1){
        return true;
            }
      return false;
    }

}]);
</script>

回答1:

Your searchFilter() function is only searching in gsx$topic.$t and in gsx$response.$t attributes, so, now, you need to display the title and hiperlink (link) attributes in your view.

Then, in your code, use:

user.link[0].href to display the link.
user.title.$t to display the title.

Something like this:

(function() {
  angular.module('sample', []).
  controller('sampleController', ['$scope', '$http', function($scope, $http) {
    var url = "https://spreadsheets.google.com/feeds/list/153Obe1TdWlIPyveZoNxEw53rdrghHsiWU9l-WgGwCrE/od6/public/values?alt=json";

    $http.get(url)
      .success(function(data, status, headers, config) {
        $scope.users = data.feed.entry;
      })
      .error(function(error, status, headers, config) {
        console.log(status);
        console.log("Error occured");
      });
    $scope.search = '';
    $scope.searchFilter = function(item) {
      if (item.gsx$topic.$t.indexOf($scope.search) != -1 || item.gsx$response.$t.indexOf($scope.search) != -1) {
        return true;
      }
      return false;
    }
  }]);
}());

.view,
.view tbody td {
  border: #b9b9b9 solid 1px;
}

.view thead th {
  border-style: none;
  font-weight: bold;
  text-align: center;
}

.view tbody td {
  white-space: pre-wrap;
}

.view. thead th.title {
  width: 10%;
}

.view thead th.question {
  width: 20%;
}

.view thead th.response {
  width: 70%;
}

<div ng-app="sample" ng-controller="sampleController">
  <div class="black">
    <input type="text" name="search" ng-model="search" placeholder="search" ng-click="didSelectLanguage()" />
  </div>
  <br>
  <br>
  <br>
  <table class="view">
    <thead>
      <tr>
        <th class="title">Title</th>
        <th class="question">Question</th>
        <th class="response">Response</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="user in users | filter:searchFilter">
        <td><a href="{{user.link[0].href}}" title="{{user.link[0].href}}">{{user.title.$t}}</a></td>
        <td>{{user.gsx$topic.$t}}</td>
        <td>{{user.gsx$response.$t}}</td>
      </tr>
    </tbody>
  </table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

来源：https://stackoverflow.com/questions/60069498/how-can-i-get-title-and-hyperlinks-data-from-the-json-ulr-from-google-sheet-expo

标签

json

angularjs

filter