0

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 http calls, 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.

Now,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...

these are the elements made dynamically, the transparent one the image section. enter image description here

This is how I parse the array.

$http({
    	method:"POST",
    	url:"files.php",
    	data:$.param({
            tot_data:true
    	}),
    	headers:headers
    }).then(function(res){
    	$scope.d = res.data;
        $scope.im=[];

       for(var i=0; i<$scope.d.length; i++){
	      $scope.im = JSON.parse($scope.d[i].imgs);
          console.log($scope.im[i]);
       }

    });

This is the result I get on console: And all the time, I faced failure

But when I put it in the html

<p>{{im[0]}}</p>

Still I get the same path on each element, not as the result shown on console enter image description here

2
  • What is the ouput if you print {{im}} Commented May 30, 2017 at 8:00
  • ["files/file3/img1.jpg","files/file3/img2.jpg","files/file3/img3.jpg","files/file3/img4.jpg"] this array on each elements Commented May 30, 2017 at 8:07

1 Answer 1

0

Managed to iterate over your array with the following code

JS

    $scope.test = ["files/file3/img1.jpg","files/file3/img2.jpg","files/file3/‌​img3.jpg","files/fil‌​e3/img4.jpg"];

HTML

<ul>
  <li ng-repeat="t in test">
     <div>
          <b>{{t}}</b>
     </div>
  </li>
</ul>

Output :

output

With this you should be able to display all your images. (integrate the ng-repeat in whatever element you want).

Basically if your take the code from your following question you could have something like

HTML

<div ng-repeat="files in im"> 
    <<ul>
      <li ng-repeat="f in files">
         <div>
               <img ng-src="{{f}}" alt="Your wonderful image" />
         </div>
      </li>
    </ul>

</div>

JS

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

];

Hope this helps.

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

2 Comments

The code you wrote is correct, but if you re read my question, the sub arrays need to be JSON parsed, because the sub arrays are treated as strings, and i can't JSON parse them , if you have any solution to parse those sub arrays then it will be helpful
var myJsonString = JSON.stringify(yourArray); Should do the work

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.