个人中心
gpt4 book ai didi

javascript - 为什么我的嵌套对象在循环时返回未定义？

转载 作者：行者123 更新时间：2023-12-02 23:49:42 25 4
gpt4 key购买 nike

https://plnkr.co/edit/aZi06HM9CkM9lScy9LS3?p=preview 

$scope.lettersandthings = [
   { letter: "a", things: [{name:"airplane"}, {name:"apple"}, {name:"alligator"}]}, 
   { letter: "b", things: [{name:"bath"}, {name:"bicycle"}, {name:"bear"}]},
   { letter: "c", things: [{name:"chair"}, {name:"carrot"}, {name:"cat"}]}
 ];
<小时/> 
$scope.allchildrenLength = 9;
$scope.allparentsLength = 3;
<小时/> 
ng-click="myFunction(0)" <!-- indexParent -->
ng-click="myFunction(1)"
ng-click="myFunction(2)"
<小时/> 
for(i=0; i < $scope.allchildrenLength; i++) {
    for(var j=0; j < $scope.allparentsLength; j++)  {
      $scope.lettersandthings[j].things[i].open = !$scope.lettersandthings[indexParent].open || $scope.lettersandthings[j].open ? false : $scope.lettersandthings[j].things[i].open;
    }
  }

myFunction() 的这一部分给了我错误(但是它仍然按应有的方式运行):

  • 类型错误:无法读取未定义的属性“open”
  • 类型错误:无法设置未定义的属性“open”

我读到您需要使用“for...in”循环来访问嵌套对象，但我不确定如何针对我的情况执行此操作。我在这里尝试过，但仍然遇到相同的错误(并且它停止运行):

for(var lttr in $scope.lettersandthings) {
    for(var thng in $scope.lettersandthings[lttr]) {
      $scope.lettersandthings[lttr].things[thng].open = !$scope.lettersandthings[indexParent].open || $scope.lettersandthings[lttr].open ? false : $scope.lettersandthings[lttr].things[thng].open;
    }
  }

尽管它正常工作，但我希望没有错误。谢谢。

完整代码:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>title</title>

    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    
    <style type="text/css">
      .section {
        margin: 20px;
        padding: 10px;
      }

     
    </style>

  </head>
  <body>
  
    <div ng-app="myApp" ng-controller="myCtrl">

      <script type="text/ng-template" id="group-template.html">
        <div class="panel-heading">
          <h4 class="panel-title" style="color:#fa39c3">
            <a href tabindex="0" class="accordion-toggle" ng-click="toggleOpen()" uib-accordion-transclude="heading">
              <span uib-accordion-header ng-class="{'text-muted': isDisabled}">
                {{heading}}
              </span>
            </a>
          </h4>
        </div>
        <div class="panel-collapse collapse" uib-collapse="!isOpen">
          <div class="panel-body" style="text-align: right" ng-transclude></div>
        </div>
      </script>

      <div class="section">
        <button ng-click="myFunction(0)">Toggle a</button>
          <button ng-click="lettersandthings[0].things[0].open = !lettersandthings[0].things[0].open">Toggle airplane</button>
          <button ng-click="lettersandthings[0].things[1].open = !lettersandthings[0].things[1].open">Toggle apple</button>
          <button ng-click="lettersandthings[0].things[2].open = !lettersandthings[0].things[2].open">Toggle alligator</button>
      </div>

      <div class="section">
        <button ng-click="myFunction(1)">Toggle b</button>
          <button ng-click="lettersandthings[1].things[0].open = !lettersandthings[1].things[0].open">Toggle bath</button>
          <button ng-click="lettersandthings[1].things[1].open = !lettersandthings[1].things[1].open">Toggle bicycle</button>
          <button ng-click="lettersandthings[1].things[2].open = !lettersandthings[1].things[2].open">Toggle bear</button>
       </div>

      <div class="section">
        <button ng-click="myFunction(2)">Toggle c</button>
          <button ng-click="lettersandthings[2].things[0].open = !lettersandthings[2].things[0].open">Toggle chair</button>
          <button ng-click="lettersandthings[2].things[1].open = !lettersandthings[2].things[1].open">Toggle carrot</button>
          <button ng-click="lettersandthings[2].things[2].open = !lettersandthings[2].things[2].open">Toggle cat</button>
      </div>


    <div id="accordion-wrapper">

      <uib-accordion close-others="oneAtATime">
          <div uib-accordion-group  id="accordion" ng-repeat="l in lettersandthings" heading="{{l.letter}}" class="eachLetter" id="{{l.id}}" is-open="l.open">

            <!-- nested accordion -->
            <uib-accordion close-others="oneAtATime">
              <div uib-accordion-group id="inner-accordion" class="innercontent" ng-repeat="thing in l.things" heading="{{thing.name}}" is-open="thing.open">
                <p>{{thing.name}} content</p>
              </div>  
            </uib-accordion>

          </div>
      </uib-accordion>  

    </div>


<script type="text/javascript">

  var myApp = angular.module('myApp', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']);

  myApp.controller('myCtrl', function($scope) {

    $scope.oneAtATime = true;

    $scope.allchildrenLength = 9;
    $scope.allparentsLength = 3;

    $scope.myFunction = function(indexParent) {

    // First close the outer tab
    $scope.lettersandthings[indexParent].open = !$scope.lettersandthings[indexParent].open;

      // Close all inner tabs if the outer parent is closed or any other tab is opened
      for(i=0; i < $scope.allchildrenLength; i++) {
        for(var j=0; j < $scope.allparentsLength; j++)  {
          $scope.lettersandthings[j].things[i].open = !$scope.lettersandthings[indexParent].open || $scope.lettersandthings[j].open ? false : $scope.lettersandthings[j].things[i].open;
        }
      }
      
    }
  

    $scope.lettersandthings = [
       { letter: "a", things: [{name:"airplane"}, {name:"apple"}, {name:"alligator"}]}, 
       { letter: "b", things: [{name:"bath"}, {name:"bicycle"}, {name:"bear"}]},
       { letter: "c", things: [{name:"chair"}, {name:"carrot"}, {name:"cat"}]}
     ];    

  });

</script>



  </body>
</html>

最佳答案

例如，您正在访问 things[3]，但尽管总共有 9 个事物，但每个 things 数组只有 3 个元素长，因此第四个元素 (之后直到第 9 个)都是未定义

您应该切换内循环和外循环，并在迭代之前检查每个 things 数组的长度

for(j=0; j < $scope.allparentsLength; j++) { 
  for(i=0; i< $scope.lettersandthings[j]. things.length; i++) { 
    $scope.lettersandthings[j].things[i].open = !$scope.lettersandthings[indexParent].open || $scope.lettersandthings[j].open ? false : $scope.lettersandthings[j].things[i].open; 
  } 
}

关于javascript - 为什么我的嵌套对象在循环时返回未定义？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55694229/

25 4 0
文章推荐： javascript - 如何将 Date().getTime() 转换为 UTC
文章推荐： rest - 文档数据库 : Can't access documents in my collection
文章推荐： azure - 内部服务器错误 - Azure 应用服务自定义 Controller
文章推荐： azure - 如何在 Azure CDN 上设置重写规则以提供与路径模式不匹配的 index.html？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com