0

i have an angular js array binded to the $scope object. The array is an associative array. Simple array of arrays, and i dont know how to traverse through it in ng-repeat. This is my array, and I want to get the path of each file which on 0th index in sub arrays. I want to get

files/file/img1.bmp, files/file1/img1.jpg, files/file2/img1.jpg

$scope.im = [

 ["files/file/img1.bmp", "files/file/img2.jpg", "files/file/img3.jpg", "files/file/img4.jpg", "files/file/img5.jpg", "files/file/img6.jpg", "files/file/img7.jpg", "files/file/img8.jpg", "files/file/img9.jpg"],
 
 ["files/file1/img1.jpg", "files/file1/img2.jpg", "files/file1/img3.jpg", "files/file1/img4.jpg", "files/file1/img5.jpg", "files/file1/img6.jpg", "files/file1/img7.jpg", "files/file1/img8.jpg", "files/file1/img9.jpg"],
 
 ["files/file2/img1.jpg", "files/file2/img2.jpg", "files/file2/img3.jpg", "files/file2/img4.jpg", "files/file2/img5.jpg", "files/file2/img6.jpg", "files/file2/img7.jpg", "files/file2/img8.jpg", "files/file2/img9.jpg"]
            
];

Improve this question
1
  • 3
    this is not associative array. Its nested(2D) array Commented May 29, 2017 at 17:48

5 Answers 5

Reset to default
3

Not really an associative array cause you got no key for your values.

However, given your code if you want to iterate over your array just use :

<div ng-repeat="file in im"> 
    <!-- Now file is your list (e.g. ["files/file/img1.bmp", "files/file/img2.jpg"] -->
    <p>{{file[0]}}</p>
    <p>{{file[1]}}</p>
    <!-- and so on -->
</div>

And you will get the first element of each one of your items in the array.

Improve this answer
Sign up to request clarification or add additional context in comments.

8 Comments

Thanks for your answer ! is there any solution for how can I parse that sub array now , I am using JSON.parse($scope.im[i]); but thats showing me error, the "im" array is parsed, but the sub arrays are treated as a string in my case, i want to parse those sub arrays
You re welcome . You cannot parse your sub array with json cause they are not. What output do you want ?
Basically i am facing a problem, I have taken multiple files from HTML input. When the submit button is clicked , a dynamic array of those files paths has been made , and then I JSON encode that array, which is dynamically made, and insert it in a database table. Till the database insertion it is fine, but the problem occurs when i retrieve that array, using angular js ajax, that array is treated as a string, then I make it JSON.parse to convert it into array, so the $scope.im is basically that array which contains the parsed array, but the sub arrays are still treated as strings
the need to parse those sub arrays too is, I am making html elements dynamically, they are populated with respect to the response from the ajax call, as much records i have in the database that much elements are made, but here in each element there is an image place, where i want to put the very first image on each element from the sub arrays. like on first element i want to put image from sub array 1 0th element files/file/img1.jpg, on second element i want to put image from sub array 2 0th element files/file1/img1.jpg and so on...
And all the time, i faced failure; What i did now, when i am making array during execution time, i save the first image in a separate column, and then retrieve that column value, but still, when i JSON parse that value, on each elements same img has been shown, not the relevant ones, which i want.
|
2

Displaying image out of those nested array could be simple, here is an example:

<div ng-repeat="childArray in im">
  <div ng-repeat="photos in childArray">
      <img src="{{items}}" alt="something" />
  </div>
</div>
Improve this answer

Comments

1

Try this. As @Priyesh Kumar commented so you should use nested ng-repeat 

  <div ng-repeat="key in im"> 
     <div ng-repeat="value in key"> 
        {{value}}
      </div>
   </div>
Improve this answer

Comments

0

You can iterate over the array, im, normally as described in the docs and access the first element of your inner array

<ul>
   <li ng-repeat="list in im">
       <!--- list now represents the inner array --->
       {{ list[0] }} <!-- write the first path -->
   </li>
</ul>
Improve this answer

Comments

0

If you want it to work for each index of the sub arrays:

<div ng-repeat="(idx, value) in im[0]"> 
    <br>
    <div ng-repeat="file in im"> 
        <p>{{file[idx]}}</p>
    </div>
</div>

This would print :

files/file/img1.bmp files/file1/img1.jpg files/file2/img1.jpg

files/file/img2.jpg files/file1/img2.jpg files/file2/img2.jpg

...

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.