Can't import json to a variable in Angular

Question

I am working with angular in a simple project and I reached the state of development where I can start to split the content into separate files of the coding.

So, I have a variable with an array of objects, called oink, that if defined in the same js file where I have the main module, controller and so on, it works properly, but if I try to import it from an external json, it doesn't work.

I'm using the http:// protocol.

The code is as follow:

var oink;
$.getJSON("exemplo.json", function(json) {
  oink = json;
});

and in the json file I have

[
 {
    "brand": "Mooo",
    "model": "Moolicious"
  },
 {
  "brand": "Mooo2",
  "model": "Moolicious2"

  },
  {
  "brand": "Mooo3",
  "model": "Moolicious3"
  }
]

Added the app dumbed-down version of the app:

(function() {
var app = angular.module('farm', []);

app.controller('animalController', function(){
this.oinky = oink;

 });

app.controller('TabController', function(){
this.tab = 1;

this.setTab = function(newValue){
  this.tab = newValue;
};

this.isSet = function(tabmodel){
  return this.tab === tabmodel;
};

this.tier = 1;

this.setTier = function(newValue){
  this.tier = newValue;
};

this.tierSet = function(tiermodel){
  return this.tier === tiermodel;
};

this.show = -1;

this.defineBox= function(janein){

  if(this.show>-1 && this.show==janein) {
    this.show=-1;
  } else {
    this.show=janein;
  }
};

this.currentBox = function(janein) {
  return this.show === janein;
};

this.slide = 1;

this.defineSlide= function(number){
    this.slide = number;
};

this.currentSlide= function(number) {
  return this.slide === number;
};

});



var oink;
$.getJSON("exemplo.json", function(json) {
 oink = json;
});




})();

Thanks for the help.

Where's the angular code? We have no idea how or where you use `oink` — charlietfl, Aug 22 '15 at 16:17
@charlietfl If I assign the array right after declaring the variable (on the same file), all works. Is that what you are trying to understand or are there other ways in angular where this problem might come from? — Pedro Marta, Aug 22 '15 at 16:21
Somehow `oink` has to be assigned to angular scope to use it but you have not shown any usage at all. There just isn't enough code shown for anyone to assess what problem might be — charlietfl, Aug 22 '15 at 16:23

score 3 · Accepted Answer · answered Aug 22 '15 at 16:44

3

oink will be undefined at the time your controller tries to assign it to this.oinky. No reference will be created so when the ajax updates oink the controller variable knows nothing about it.

I don't know why the getJSON is outside of the angular code. Putting it inside would help

Try:

app.controller('animalController', function($http){
      var self = this;
      $http.get("exemplo.json").then(function(response){
         self.oinky = response.data
      });

});

answered Aug 22 '15 at 16:44

charlietfl

170,828
13
121
150

Using that to import the file, I get ReferenceError: $http is not defined – Pedro Marta Aug 22 '15 at 17:37
did you inject `$http` in controller as shown in answer? – charlietfl Aug 22 '15 at 17:38
Yes, sorry, I posted this question before googling. Now I don't have that error, but still, I can't import the data. I have my index.html on (http://11.111.111.11/something/index.html) and the json on (http://11.111.111.11/something/example.json). Is the path file specified in a correct manner? – Pedro Marta Aug 22 '15 at 17:47
Inspect the actual request in dev tools network tab for clues.Path is correct as shown – charlietfl Aug 22 '15 at 17:48
Problem solved now. At the last edit I reseted the json and forgot to escape some slashes and that was causing the problem. Thanks, you have been really helpful. – Pedro Marta Aug 22 '15 at 17:54

score -2 · Answer 2 · edited May 23 '17 at 11:43

-2

You may violate the same-origin policy. Read more here if you want to investigate further: "Cross origin requests are only supported for HTTP." error when loading a local file

edited May 23 '17 at 11:43

Community

1
1

answered Aug 22 '15 at 16:25

quanfoo

365
2
9

How can a relative url violate same origin policy? That makes no sense at all – charlietfl Aug 22 '15 at 16:34
they use two different protocols: file vs http – quanfoo Aug 22 '15 at 16:34
Where does it state that OP is using `file://` protocol? You are following the same assumption as the previous answer that was deleted. Within comments in that answer OP stated is serving from `http://` – charlietfl Aug 22 '15 at 16:35
1

I'll update the original post so I can help those who are trying to help me. A lot of people really is making that assumption. – Pedro Marta Aug 22 '15 at 16:37

Can't import json to a variable in Angular

2 Answers2