从外部URL解析json仅Html和JS

<html> 
<body> 
<div id="output">hi</div> 
</body> 
<script> 
    var link="http://mywp.com/cilacap/api/get_posts/"; 
    var jcontent= JSON.parse(link); 
    var output=document.getElementById('output'); 
    output.innerHTML=jcontent.id' '; 
</script> 

</html>

它只显示“hi”。有人能告诉我如何显示JSON项目，如“ID”和“PostDate” 循环但没有PHP脚本？从外部URL解析json仅Html和JS

感谢

来源

2016-06-11 Agung Chrisna Nugroho

是链接正确的路径吗？ –

只是一个例子 –

我已经更新了我的答案，你应该能够复制粘贴最后一部分，使其开箱即用。 – Randy

很少出现语法错误，下面是正确的错误。

<html> 
 
<body> 
 
<div id="output">hi</div> 
 
</body> 
 
<script> 
 
    var link='{"url":"http://mywp.com/cilacap/api/get_posts/", "id":"url_id_01"}'; 
 
    var jcontent= JSON.parse(link); 
 
    var output=document.getElementById('output'); 
 
    output.innerHTML=jcontent.id + ' '; 
 
</script> 
 

 
</html>

JSON Data(var link)，是不能分析。

JSON Data(var link)，没有包含任何属性，称为id。

最后一行字符串连接（output.innerHTML）错误。

来源

2016-06-11 05:09:14

尝试从删除引号：

output.innerHTML=jcontent.id' ';

并将其更改为：

output.innerHTML += jcontent.id;

提供的链接是有效的，现在应该工作。

你也可以这样写：

console.log(jcontent);

，并检查控制台显示的值，或已经发生的任何错误。

来源

2016-06-11 05:06:39

该url是一个字符串，而不是json。

使用AJAX来获取数据（使用jquery）

var link; 
$.ajax({ 

    url: "test.html", 

}).done(function(data) { 

    link = data; 

});

然后，提取数据;

output.innerHTML=jcontent.id;

是价值。你得到这样的关键：

使用function而不是arrow functions为

ES7

Object.entries(jcontent) 
.forEach(keyValuePair => 
{ 
    // Push to HTML 

    var t = document.createTextNode(keyValuePair[0] + ' : ' + keyValuePair[1]);     // Create a text node 
    output.appendChild(t);    
});

ES6

Object.keys(jcontent) 
    .map(key => [key, jcontent[key]]) 
    .forEach(keyValuePair => 
    { 
     // Push to HTML 

     var t = document.createTextNode(keyValuePair[0] + ' : ' + keyValuePair[1]);     // Create a text node 
    output.appendChild(t);    
});

ES5（最有可能的情况下） ES5：

Object.keys(jcontent) 
.map(function(key){ [key, jcontent[key]] }) 
.forEach(function(keyValuePair) 
{ 
    // Push to HTML 

    var t = document.createTextNode(keyValuePair[0] + ' : ' + keyValuePair[1]);     // Create a text node 
    output.appendChild(t);    
});

访问值：

keyValuePair[0] // key 
keyValuePair[1] // value

诗

如果你想使用ES7或ES6方法，看看babeljs

来源

2016-06-11 06:32:34 Randy

请仅限JS。 –

从外部URL解析json仅Html和JS

回答

相关问题