Need to Format this JSON properly and display in HTML using AJAX

Question

I have a JSON that looks like this, I get it from a PHP file that calls Yahoo Finance API,

It's the first time I see a JSON like this.

I looked everywhere but all I manage to do is console log it... I'd like to display it into a table, or a ul, with AJAX I'd like to access everything and display just what I need or everything.

I tried a bunch of different code snippets from everywhere but couldn't make it work, in three days !...

I'm using scheb/yahoo-finance-api on packagist for that, if it helps.

Thanks for your help.

{
    query: {
        count: 1,
        created: "2017-06-07T12:34:44Z",
        lang: "en-US",
        results: {
            quote: {
                symbol: "APLL",
                Symbol: "APLL",
                LastTradePriceOnly: "0.119",
                LastTradeDate: "6/6/2017",
                LastTradeTime: "11:13am",
                Change: "+0.023",
                Open: "0.119",
                DaysHigh: "0.119",
                DaysLow: "0.110",
                Volume: "300"
            }
        }
    }
}



$(function(){
$("#get-data").click(function() {
    //do ajax here and load data
    var showData = $('#show-data');
    var $data = $.getJSON("data.php", function(data) {

        // $data = $data.responseText;
        function buildTree(data, container) {
            $data.forEach(function(node) {

                var el = document.createElement(node.tag);

                if (Array.isArray(node.content)) {
                    buildTree(node.content, el);
                }
                else if (typeof(node.content) == 'object') {
                    buildTree([node.content], el);
                }
                else {
                    el.innerHTML = node.content;
                }

                container.appendChild(el);
            });

        }


        console.log($data);
        buildTree($data, document.body);
    });
});

});

That's the one I have for now, I deleted all the others, I took it form here and modified it with no success tho.. Thank you for answering :)

So what's the issue? Are you not able to access value of properties? — Rajesh, Jun 07 '17 at 12:54
Technically that's *literal* notation rather than a JSON : https://stackoverflow.com/questions/2904131/what-is-the-difference-between-json-and-object-literal-notation — CD001, Jun 07 '17 at 12:57
oh wow that's fast, I want it to look like a table, I'm not able to access the properties, only the whole object and I've been trying a bunch of loops and other stuff, all I get is the whole object or nothing, or all the characters.. — Laurent, Jun 07 '17 at 12:57

score 0 · Answer 1 · edited Jun 07 '17 at 13:27

This is in literal notation so I assume you've already parsed it into an object. Let's call that object myObject

var myObject={ 
query : { 
    count : 1 , 
    created : "2017-06-07T12:34:44Z" , 
    lang : "en-US" , 
    results : { 
        quote : { 
            symbol : "APLL" , Symbol : "APLL" , LastTradePriceOnly : "0.119" , LastTradeDate : "6/6/2017" , LastTradeTime : "11:13am" , Change : "+0.023" , Open : "0.119" , DaysHigh : "0.119" , DaysLow : "0.110" , Volume : "300" } } } }

You can access properties as follows:

var myCount = myObject.query.count
console.log(myCount)   // logs 1

Yes it seems to work, I'm gonna work from there, thanks a lot, and thanks for the literal vs json lesson — Laurent, Jun 07 '17 at 13:13

score 0 · Answer 2 · answered Jun 07 '17 at 13:23

literal notation, not Json. You can go over this in a for in loop, something like this:

var x = {
query: {
    count: 1,
    created: "2017-06-07T12:34:44Z",
    lang: "en-US",
    results: {
        quote: {
            symbol: "APLL",
            Symbol: "APLL",
            LastTradePriceOnly: "0.119",
            LastTradeDate: "6/6/2017",
            LastTradeTime: "11:13am",
            Change: "+0.023",
            Open: "0.119",
            DaysHigh: "0.119",
            DaysLow: "0.110",
            Volume: "300"
        }
    }
}
}

for (var key in x) {
    if (!x.hasOwnProperty(key)) continue;
    var obj = x[key];
    for (var prop in obj) {
        if(!obj.hasOwnProperty(prop)) continue;
        alert(prop + " = " + obj[prop]);
    }
}

it works as well, that's great, I can see several ways of doing things! Thanks to all !! — Laurent, Jun 07 '17 at 13:37

score 0 · Answer 3 · answered Jun 07 '17 at 13:27

Is this what you want to achieve?

// let's assume this is your data
var data = {
    query: {
        count: 1,
        created: "2017-06-07T12:34:44Z",
        lang: "en-US",
        results: {
            quote: {
                symbol: "APLL",
                Symbol: "APLL",
                LastTradePriceOnly: "0.119",
                LastTradeDate: "6/6/2017",
                LastTradeTime: "11:13am",
                Change: "+0.023",
                Open: "0.119",
                DaysHigh: "0.119",
                DaysLow: "0.110",
                Volume: "300"
            }
        }
    }
};

// prints one li with key and value
function printTree(key, value, container) {
  var li = $('<li></li>');
  if (typeof value === 'object') {
    // value is a nested object, create a new <ul> element for it
    li.append(key + ': ');
    var ul = $('<ul></ul>');
    for (var index in value) {
      printTree(index, value[index], ul); // call the function recursively
    }
    li.append(ul);
  } else {
    li.text(key + ': ' + value);
  }
  container.append(li);
}

printTree('data', data, $('#container')); // call the function for the first time

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="container">

Yes, that's perfect, You guys are all great ! I'll make it work fine — Laurent, Jun 07 '17 at 13:30

Need to Format this JSON properly and display in HTML using AJAX

3 Answers3