需要正确格式化此JSON并使用AJAX

时间:2017-06-07 12:53:10

标签: javascript php jquery json ajax

我有一个看起来像这样的JSON,我从一个调用Yahoo Finance API的PHP文件中得到它,

这是我第一次看到像这样的JSON。

我到处寻找,但我设法做的就是控制台登录...我想用AJAX将它显示在表格或ul中 我想访问所有内容并显示我需要的内容或所有内容。

我在三天内尝试了各种不同的代码片段,但无法使其工作!...

如果有帮助的话,我在packagist上使用scheb / yahoo-finance-api。

感谢您的帮助。

{
    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);
    });
});

});

这就是我现在拥有的那个,我删除了所有其他的,我在这里采取了形式并修改它没有成功。 感谢您的回答:)

3 个答案:

答案 0 :(得分:0)

这是字面符号所以我假设你已经将它解析为一个对象。让我们调用该对象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" } } } }

您可以按如下方式访问属性:

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

答案 1 :(得分:0)

字面符号,而不是Json。 您可以在for循环中查看此内容,如下所示:

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]);
    }
}

答案 2 :(得分:0)

这是你想要达到的目标吗?

// 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">