How to show JSON with JavaScript?
-2
I am currently researching the JSON and JS (JSON.parse()). Firstly, I need to write this text through JSON and then to show it with JavaScript in HTML in this format (as a list). I know how to show the first artist but don't know how to show the rest of them.
<html>
<body>
<h2>Artists</h2>
<div id="demo"></div>
<script>
var json =[{
"name": "Deep purple",
"title1": "Machine Head",
"title2": "Stormbringer"
},
{
"name": "Joe Satriani",
"title1": "Flying in a Blue Dream",
"title2": "The Extremist",
"title3": "Shockwave Supernova"
},
{
"name": "Snoop Dogg",
"title1": "The Doggfather",
"title2": "Snoopified"
}
];
var obj = JSON.parse(json);
document.getElementById("demo").innerHTML = '<ul><li>'+ obj[0].name+ '</li>'; //what now???
</script>
</body>
</html>
Any advice would be helpful.
javascript html json
asked Nov 14 '18 at 13:22
Irena VilićIrena Vilić
136
|
show 3 more comments
-2
I am currently researching the JSON and JS (JSON.parse()). Firstly, I need to write this text through JSON and then to show it with JavaScript in HTML in this format (as a list). I know how to show the first artist but don't know how to show the rest of them.
<html>
<body>
<h2>Artists</h2>
<div id="demo"></div>
<script>
var json =[{
"name": "Deep purple",
"title1": "Machine Head",
"title2": "Stormbringer"
},
{
"name": "Joe Satriani",
"title1": "Flying in a Blue Dream",
"title2": "The Extremist",
"title3": "Shockwave Supernova"
},
{
"name": "Snoop Dogg",
"title1": "The Doggfather",
"title2": "Snoopified"
}
];
var obj = JSON.parse(json);
document.getElementById("demo").innerHTML = '<ul><li>'+ obj[0].name+ '</li>'; //what now???
</script>
</body>
</html>
Any advice would be helpful.
javascript html json
asked Nov 14 '18 at 13:22
Irena VilićIrena Vilić
136
Start to loop.... It is an array
– epascarello
Nov 14 '18 at 13:22
I know I need a loop but don't know how to write that. I'm new with js.
– Irena Vilić
Nov 14 '18 at 13:24
w3schools.com/js/js_loop_for.asp
– Mark Baijens
Nov 14 '18 at 13:25
So you build a string in the loop
– epascarello
Nov 14 '18 at 13:26
1
What makes this hard is the fact titles should be an array, but for some reason it is not.
– epascarello
Nov 14 '18 at 13:27
|
show 3 more comments
-2
-2
-2
I am currently researching the JSON and JS (JSON.parse()). Firstly, I need to write this text through JSON and then to show it with JavaScript in HTML in this format (as a list). I know how to show the first artist but don't know how to show the rest of them.
<html>
<body>
<h2>Artists</h2>
<div id="demo"></div>
<script>
var json =[{
"name": "Deep purple",
"title1": "Machine Head",
"title2": "Stormbringer"
},
{
"name": "Joe Satriani",
"title1": "Flying in a Blue Dream",
"title2": "The Extremist",
"title3": "Shockwave Supernova"
},
{
"name": "Snoop Dogg",
"title1": "The Doggfather",
"title2": "Snoopified"
}
];
var obj = JSON.parse(json);
document.getElementById("demo").innerHTML = '<ul><li>'+ obj[0].name+ '</li>'; //what now???
</script>
</body>
</html>
Any advice would be helpful.
javascript html json
asked Nov 14 '18 at 13:22
Irena VilićIrena Vilić
136
I am currently researching the JSON and JS (JSON.parse()). Firstly, I need to write this text through JSON and then to show it with JavaScript in HTML in this format (as a list). I know how to show the first artist but don't know how to show the rest of them.
<html>
<body>
<h2>Artists</h2>
<div id="demo"></div>
<script>
var json =[{
"name": "Deep purple",
"title1": "Machine Head",
"title2": "Stormbringer"
},
{
"name": "Joe Satriani",
"title1": "Flying in a Blue Dream",
"title2": "The Extremist",
"title3": "Shockwave Supernova"
},
{
"name": "Snoop Dogg",
"title1": "The Doggfather",
"title2": "Snoopified"
}
];
var obj = JSON.parse(json);
document.getElementById("demo").innerHTML = '<ul><li>'+ obj[0].name+ '</li>'; //what now???
</script>
</body>
</html>
Any advice would be helpful.
javascript html json
javascript html json
asked Nov 14 '18 at 13:22
Irena VilićIrena Vilić
136
asked Nov 14 '18 at 13:22
Irena VilićIrena Vilić
136
asked Nov 14 '18 at 13:22
Irena VilićIrena Vilić
136
asked Nov 14 '18 at 13:22
Irena VilićIrena Vilić
136
asked Nov 14 '18 at 13:22
Irena VilićIrena Vilić
136
136
Start to loop.... It is an array
– epascarello
Nov 14 '18 at 13:22
I know I need a loop but don't know how to write that. I'm new with js.
– Irena Vilić
Nov 14 '18 at 13:24
w3schools.com/js/js_loop_for.asp
– Mark Baijens
Nov 14 '18 at 13:25
So you build a string in the loop
– epascarello
Nov 14 '18 at 13:26
1
What makes this hard is the fact titles should be an array, but for some reason it is not.
– epascarello
Nov 14 '18 at 13:27
|
show 3 more comments
Start to loop.... It is an array
– epascarello
Nov 14 '18 at 13:22
I know I need a loop but don't know how to write that. I'm new with js.
– Irena Vilić
Nov 14 '18 at 13:24
w3schools.com/js/js_loop_for.asp
– Mark Baijens
Nov 14 '18 at 13:25
So you build a string in the loop
– epascarello
Nov 14 '18 at 13:26
1
What makes this hard is the fact titles should be an array, but for some reason it is not.
– epascarello
Nov 14 '18 at 13:27
Start to loop.... It is an array
– epascarello
Nov 14 '18 at 13:22
Start to loop.... It is an array
– epascarello
Nov 14 '18 at 13:22
I know I need a loop but don't know how to write that. I'm new with js.
– Irena Vilić
Nov 14 '18 at 13:24
I know I need a loop but don't know how to write that. I'm new with js.
– Irena Vilić
Nov 14 '18 at 13:24
w3schools.com/js/js_loop_for.asp
– Mark Baijens
Nov 14 '18 at 13:25
w3schools.com/js/js_loop_for.asp
– Mark Baijens
Nov 14 '18 at 13:25
So you build a string in the loop
– epascarello
Nov 14 '18 at 13:26
So you build a string in the loop
– epascarello
Nov 14 '18 at 13:26
1
1
What makes this hard is the fact titles should be an array, but for some reason it is not.
– epascarello
Nov 14 '18 at 13:27
What makes this hard is the fact titles should be an array, but for some reason it is not.
– epascarello
Nov 14 '18 at 13:27
|
show 3 more comments
2 Answers
2
active
oldest
votes
1
Without using document.write.
You can loop through JSON using for, forEach and a more functional way is using Array.map. You can generate your content to append the desired DOM element (div#demo in your case).
var json = [{
"name": "Deep purple",
"title1": "Machine Head",
"title2": "Stormbringer"
},
{
"name": "Joe Satriani",
"title1": "Flying in a Blue Dream",
"title2": "The Extremist",
"title3": "Shockwave Supernova"
},
{
"name": "Snoop Dogg",
"title1": "The Doggfather",
"title2": "Snoopified"
}
];
var content = json.map(function(obj){
var con = "<h3>" + obj.name + "</h3>";
con += "<ul>";
con += Object.keys(obj).map(function(key){
return key.startsWith("title") ? "<li>" + obj[key] + "</li>" : "";
}).join('');
con += "</ul>";
return con;
}).join('');
document.getElementById("demo").innerHTML = content;<h2>Artists</h2>
<div id="demo"></div>answered Nov 14 '18 at 13:49
Jyothi Babu ArajaJyothi Babu Araja
5,53421930
add a comment |
2
var json = [{
"name": "Deep purple",
"title1": "Machine Head",
"title2": "Stormbringer"
},
{
"name": "Joe Satriani",
"title1": "Flying in a Blue Dream",
"title2": "The Extremist",
"title3": "Shockwave Supernova"
},
{
"name": "Snoop Dogg",
"title1": "The Doggfather",
"title2": "Snoopified"
}
];
json.forEach((jsonObject) => {
var name = jsonObject.name;
var titles = ;
Object.keys(jsonObject).filter((key) => {
return key.startsWith("title")
}).forEach((title) => {
titles.push(jsonObject[title]);
})
var root = document.getElementById("demo");
render(root, titles, name)
});
function render(root, array, name) {
var nameElement = document.createElement('h3');
nameElement.innerHTML = name;
root.appendChild(nameElement)
var ul = document.createElement('ul');
var array;
root.appendChild(ul); // append the created ul to the root
array.forEach(function(item) {
li = document.createElement('li'); // create a new list item
li.appendChild(document.createTextNode(item)); // append the text to the li
ul.appendChild(li); // append the list item to the ul
});
}<html>
<body>
<h2>Artists</h2>
<div id="demo"></div>
</body>
</html>answered Nov 14 '18 at 13:34
Samuel J MathewSamuel J Mathew
3,65212229
Great! It works. Thank you so much.
– Irena Vilić
Nov 14 '18 at 13:37
probablykey.startsWith("title")to be not equal to "name" instead? Also might be better to createulelements append childlielements then append the whole thing to the DOM at the end.
– Mark Schultheiss
Nov 14 '18 at 13:44
stackoverflow.com/a/27531116/125981
– Mark Schultheiss
Nov 14 '18 at 13:50
NOTE I DO like thefilteron theObject.keyshere and was thinking along those lines.
– Mark Schultheiss
Nov 14 '18 at 13:54
@MarkSchultheiss updated based on comments and his question
– Samuel J Mathew
Nov 14 '18 at 14:22
|
show 1 more comment
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53301253%2fhow-to-show-json-with-javascript%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
Without using document.write.
You can loop through JSON using for, forEach and a more functional way is using Array.map. You can generate your content to append the desired DOM element (div#demo in your case).
var json = [{
"name": "Deep purple",
"title1": "Machine Head",
"title2": "Stormbringer"
},
{
"name": "Joe Satriani",
"title1": "Flying in a Blue Dream",
"title2": "The Extremist",
"title3": "Shockwave Supernova"
},
{
"name": "Snoop Dogg",
"title1": "The Doggfather",
"title2": "Snoopified"
}
];
var content = json.map(function(obj){
var con = "<h3>" + obj.name + "</h3>";
con += "<ul>";
con += Object.keys(obj).map(function(key){
return key.startsWith("title") ? "<li>" + obj[key] + "</li>" : "";
}).join('');
con += "</ul>";
return con;
}).join('');
document.getElementById("demo").innerHTML = content;<h2>Artists</h2>
<div id="demo"></div>answered Nov 14 '18 at 13:49
Jyothi Babu ArajaJyothi Babu Araja
5,53421930
add a comment |
1
Without using document.write.
You can loop through JSON using for, forEach and a more functional way is using Array.map. You can generate your content to append the desired DOM element (div#demo in your case).
var json = [{
"name": "Deep purple",
"title1": "Machine Head",
"title2": "Stormbringer"
},
{
"name": "Joe Satriani",
"title1": "Flying in a Blue Dream",
"title2": "The Extremist",
"title3": "Shockwave Supernova"
},
{
"name": "Snoop Dogg",
"title1": "The Doggfather",
"title2": "Snoopified"
}
];
var content = json.map(function(obj){
var con = "<h3>" + obj.name + "</h3>";
con += "<ul>";
con += Object.keys(obj).map(function(key){
return key.startsWith("title") ? "<li>" + obj[key] + "</li>" : "";
}).join('');
con += "</ul>";
return con;
}).join('');
document.getElementById("demo").innerHTML = content;<h2>Artists</h2>
<div id="demo"></div>answered Nov 14 '18 at 13:49
Jyothi Babu ArajaJyothi Babu Araja
5,53421930
add a comment |
1
1
1
Without using document.write.
You can loop through JSON using for, forEach and a more functional way is using Array.map. You can generate your content to append the desired DOM element (div#demo in your case).
var json = [{
"name": "Deep purple",
"title1": "Machine Head",
"title2": "Stormbringer"
},
{
"name": "Joe Satriani",
"title1": "Flying in a Blue Dream",
"title2": "The Extremist",
"title3": "Shockwave Supernova"
},
{
"name": "Snoop Dogg",
"title1": "The Doggfather",
"title2": "Snoopified"
}
];
var content = json.map(function(obj){
var con = "<h3>" + obj.name + "</h3>";
con += "<ul>";
con += Object.keys(obj).map(function(key){
return key.startsWith("title") ? "<li>" + obj[key] + "</li>" : "";
}).join('');
con += "</ul>";
return con;
}).join('');
document.getElementById("demo").innerHTML = content;<h2>Artists</h2>
<div id="demo"></div>answered Nov 14 '18 at 13:49
Jyothi Babu ArajaJyothi Babu Araja
5,53421930
Without using document.write.
You can loop through JSON using for, forEach and a more functional way is using Array.map. You can generate your content to append the desired DOM element (div#demo in your case).
var json = [{
"name": "Deep purple",
"title1": "Machine Head",
"title2": "Stormbringer"
},
{
"name": "Joe Satriani",
"title1": "Flying in a Blue Dream",
"title2": "The Extremist",
"title3": "Shockwave Supernova"
},
{
"name": "Snoop Dogg",
"title1": "The Doggfather",
"title2": "Snoopified"
}
];
var content = json.map(function(obj){
var con = "<h3>" + obj.name + "</h3>";
con += "<ul>";
con += Object.keys(obj).map(function(key){
return key.startsWith("title") ? "<li>" + obj[key] + "</li>" : "";
}).join('');
con += "</ul>";
return con;
}).join('');
document.getElementById("demo").innerHTML = content;<h2>Artists</h2>
<div id="demo"></div>var json = [{
"name": "Deep purple",
"title1": "Machine Head",
"title2": "Stormbringer"
},
{
"name": "Joe Satriani",
"title1": "Flying in a Blue Dream",
"title2": "The Extremist",
"title3": "Shockwave Supernova"
},
{
"name": "Snoop Dogg",
"title1": "The Doggfather",
"title2": "Snoopified"
}
];
var content = json.map(function(obj){
var con = "<h3>" + obj.name + "</h3>";
con += "<ul>";
con += Object.keys(obj).map(function(key){
return key.startsWith("title") ? "<li>" + obj[key] + "</li>" : "";
}).join('');
con += "</ul>";
return con;
}).join('');
document.getElementById("demo").innerHTML = content;<h2>Artists</h2>
<div id="demo"></div>var json = [{
"name": "Deep purple",
"title1": "Machine Head",
"title2": "Stormbringer"
},
{
"name": "Joe Satriani",
"title1": "Flying in a Blue Dream",
"title2": "The Extremist",
"title3": "Shockwave Supernova"
},
{
"name": "Snoop Dogg",
"title1": "The Doggfather",
"title2": "Snoopified"
}
];
var content = json.map(function(obj){
var con = "<h3>" + obj.name + "</h3>";
con += "<ul>";
con += Object.keys(obj).map(function(key){
return key.startsWith("title") ? "<li>" + obj[key] + "</li>" : "";
}).join('');
con += "</ul>";
return con;
}).join('');
document.getElementById("demo").innerHTML = content;<h2>Artists</h2>
<div id="demo"></div>answered Nov 14 '18 at 13:49
Jyothi Babu ArajaJyothi Babu Araja
5,53421930
answered Nov 14 '18 at 13:49
Jyothi Babu ArajaJyothi Babu Araja
5,53421930
answered Nov 14 '18 at 13:49
Jyothi Babu ArajaJyothi Babu Araja
5,53421930
answered Nov 14 '18 at 13:49
Jyothi Babu ArajaJyothi Babu Araja
5,53421930
5,53421930
add a comment |
add a comment |
2
var json = [{
"name": "Deep purple",
"title1": "Machine Head",
"title2": "Stormbringer"
},
{
"name": "Joe Satriani",
"title1": "Flying in a Blue Dream",
"title2": "The Extremist",
"title3": "Shockwave Supernova"
},
{
"name": "Snoop Dogg",
"title1": "The Doggfather",
"title2": "Snoopified"
}
];
json.forEach((jsonObject) => {
var name = jsonObject.name;
var titles = ;
Object.keys(jsonObject).filter((key) => {
return key.startsWith("title")
}).forEach((title) => {
titles.push(jsonObject[title]);
})
var root = document.getElementById("demo");
render(root, titles, name)
});
function render(root, array, name) {
var nameElement = document.createElement('h3');
nameElement.innerHTML = name;
root.appendChild(nameElement)
var ul = document.createElement('ul');
var array;
root.appendChild(ul); // append the created ul to the root
array.forEach(function(item) {
li = document.createElement('li'); // create a new list item
li.appendChild(document.createTextNode(item)); // append the text to the li
ul.appendChild(li); // append the list item to the ul
});
}<html>
<body>
<h2>Artists</h2>
<div id="demo"></div>
</body>
</html>answered Nov 14 '18 at 13:34
Samuel J MathewSamuel J Mathew
3,65212229
Great! It works. Thank you so much.
– Irena Vilić
Nov 14 '18 at 13:37
probablykey.startsWith("title")to be not equal to "name" instead? Also might be better to createulelements append childlielements then append the whole thing to the DOM at the end.
– Mark Schultheiss
Nov 14 '18 at 13:44
stackoverflow.com/a/27531116/125981
– Mark Schultheiss
Nov 14 '18 at 13:50
NOTE I DO like thefilteron theObject.keyshere and was thinking along those lines.
– Mark Schultheiss
Nov 14 '18 at 13:54
@MarkSchultheiss updated based on comments and his question
– Samuel J Mathew
Nov 14 '18 at 14:22
|
show 1 more comment
2
var json = [{
"name": "Deep purple",
"title1": "Machine Head",
"title2": "Stormbringer"
},
{
"name": "Joe Satriani",
"title1": "Flying in a Blue Dream",
"title2": "The Extremist",
"title3": "Shockwave Supernova"
},
{
"name": "Snoop Dogg",
"title1": "The Doggfather",
"title2": "Snoopified"
}
];
json.forEach((jsonObject) => {
var name = jsonObject.name;
var titles = ;
Object.keys(jsonObject).filter((key) => {
return key.startsWith("title")
}).forEach((title) => {
titles.push(jsonObject[title]);
})
var root = document.getElementById("demo");
render(root, titles, name)
});
function render(root, array, name) {
var nameElement = document.createElement('h3');
nameElement.innerHTML = name;
root.appendChild(nameElement)
var ul = document.createElement('ul');
var array;
root.appendChild(ul); // append the created ul to the root
array.forEach(function(item) {
li = document.createElement('li'); // create a new list item
li.appendChild(document.createTextNode(item)); // append the text to the li
ul.appendChild(li); // append the list item to the ul
});
}<html>
<body>
<h2>Artists</h2>
<div id="demo"></div>
</body>
</html>answered Nov 14 '18 at 13:34
Samuel J MathewSamuel J Mathew
3,65212229
Great! It works. Thank you so much.
– Irena Vilić
Nov 14 '18 at 13:37
probablykey.startsWith("title")to be not equal to "name" instead? Also might be better to createulelements append childlielements then append the whole thing to the DOM at the end.
– Mark Schultheiss
Nov 14 '18 at 13:44
stackoverflow.com/a/27531116/125981
– Mark Schultheiss
Nov 14 '18 at 13:50
NOTE I DO like thefilteron theObject.keyshere and was thinking along those lines.
– Mark Schultheiss
Nov 14 '18 at 13:54
@MarkSchultheiss updated based on comments and his question
– Samuel J Mathew
Nov 14 '18 at 14:22
|
show 1 more comment
2
2
2
var json = [{
"name": "Deep purple",
"title1": "Machine Head",
"title2": "Stormbringer"
},
{
"name": "Joe Satriani",
"title1": "Flying in a Blue Dream",
"title2": "The Extremist",
"title3": "Shockwave Supernova"
},
{
"name": "Snoop Dogg",
"title1": "The Doggfather",
"title2": "Snoopified"
}
];
json.forEach((jsonObject) => {
var name = jsonObject.name;
var titles = ;
Object.keys(jsonObject).filter((key) => {
return key.startsWith("title")
}).forEach((title) => {
titles.push(jsonObject[title]);
})
var root = document.getElementById("demo");
render(root, titles, name)
});
function render(root, array, name) {
var nameElement = document.createElement('h3');
nameElement.innerHTML = name;
root.appendChild(nameElement)
var ul = document.createElement('ul');
var array;
root.appendChild(ul); // append the created ul to the root
array.forEach(function(item) {
li = document.createElement('li'); // create a new list item
li.appendChild(document.createTextNode(item)); // append the text to the li
ul.appendChild(li); // append the list item to the ul
});
}<html>
<body>
<h2>Artists</h2>
<div id="demo"></div>
</body>
</html>answered Nov 14 '18 at 13:34
Samuel J MathewSamuel J Mathew
3,65212229
var json = [{
"name": "Deep purple",
"title1": "Machine Head",
"title2": "Stormbringer"
},
{
"name": "Joe Satriani",
"title1": "Flying in a Blue Dream",
"title2": "The Extremist",
"title3": "Shockwave Supernova"
},
{
"name": "Snoop Dogg",
"title1": "The Doggfather",
"title2": "Snoopified"
}
];
json.forEach((jsonObject) => {
var name = jsonObject.name;
var titles = ;
Object.keys(jsonObject).filter((key) => {
return key.startsWith("title")
}).forEach((title) => {
titles.push(jsonObject[title]);
})
var root = document.getElementById("demo");
render(root, titles, name)
});
function render(root, array, name) {
var nameElement = document.createElement('h3');
nameElement.innerHTML = name;
root.appendChild(nameElement)
var ul = document.createElement('ul');
var array;
root.appendChild(ul); // append the created ul to the root
array.forEach(function(item) {
li = document.createElement('li'); // create a new list item
li.appendChild(document.createTextNode(item)); // append the text to the li
ul.appendChild(li); // append the list item to the ul
});
}<html>
<body>
<h2>Artists</h2>
<div id="demo"></div>
</body>
</html>var json = [{
"name": "Deep purple",
"title1": "Machine Head",
"title2": "Stormbringer"
},
{
"name": "Joe Satriani",
"title1": "Flying in a Blue Dream",
"title2": "The Extremist",
"title3": "Shockwave Supernova"
},
{
"name": "Snoop Dogg",
"title1": "The Doggfather",
"title2": "Snoopified"
}
];
json.forEach((jsonObject) => {
var name = jsonObject.name;
var titles = ;
Object.keys(jsonObject).filter((key) => {
return key.startsWith("title")
}).forEach((title) => {
titles.push(jsonObject[title]);
})
var root = document.getElementById("demo");
render(root, titles, name)
});
function render(root, array, name) {
var nameElement = document.createElement('h3');
nameElement.innerHTML = name;
root.appendChild(nameElement)
var ul = document.createElement('ul');
var array;
root.appendChild(ul); // append the created ul to the root
array.forEach(function(item) {
li = document.createElement('li'); // create a new list item
li.appendChild(document.createTextNode(item)); // append the text to the li
ul.appendChild(li); // append the list item to the ul
});
}<html>
<body>
<h2>Artists</h2>
<div id="demo"></div>
</body>
</html>var json = [{
"name": "Deep purple",
"title1": "Machine Head",
"title2": "Stormbringer"
},
{
"name": "Joe Satriani",
"title1": "Flying in a Blue Dream",
"title2": "The Extremist",
"title3": "Shockwave Supernova"
},
{
"name": "Snoop Dogg",
"title1": "The Doggfather",
"title2": "Snoopified"
}
];
json.forEach((jsonObject) => {
var name = jsonObject.name;
var titles = ;
Object.keys(jsonObject).filter((key) => {
return key.startsWith("title")
}).forEach((title) => {
titles.push(jsonObject[title]);
})
var root = document.getElementById("demo");
render(root, titles, name)
});
function render(root, array, name) {
var nameElement = document.createElement('h3');
nameElement.innerHTML = name;
root.appendChild(nameElement)
var ul = document.createElement('ul');
var array;
root.appendChild(ul); // append the created ul to the root
array.forEach(function(item) {
li = document.createElement('li'); // create a new list item
li.appendChild(document.createTextNode(item)); // append the text to the li
ul.appendChild(li); // append the list item to the ul
});
}<html>
<body>
<h2>Artists</h2>
<div id="demo"></div>
</body>
</html>answered Nov 14 '18 at 13:34
Samuel J MathewSamuel J Mathew
3,65212229
edited Nov 14 '18 at 14:16
answered Nov 14 '18 at 13:34
Samuel J MathewSamuel J Mathew
3,65212229
answered Nov 14 '18 at 13:34
Samuel J MathewSamuel J Mathew
3,65212229
answered Nov 14 '18 at 13:34
Samuel J MathewSamuel J Mathew
3,65212229
3,65212229
Great! It works. Thank you so much.
– Irena Vilić
Nov 14 '18 at 13:37
probablykey.startsWith("title")to be not equal to "name" instead? Also might be better to createulelements append childlielements then append the whole thing to the DOM at the end.
– Mark Schultheiss
Nov 14 '18 at 13:44
stackoverflow.com/a/27531116/125981
– Mark Schultheiss
Nov 14 '18 at 13:50
NOTE I DO like thefilteron theObject.keyshere and was thinking along those lines.
– Mark Schultheiss
Nov 14 '18 at 13:54
@MarkSchultheiss updated based on comments and his question
– Samuel J Mathew
Nov 14 '18 at 14:22
|
show 1 more comment
Great! It works. Thank you so much.
– Irena Vilić
Nov 14 '18 at 13:37
probablykey.startsWith("title")to be not equal to "name" instead? Also might be better to createulelements append childlielements then append the whole thing to the DOM at the end.
– Mark Schultheiss
Nov 14 '18 at 13:44
stackoverflow.com/a/27531116/125981
– Mark Schultheiss
Nov 14 '18 at 13:50
NOTE I DO like thefilteron theObject.keyshere and was thinking along those lines.
– Mark Schultheiss
Nov 14 '18 at 13:54
@MarkSchultheiss updated based on comments and his question
– Samuel J Mathew
Nov 14 '18 at 14:22
Great! It works. Thank you so much.
– Irena Vilić
Nov 14 '18 at 13:37
Great! It works. Thank you so much.
– Irena Vilić
Nov 14 '18 at 13:37
probably
key.startsWith("title") to be not equal to "name" instead? Also might be better to create ul elements append child li elements then append the whole thing to the DOM at the end.– Mark Schultheiss
Nov 14 '18 at 13:44
probably
key.startsWith("title") to be not equal to "name" instead? Also might be better to create ul elements append child li elements then append the whole thing to the DOM at the end.– Mark Schultheiss
Nov 14 '18 at 13:44
stackoverflow.com/a/27531116/125981
– Mark Schultheiss
Nov 14 '18 at 13:50
stackoverflow.com/a/27531116/125981
– Mark Schultheiss
Nov 14 '18 at 13:50
NOTE I DO like the
filter on the Object.keys here and was thinking along those lines.– Mark Schultheiss
Nov 14 '18 at 13:54
NOTE I DO like the
filter on the Object.keys here and was thinking along those lines.– Mark Schultheiss
Nov 14 '18 at 13:54
@MarkSchultheiss updated based on comments and his question
– Samuel J Mathew
Nov 14 '18 at 14:22
@MarkSchultheiss updated based on comments and his question
– Samuel J Mathew
Nov 14 '18 at 14:22
|
show 1 more comment
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53301253%2fhow-to-show-json-with-javascript%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Start to loop.... It is an array
– epascarello
Nov 14 '18 at 13:22
I know I need a loop but don't know how to write that. I'm new with js.
– Irena Vilić
Nov 14 '18 at 13:24
w3schools.com/js/js_loop_for.asp
– Mark Baijens
Nov 14 '18 at 13:25
So you build a string in the loop
– epascarello
Nov 14 '18 at 13:26
1
What makes this hard is the fact titles should be an array, but for some reason it is not.
– epascarello
Nov 14 '18 at 13:27