Angular JS ajax和php数据解析错误 [英] Angular JS ajax and php data parsing errors

问题描述

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

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元素，它们是根据ajax调用的响应填充的，尽可能多我在数据库中创建了很多元素的记录，但是在每个元素中都有一个图像位置，我希望将第一个图像放在子数组中的每个元素上。喜欢在第一个元素上我想把图像从子数组1第0个元素文件/文件/ img1.jpg放到第二个元素上我想把图像放在子数组2第0个元素文件/ file1 / img1.jpg等等......

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.

这是我解析数组的方法。

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

    });

这是我在控制台上获得的结果：

但当我把它放在html中

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

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

推荐答案

使用以下代码管理迭代数组

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>

输出：

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

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

];

希望这会有所帮助。

这篇关于Angular JS ajax和php数据解析错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！