ng-repeat and a json with 3 arrays

Question

I have been struggling with this for awhile now, and it seems 'so simple' yet just out of my grasp.

I have a $http.get from wikipedia that returns a JSON like this:

[[
    "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"
]]

what im struggling with is my ng-repeat, which right now is:

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

What I end up with is a list of all of array 1, then array 2, then array 3 optimally what i want is value 0, from array 1,2,3. then value 1, from array1,2,3 etc...

Double check the wikiSearch object in your model. Is it really the array, or is it the array wrapped in an object? — Jim Cote, Mar 17 '16 at 01:14

score 2 · Answer 1 · edited May 23 '17 at 11:50

2

The only sensible thing to do is to create a new reformatted array upon receiving your response from $http.get. For example:

$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] 
        });
    }

});

Often it's referred to as "zipping" arrays (if you want something more tangable to search for): Javascript equivalent of Python's zip function

edited May 23 '17 at 11:50

Community

1
1

answered Mar 17 '16 at 01:26

ippi

9,857
2
39
50

1

shouldn't it be response.data[0].length? Otherwise, yes, this is how it should be done – mhodges Mar 17 '16 at 01:30
1

@mhodges: True. Edited. – ippi Mar 17 '16 at 01:31
Thanks so much i appreciate the link as well to a resource. helping me learn! I had thought of doing something like this, but not knowing all the tools, i kinda ended up in a loop searching for an angular specific method, when reall this is fairly simple. Thanks! – Cameron Johnston Mar 17 '16 at 04:37

Jeff Diederiks · Answer 2 · 2016-03-17T01:38:15.913

Try this:

<!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>

I copied and pasted the JSON above in the variable $wikiSearch in the controller.

Here is a JSFiddle

score 1 · Accepted Answer · answered Mar 17 '16 at 05:56

I think this is what you are trying to achieved:

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

Please check and 'Run' my code at Plunker : http://plnkr.co/edit/GpNStIwu2roY4ho9qlhr?p=preview .

The result will be something like :

Foobar

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.

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

Foobar2000

foobar2000 is a freeware audio player for Microsoft Windows developed by Piotr Pawlowski, a former freelance contractor for Nullsoft.

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

That is a very elegant solution. I completed my project using the 'zip' method above. but this way i wouldnt need to modify the JSON from the GET and instead its all done in angular. — Cameron Johnston, Mar 17 '16 at 16:16
Angular ng-repeat has advance feature of looping array/JSON including nested array. Just like `for()` function in most scripting language. We just need to dig more about the mechanism at the documentation page : https://docs.angularjs.org/api/ng/directive/ngRepeat and get play around with the array logic. However the 'zip' method also look great. As people said, there is many road to reach one destination :). — Bayu, Mar 18 '16 at 02:42

ng-repeat and a json with 3 arrays

3 Answers3