How can I get the JSON data from a file to show up on the HTML page

Question

I have a not so typical JSON here (https://github.com/conde-nast-international/cnid-tech-tests/blob/master/data/article.json) that I'm trying to display on a HTML page very simply inline, as normal looking text and a photos.

I'm embedding the JavaScript/jQuery in the HTML file but it doesn't seem to be working. Does anybody have some insight into what I'm doing wrong? Thank you in advance!

HTML (JavaScript):

<html>

<head>
  <meta charset="utf-8">
  <title>JSON Articles</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="article.json"></script>
</head>

<body>

  <div id="output" style="width:100px; text-align:center;">
  </div>

<script>
  $.ajax({
    url:"http://localhost:8888/json-article/article.json",
    method:"GET",
    success:function(data){
      for(var object in objectJson){
        $("#output").text("id="+object.id + "title"+object.title + "body"+object.body + "cover"+object.cover);
      }
    }
  });
 </script>
</body>

</html>

That file isn't JSON, it's an array. You could include it as you are, but you need to assign it to a variable, eg `var data = /* your huge array */` and then use the `data` variable where needed. Alternatively you could transform the data to JSON and make an AJAX request to retrieve it — Rory McCrossan, Aug 10 '17 at 13:16
I have spent two days but it seems maybe I'm not understanding the JSON format properly. This is why I asked the question, I was hoping for a more detailed answer. Any specific code would be extremely appreciated. Thank you for your time. — T.Doe, Aug 10 '17 at 13:18

score 1 · Answer 1 · answered Aug 10 '17 at 13:27

1

<script>
    $.ajax({
                url:"Your json url",
                method:"GET",
                success:function(data){
       $("#output").text(data);
}
});
 </script>

answered Aug 10 '17 at 13:27

Faisal Rehman

162
1
5

I'm using a local JSON file so for the JSON url can I just put the file name? – T.Doe Aug 10 '17 at 13:31
Can i know which server side scripting language you are using. If you are using PHP then use this . Make ajax call to this file. – Faisal Rehman Aug 10 '17 at 13:51
No, I'm not using PHP. I'm just using a MAMP localhost and a HTML file. There's also the article.json file but that is all – T.Doe Aug 10 '17 at 13:53
Read file using javascript for reference https://stackoverflow.com/questions/14446447/javascript-read-local-text-file then append output to your div. – Faisal Rehman Aug 10 '17 at 15:26

Patrick Sampaio · Answer 2 · 2017-08-10T13:37:37.603

0

You should import JQuery

<script>
        $.ajax({
                    url:"Your json url",
                    method:"GET",
                    success:function(data){
           var objectJson = JSON.parse(data)
           $("#output").text("id="+objectJson.id+"title"+objectJson.title);
    }
    });
     </script>

You should do that for each property of your content.

Edit:

<script>


    $.ajax({
                        url:"Your json url",
                        method:"GET",
                        success:function(data){
               var objectJson = JSON.parse(data)
               For(var object in objectJson){
                  $("#output").text("id="+object.id+"title"+object.title);           
                } 

        }
        });
         </script>

edited Aug 10 '17 at 13:37

answered Aug 10 '17 at 13:31

Patrick Sampaio

390
2
13

Thank you! Ok currently I have But I'm getting the error: 'Uncaught SyntaxError: Unexpected token var' and still a blank html page – T.Doe Aug 10 '17 at 13:42
what line is it caught on? – Demon Aug 12 '17 at 19:18

How can I get the JSON data from a file to show up on the HTML page

2 Answers2