Angular JS ajax和php数据解析错误

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.

基本上我遇到了一个问题,我从HTML输入中获取了多个文件。单击提交按钮时,会生成这些文件路径的动态数组,然后我JSON编码该动态数组,并将其插入数据库表中。直到数据库插入它没关系,但问题发生在我检索那个数组时,使用angular js http调用,该数组被视为一个字符串,然后我把它变成JSON.parse将它转换成数组,所以$ scope。 im基本上是包含解析数组的数组。

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

现在,我正在动态制作html元素,它们是关于来自ajax调用的响应填充的,因为我在数据库中创建了很多元素,但是在每个元素中都有一个图像位置,我想要的地方将第一个图像放在子数组中的每个元素上。喜欢在第一个元素上我想把图像从子数组1第0个元素文件/文件/ img1.jpg放到第二个元素上我想把图像放在子数组2第0个元素文件/ file1 / img1.jpg等等......

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

这些是动态制作的元素,透明的是图像部分。

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:

这是我在控制台上得到的结果:

But when I put it in the html

但是当我把它放在HTML中时

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

Still I get the same path on each element, not as the result shown on console

我仍然在每个元素上获得相同的路径,而不是在控制台上显示的结果

1 个解决方案

#1

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 :

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

有了这个,你应该能够显示你的所有图像。 (将ng-repeat整合到您想要的任何元素中)。

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.

希望这可以帮助。