如何从Google工作表导出的JSON ULR中获取标题和超链接数据 [英] How can I get Title and hyperlinks data from the JSON ULR from google sheet exported

问题描述

我能够从G-sheet获取数据并显示，但我的要求是也要显示工作表名称和超链接.工作表名称不应通过搜索进行过滤，它应始终仅显示应过滤的数据

来自JSON供稿UEL的超链接单元格数据信息类似于"gsx $ topic":{"$ t":全球受众覆盖率数字"}，"gsx $ response":{"$ t":"Verizon Media Global产品组合工具包(内部备忘单)}，" gsx $ _cre1l:{" $ t:"

然后，在您的代码中使用:

1. user.link [0] .href 显示链接.
2. user.title.$ t 显示标题.

类似这样的东西:

 (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(函数(数据(状态，头，配置)){$ scope.users = data.feed.entry;}).error(function(error(status，status，headers，config)){console.log(状态);console.log(发生错误");});$ scope.search ='';$ scope.searchFilter = function(item){if(item.gsx $ topic.$ t.indexOf($ scope.search)！= -1 || item.gsx $ response.$ t.indexOf($ scope.search)！= -1){返回true；}返回false；}}]);}());  

  .view，.view tbody td {边框:#b9b9b9实心1px；}.view thead th {边框样式:无；font-weight:粗体;文本对齐:居中；}.view tbody td {空白:预包装；}.看法.thead th.title {宽度:10％;}.view thead th.question {宽度:20％;}.view thead th.response {宽度: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">标题</th>< th class ="question">问题</th>< th class ="response">响应</th></tr></thead>< tbody>< tr ng-repeat =用户在用户| 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>  

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>

解决方案

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:

1. user.link[0].href to display the link.
2. 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>

这篇关于如何从Google工作表导出的JSON ULR中获取标题和超链接数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！