title: Resource interpreted as Document but transferred with MIME type application/json,laravel
body: <p>I'm trying to retrive data from a database but I get the error “Resource interpreted as Document but transferred with MIME type application/json: "<a href="http://127.0.0.1:8000/" rel="nofollow noreferrer">http://127.0.0.1:8000/</a>"”.</p>
  
  <p>Page loads with JSON array.</p>
  
  <pre><code>[{"id":1,"pic":"C:\\Users\\extra\\Downloads","type":"img","events_id":1,"created_at":"2017-04-18 19:16:02","updated_at":"2017-04-18 19:16:02","event":null},{"id":2,"pic":"background-pics-12.jpg","type":"img","events_id":2,"created_at":"2017-04-18 19:16:02","updated_at":"2017-04-18 19:16:02","event":null}]
  </code></pre>
  
  <p>I'm unable to use data to insert it in any tags. This is the code of the view.</p>
  
  <pre><code> &lt;section class="no-padding" id="media"&gt;
          &lt;div class="container-fluid"&gt;
  
         &lt;ul id="hexGrid"&gt;
  &lt;!--@foreach($items as $item)
  
   &lt;li class="hex"&gt;
          &lt;div class="hexIn"&gt;
            &lt;a class="hexLink" href="#" id="{{$item-&gt;id}}"  role="button" data-toggle="modal" data-dismiss="modal"  data-target="#myModal"&gt;
  
              &lt;img src="{{$item-&gt;pic}}" alt="" /&gt;
              &lt;h1&gt;sdfghjk&lt;/h1&gt;
              &lt;p&gt;Some sample text about the article this hexagon leads to&lt;/p&gt;
  
            &lt;/a&gt;
          &lt;/div&gt;
        &lt;/li&gt;
  
  @endforeach
  --&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  &lt;/section&gt;
  
    &lt;!-- Trigger the modal with a button --&gt;
   &lt;!-- &lt;button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-dismiss="modal" data-target="#myModal"&gt;Open Modal&lt;/button&gt;--&gt;
  
    &lt;!-- Modal --&gt;
     &lt;div class="modal fade" hidden="true" id="myModal" role="dialog" tabindex="-1"&gt;
      &lt;div class="modal-dialog"&gt;
          &lt;div class="modal-content"&gt;
              &lt;div class="panel panel-filled"&gt;
                  &lt;div class="panel-body"&gt;
                         &lt;div class="modal-header"&gt;Events&lt;/div&gt;
                  &lt;div class="modal-body"&gt;
  
    &lt;div id="myCarousel" class="carousel slide" data-ride="carousel" &gt;
           &lt;!-- Indicators --&gt;
  
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;/div&gt;
  &lt;script&gt;
  var xmlhttp;
  
      xmlhttp = new XMLHttpRequest();
  
   // var xhttp1=new XMLHttpRequest();
  
       xmlhttp.onreadystatechange=function()
       {
          if(this.readyState==4 &amp;&amp; this.status==200)
          {
                    var arr=JSON.parse(this.responseText);
                    console.log(arr.result.length);
                    console.log(arr);
                    var count=arr.result.length;
                    if(count!=0)
                    {
                      for(var i=0;i&lt;count;i++)
                      {
                        if(arr.result[i].Type=='img')
                      {  var listelement=document.createElement("LI");
                        listelement.setAttribute('id', arr.result[i].ID);
                       listelement.className += "hex";
                        var div=document.createElement("div");
                        div.className += "hexIn";
                        var image=document.createElement("img");
  
                        var heading=document.createElement("h1");
  
                        var parag=document.createElement("p");
  
                        image.src=arr.result[i].image.replace("\\","");
  
                        heading.innerHTML=arr.result[i].Date; //content of  heading
                        parag.innerHTML=arr.result[i].Name;
                        var anchor=document.createElement("a");
                        anchor.className += "hexLink";
                        anchor.setAttribute('href',"#");
                        anchor.appendChild(image);
  
                        anchor.appendChild(heading);
                        anchor.appendChild(parag);
                        div.appendChild(anchor);
                        listelement.appendChild(div);
                        var ule=document.getElementById("hexGrid");
                        ule.appendChild(listelement);
                        anchor.onclick = function(){
  
    };
                      }
                      else {var listelement=document.createElement("LI");
                        listelement.setAttribute('id', arr.result[i].ID);
                       listelement.className += "hex";
                        var div=document.createElement("div");
                        div.className += "hexIn";
                        var image=document.createElement("iframe");
  
                        var heading=document.createElement("h1");
  
                        var parag=document.createElement("p");
                        var divv=document.createElement("div");
                        image.style["width"] = "auto";
                        image.style["height"] = "auto";
                        image.src=arr.result[i].image.replace("\\","");
  
                        heading.innerHTML=arr.result[i].Date; //content of  heading
                        parag.innerHTML=arr.result[i].Name;
                        var anchor=document.createElement("a");
                        anchor.className += "hexLink";
                        anchor.setAttribute('href',"#");
                         divv.appendChild(image);
                        anchor.appendChild(divv);
  
                        anchor.appendChild(heading);
                        anchor.appendChild(parag);
                        div.appendChild(anchor);
                        listelement.appendChild(div);
                        var ule=document.getElementById("hexGrid");
                        ule.appendChild(listelement);}
                      }
                    }
                    else { var parag=document.createElement("p");parag.innerHTML="nmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmo";
                  var ule=document.getElementById("hexGrid");
                        ule.appendChild(parag);};
  
          }
     };
  
       xmlhttp.open("POST","/",true);
       xmlhttp.send();
  &lt;/script&gt;
  &lt;script&gt;
  $(document).ready(function(){
    $("#myModal").on("show.bs.modal", function(e) {
        e.preventDefault();
  
        //var id1 = $(e.relatedTarget).data('target-id');
       // var id2 = $(e.relatedTarget).data('target');
        var id3 = e.relatedTarget.id;
  
      //  console.log('Val1=' + id1 + '; Val2=' + id2 + '; Val3=' + id3);
  
        $.get('/' + id3, function( data ) {
            alert(data);
            $(".modal-body").html(data);
        });
  
    });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>And this is the controller's code.</p>
  
  <pre><code> public function getmedia()
      {
              $event=Events::all();
               $items = Media::with('event')-&gt;get();
               $e=$items-&gt;unique('events_id');
               $e-&gt;values()-&gt;all();
               return response()-&gt;json($e);
      }
  </code></pre>