CODEWITHSUNDEEP
javascriptangularjsjsonnode.js
Ritik Saxena
Ritik Saxena

Reputation: 724

Resource interpreted as Document but transferred with MIME type application/json

I'm writing a code based on node and angular. The code takes the url as an input, checks if the url exists in the database, and if it doesn't, creates it. The request is made from the angular code. The angular is able to open the homepage when localhost is run without a trailing url, but when the url is given, the request doesn't reach angular controller, and the browser responds with the error Resource interpreted as Document but transferred with MIME type application/json.
I've already checked out the existing solutions on S.O. but none worked. Please help.

binder.js(angular)

    'use strict';
    var app = angular.module('clip',['ngRoute','ngResource'])
    app.config(function($routeProvider,$locationProvider){
       $routeProvider.
       when('/',{
         templateUrl:"main.html",
       }).
       when('/:url',{
         templateUrl:'url.html',
         controller: "url"
       })
       $locationProvider.html5Mode({enabled:true})
    });

     app.controller("url",function($scope,$http,$routeParams){
       $scope.load = function(){
          var urls = $routeParams.url;
          console.log("inside angular code");
          $http.get('/:url').success(function(result){
            if(result.exists) {
            $scope.content = result.content;
            $scope.exists=false;
            }
            else {
              $scope.exists = true;
              $scope.content="";
            }
          })
        }
      })

index.js

    var express = require('express');
    var db = require('./models.js');
    var bodyParser = require('body-parser');
    var app = express();

    app.use(express.static(__dirname+"/public"))
    app.use(bodyParser.urlencoded({extended:true}))
    app.use(bodyParser.json())

    app.set('port',(process.env.PORT||5000));

    app.get('/',function(req,res){
      res.sendFile('index.html')
    })

    app.route('/:url')
    .get(function(req,res){
      res.setHeader('Content-Type','application/json');
      db.find({url:req.params.url},function(err,data){
        if(data.length == 0){
          res.json({
            exists:false
          })
        }
        else {
          // TO-DO: delete from database
          res.json({
            exists:true,
            data:data[0].content
          })
        }
      })
    })

    app.listen(app.get('port'),function(){
      console.log("Magic happens at port "+app.get('port'));
    });


index.html(homepage)

    <!DOCTYPE html>
    <html ng-app='clip'>
      <head>
        <base href="/" />
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>MyCLips</title>
        <script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-route.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-resource.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
        <script src="js/binder.js"></script>
      </head>
      <body>
        <div ng-view>
        </div>
      </body>
    </html>

url.html

    <div class="container-fluid" data-ng-init="load()">
      <form>
        <div class="form-group">
          <textarea class="form-control" required="required" rows="10" cols="10" placeholder="paste your data here" ng-model="content"></textarea>
          <button type="submit" class="btn btn-success" ng-click="submit()" ng-show="exists">Create</button>
        </div>
      </form>
    </div>

Upvotes: 0

Views: 5115

Answers (2)

Ritik Saxena
Ritik Saxena

Reputation: 724

I found a solution to the problem. I was making request to the same url from both angular and node. So the response was getting delivered from the node directly, without passing the content to angular, and since, the content expected to be rendered was a document, and the response was in json, I was getting this error. I changed the url for searching database('/find/:url'), and simply made above url('/:url') render index.html, so that angular could request the new url for data while node renders the html page, and it worked.

Upvotes: 1

Kenry Sanchez
Kenry Sanchez

Reputation: 1743

ok.. so your route provider does'nt working.. in your url controller you use a $http dependency, so.. the Resource interpreted as Document but transferred with MIME type application/json means that the object are you receiving is not a json..

<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-route.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-resource.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
        <script src="js/binder.js"></script>

i think you are not include the index.js..

Upvotes: 0

Related Questions