2

I had to read a json file by javascript during an interview.

The json file is almost like this:

{ apple: {price: 1}, banana: {price: 2} }

I have got some solutions like:

  1. read it by the help of ajax method
  2. modify json file like "var json= { apple: {price: 1}, banana: {price: 2} }" and load it into HTML just like a javascript file, so I can read it as a global variable

However when I asked the Interviewer， he gave me the hints:

  1. load json file to html using script tag like this:

    script type="application/json" src="scripts/data.json"

  2. then read the data in your js file by eval(json)

I was confused: how could I access the data just by loading it as script tags without modifing?

Black John
  • 31
  • 1
  • 2

3 Answers3

3

You can't do it this way:

HTML/Javascript: how to access JSON data loaded in a script tag with src set

Could this be a trick question from the interviewer..?

Use ajax, that is the only proper way to do it in my opinion. Other solutions fall into the hack-category.

Also, as mentioned by Franco, don't use eval(), unless you have to support very old browsers and don't care about security. Use JSON.parse() instead. It's even supported by IE8. Calling eval evaluates/executes its argument - so this is an attack vector for someone trying to inject malicious code into your site.

Community
  • 1
  • 1
Henrik Nielsen
  • 410
  • 2
  • 6
  • Thank you for answering. I have read the similar questiones on stackoverflow and I failed to find anything similar with what the interviewer said, so I posted this question...... I may ask him later, possiblely he was wrong with that. – Black John Dec 05 '15 at 23:19
0

You may have a bad recollection of the details of the questions.

Obviously, the first part of the question involves Ajax (XmlHttpRequest).

The second part is probably related to JSONP, where you modify the server output so that it looks more like function(<json data here>), with the function name being provided by the client to the server (though that's really implementation-specific). JSONP used to be a common pattern a few years back (mostly as a backwards compatibility solution for browsers without XHR support, but also to bypass cross-domain limitations). Probably a lot less these days, as it has a few significant security issues. If you want to read more about it: https://en.wikipedia.org/wiki/JSONP

JSONP does not, however, involve the use of eval, but has the same kind of security issues: anything goes.

jcaron
  • 17,302
  • 6
  • 32
  • 46
  • JSONP also has the content type `application/javascript` not `application/json`. Using `application/json` will stop the browser executing it. – Quentin Dec 05 '15 at 23:24
  • @Quentin, that's probably a detail, I doubt any browsers actually care, they probably base their interpretation on the fact that it's data they get through a ` – jcaron Dec 05 '15 at 23:25
  • @jcaron — They always care when it is the `type` attribute specifying it, as in this case. They look at the attribute, recognise that it is not a scripting language they can execute, and then don't bother to make an HTTP request for it at all. – Quentin Dec 05 '15 at 23:27
  • @Quentin, not sure what you mean. You were talking about the `Content-Type` (HTTP header, I suppose), you're now talking about the `type` attribute (of the ` – jcaron Dec 05 '15 at 23:29
  • @jcaron — The type attribute tells the browser what type of content to expect from the server. The content-type HTTP header tells it what the content actually is. They are the same thing, but it was the `type` attribute you used in the answer. – Quentin Dec 05 '15 at 23:29
  • @Quentin, I referenced neither. Did I enter the twilight zone? – jcaron Dec 05 '15 at 23:33
  • Sorry. I meant the code in the question that you said was related to JSONP. – Quentin Dec 05 '15 at 23:34
-1

You will need to get the json file (this suppose you want to get it by a button click):

$(document).ready(function(){
    $("button").click(function(){
        $.getJSON("your-json.js", function(result){
            $.each(result, function(i, val){
                //you can do something with your returned data.
            });
        });
    });
});

NOTE: don't use eval(), this is a bad practice.

Franco
  • 2,309
  • 1
  • 11
  • 18
  • I believe the OP wanted to load a JSON file via a script tag. – Henrik Nielsen Dec 05 '15 at 23:06
  • Thanks for your answer. And I suppose $.getJSON is just one of ajax method? What confused me is not how to do it, but what the Interviewer means, how to do it just via a script tag without modifing json file itself? And I fully agree with that eval is a bad practice... – Black John Dec 05 '15 at 23:07
  • @Henrik He sad the interviewer gave him the hint, but i still think this is the best and secure way to get the data from the given json file. – Franco Dec 05 '15 at 23:09
  • @Franco - I agree 100%. But the answer to the question is that it isn't possible. Only ajax or modifying the JSON file (which basically converts it to a JavaScript file) will work. – Henrik Nielsen Dec 05 '15 at 23:18
  • If he want to use the script tag the only option is to iterate trough the json array. for( var key in json-array ) {}. This approach involves the use of some php in order to read the file: $string = file_get_contents(json-array.json'); – Franco Dec 05 '15 at 23:28