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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.