title: Ajax Image Display from array in Objects
body: <p>I want to show images in a view from data which is in array but everytime it shows nothing to me as error does not appear  in console it directly declare function to be invalid.</p>
  
  <pre><code>$.ajax({
        type:"POST",
        url:"{{route('sliders.detail')}}",
        data:{slug:slug, _token: '{{csrf_token()}}'},
        success:function(data){
          var result = data;
  
          console.log(data);
          var obj = JSON.parse(result);
         console.log(obj);
          var array1 =obj.heading1.split(",");
          var array2 =obj.heading2.split(",");
          var arrayLength1=array1.length;
          var arrayLength2=obj.slider_images.slider_pic;
          console.log(arrayLength2);
  
          var imagedata=obj.slider_images;
          console.log(imagedata);
          var imageLength=imagedata.length;
  
          if( obj!=''){
            $('#view_info').modal('show');
  
            $html = '&lt;table class="table table-bordered table-condensed"&gt;&lt;tr&gt;&lt;th&gt;Heading 1&lt;/th&gt;&lt;th&gt;Heading 2&lt;/th&gt;&lt;/tr&gt;';
                    for(i=0; i &lt; arrayLength1; i++){ $html += '&lt;tr&gt;&lt;td&gt;'+array1[i]+'&lt;/td&gt;&lt;td&gt;'+array2[i]+'&lt;/td&gt;&lt;/tr&gt;'; } 
  
            for(k=0;k&lt;imageLength;k++){$html += '&lt;tr&gt;&lt;td&gt;'+'&lt;img src="{{asset('public/sliderpic/'.'+imagedata[k].slider_pic+')}}"&gt;'+'&lt;/td&gt;&lt;/tr&gt;';}
  
                    $html +='&lt;/table&gt;';
  
                    $('.info_data').html($html); 
  
          }
  
          else{
              $('#view_info').modal('show');
          }
  
      }
    });
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/i4Vu6.png" alt="JSON response"></p>