ng-repeat和一个包含3个数组的json

Question

ng-repeat和一个包含3个数组的json

3

我一直在努力解决这个问题，它似乎“很简单”，但始终无法掌握。

我从维基百科获取了一个返回JSON的$http.get请求，格式如下：

[[
    "Foobar",
    "Foobar2000",
    "Foobar (disambiguation)",
    "Foxbar",
    "Foodarama",
    "Fobar",
    "Foodar",
    "Foxbar railway station",
    "Fox Barrel",
    "Fox baronets"
],
[
    "The terms foobar (/ˈfuːbɑːr/), fubar, or foo, bar, baz and qux (alternatively, quux) and sometimes norf and many others are sometimes used as placeholder names (also referred to as metasyntactic variables) in computer programming or computer-related documentation.",
    "foobar2000 is a freeware audio player for Microsoft Windows developed by Piotr Pawlowski, a former freelance contractor for Nullsoft.",
    "",
    "Foxbar is an area of Paisley, bordered by the Gleniffer Braes and Paisley town centre. Consisting mostly of residential areas, Foxbar has rapidly grown over the past century to be one of the largest housing areas in the town.",
    "Foodarama, also known as Cox's Foodarama, is a supermarket chain in Texas, with its headquarters in Foodarama Store #1 in Brays Oaks, Houston.",
    "Fobar is a Malagasy football club based in Toliara, Madagascar.",
    "",
    "",
    "Fox Barrel is a brand of perry (marketed as \"pear cider\") made in Colfax, CA.",
    "The Fox Baronetcy, of Liverpool in the County Palatine of Lancaster, was a title in the Baronetage of the United Kingdom."
],
[
    "https://en.wikipedia.org/wiki/Foobar",
    "https://en.wikipedia.org/wiki/Foobar2000",
    "https://en.wikipedia.org/wiki/Foobar_(disambiguation)",
    "https://en.wikipedia.org/wiki/Foxbar",
    "https://en.wikipedia.org/wiki/Foodarama",
    "https://en.wikipedia.org/wiki/Fobar",
    "https://en.wikipedia.org/wiki/Foodar",
    "https://en.wikipedia.org/wiki/Foxbar_railway_station",
    "https://en.wikipedia.org/wiki/Fox_Barrel",
    "https://en.wikipedia.org/wiki/Fox_baronets"
]]

我遇到的问题是我的ng-repeat，目前是这样的：

<div ng-repeat="array in wikiSearch">
  <div ng-repeat="x in array">
    {{x}}
  </div>
</div>

我最终得到的是数组1的所有内容，然后是数组2，最后是数组3。最理想的情况是从数组1、2、3中依次获取值0，值1等。

- Cameron Johnston

请仔细检查您模型中的wikiSearch对象。它是数组还是包装在对象中的数组？ - Jim Cote

3个回答

2

试试这个：

<!DOCTYPE html>
<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
    </head>
    <body>
        <div id="app" ng-app="app" ng-controller="ctrl">
            <div ng-repeat="x in wikiSearch" ng-init="i = $index">
                <div ng-repeat="y in wikiSearch[i]">
                    {{ wikiSearch[i][$index] }}
                </div>
            </div>
        </div>
        <script src="./controller.js"></script>
    </body>
</html>

我将上述JSON复制并粘贴到控制器中的变量$wikiSearch中。

这是一个JSFiddle

- Jeff Diederiks

1

我认为这就是你想要实现的：

<div ng-repeat="array in wikiSearch[0]">
  <div ng-repeat="x in wikiSearch">
     {{wikiSearch[$index][$parent.$index]}}
  </div>
</div>

请检查并在Plunker上“运行”我的代码: http://plnkr.co/edit/GpNStIwu2roY4ho9qlhr?p=preview。

结果将是类似这样的内容：

Foobar 术语foobar（/ ˈfuːbɑːr /），fubar或foo，bar，baz和qux（或quux），有时甚至包括norf等名称，有时用作计算机编程或计算机相关文档中的占位符名称（也称为元语法变量）。

https://en.wikipedia.org/wiki/Foobar

Foobar2000

foobar2000是一款免费的音频播放器，适用于Microsoft Windows操作系统，由Nullsoft前自由承包商Piotr Pawlowski开发。

https://en.wikipedia.org/wiki/Foobar2000

- Bayu

这是一个非常优雅的解决方案。我使用上面的“zip”方法完成了我的项目，但这样我就不需要修改从GET获取的JSON，而是在Angular中完成所有操作。 - Cameron Johnston

1

Angular的ng-repeat具有循环数组/JSON的高级功能，包括嵌套数组。就像大多数脚本语言中的for()函数一样。我们只需要在文档页面https://docs.angularjs.org/api/ng/directive/ngRepeat中深入了解机制并玩转数组逻辑即可。然而，“zip”方法看起来也很不错。正如人们所说，通往一个目的地的道路有很多条 :)。 - Bayu

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- ippi · Accepted Answer

当你从$http.get接收到响应时，唯一明智的做法是创建一个新的重新格式化的数组。例如：

$scope.myArray = [];
$http.get("http://someurl.com/api/items").then(function(response){

    for( i=0; i<response.data[0].length; i++){
        $scope.myArray.push({
            title:       response.data[0][i], 
            description: response.data[1][i], 
            url:         response.data[2][i] 
        });
    }

});

通常被称为“压缩”数组（如果您想要更具体的搜索内容）：JavaScript 等效于 Python 的 zip 函数