Parse JSON from URL with Javascript

Question

I've put together a system to parse JSON and render it with some simple CSS. Though, I've done this using a variable. I don't want to output the data within the script. Instead, gather it from a local or remote URL.

<script type='text/javascript'>
$(window).load(function(){
var data={"users":[
        {
            "title":"Dieter Rams Video",
            "content":"Only text will go here. Limited to 100 characters per panel.",
            "url":"http://website.me/video.php?=89697976996",
        },
        {
            "title":"IoT Ecosystem",
            "content":"Villalobos",
            "url":"http://google.com",
        },
        {
            "title":"IoT Ecosystem",
            "content":"Villalobos",
            "url":"http://google.com",
        },
        {
            "title":"IoT Ecosystem",
            "content":"Villalobos",
            "url":"http://google.com",
        },
        {
            "title":"IoT Ecosystem",
            "content":"Villalobos",
            "url":"http://google.com",
        },
        {
            "title":"IoT Ecosystem",
            "content":"Villalobos",
            "url":"http://google.com",
        },
        {
            "title":"IoT Ecosystem",
            "content":"Villalobos",
            "url":"http://google.com",
        }
]}
$(data.users).each(function() {
    var output = "<a href='" + this.url + "'><div class='col-sm-12'><div class='panel panel-default'><div class='panel-body'><h4>" + this.title + "</h4><p>" + this.content + "</p></div></div></div></a>";
    $('#feed').append(output);
});
});
</script>

How could I gather the JSON data from a URL source and output it like I am now?

Update

<script type='text/javascript'>
    var data;
    $.ajax({
    dataType: "json",
    url: `file://${__dirname}/data.json`,
    data: data,
    success: function(data) {
         data = data;
      }
    });
    $(window).load(function(){
    $(data).each(function() {
        var output = "<a href='" + this.url + "'><div class='col-sm-12'><div class='panel panel-default'><div class='panel-body'><h4>" + this.title + "</h4><p>" + this.content + "</p></div></div></div></a>";
        $('#feed').append(output);
    });
    });
</script>

paolobasso · Answer 1 · 2017-01-12T23:09:27.093

3

You should use ajax (usually with jquery):

var jsonResult;

$.ajax({
  dataType: "json",
  url: url,
  data: data,
  success: function(data) {
       jsonResult = data;
    }
});

Reference: https://api.jquery.com/jquery.ajax/

edited Jan 12 '17 at 23:09

answered Jan 12 '17 at 22:55

paolobasso

2,008
12
25

Would I be able to reference that some way? Like a variable. I ask that because I'm developing for an Electron app. – Jan 12 '17 at 23:04
1

Yep, see updated answer – paolobasso Jan 12 '17 at 23:09
Cool, thank you. I've added an updated view of what I have. Not quite sure if that's on track. – Jan 12 '17 at 23:17
Browser cannot open local directories like 'file://*' fo security reasons. You should start using a localhost server ( search xampp or aampp or wampp in google) – paolobasso Jan 12 '17 at 23:23
Though, what I have should work with a localhost? – Jan 12 '17 at 23:26
Browsers are not able to reach local file with so you just beed a local server to "serve" the json – paolobasso Jan 13 '17 at 06:25

score 0 · Answer 2 · answered Jan 12 '17 at 22:56

0

Using jquery you can use $.getJSON

Reference http://api.jquery.com/jquery.getjson/

answered Jan 12 '17 at 22:56

Marco Moretti

689
4
11

score 0 · Answer 3 · answered Jan 12 '17 at 22:56

0

You can use jQuery.getJSON() method to get JSON data from external resource.

See documentation: http://api.jquery.com/jquery.getjson/

answered Jan 12 '17 at 22:56

Wiktor Bednarz

1,553
10
15

Parse JSON from URL with Javascript

3 Answers3