Render array data

Question

This is probably very easy to do, but its been quite some time since I last used JavaScript, and I cant for the life of me remember how to do this (yes, I searched first, but found nothing that could help me).

Essentially I want to render this as a HTML blog post using a function:

<html>
<head>
<style>
body
{
background-color:#ffa500;
}

#blogElement
{
background-color: #fff;
margin-left:auto;
margin-right:auto;
width:70%;
}
</style>
</head>

<body>

<div id="mainContent">
    <div id="blogElement"></div>
</div>

<script>
var myBlogPosting = {  
  title:    "Google launches underwater Street View",
  image:    "1.jpg",
  author:   "Xeni Jardin",
  bodyText: "<p>Today Google Maps unveils a new Street View feature: " +
            "underwater panoramic views of six special sea spots. " +
            "The idea is to create a virtual map of the oceans, " +
            "documenting the state of fragile ecosystems as they " + 
            "change over time, and sharing a vivid experience of " + 
            "part of our world that few humans get to see up close " + 
            "and in person, in real life.</p>" +
            "<p>The ocean collection on Google Street View is now " + 
            "available at maps.google.com/ocean, and includes coral " + 
            "reefs and the creatures who live in them, in Australia, " + 
            "the Philippines and Hawaii.</p>",
  link:     "http://boingboing.net/2012/09/25/google-launches-underwater-str.html",
  ranking:  "3",
}

function CreateBlogHtml(blogpost)
{
   return "<h1>"+blogpost.title+"</h1>"+
        "<img src="+blogpost.image+" />"+
        "<p>Author: "+blogpost.author+"</p>"+
        blogpost.bodyText+
        "<a href=\""+blogpost.link+"\">Read more</a>"+
        "<p>Ranking: "+blogpost.ranking+"</p>";
}

document.write(CreateBlogHtml(myBlogPosting));

</script>
</body>
</html>

This is probably one of those things where I'll slap myself in the face the moment it comes to me

Kees Spoelstra · Accepted Answer · 2013-02-06 19:16:08Z

1

Your question is not clear enough, there are many ways to do what you want.

One version would write the content on the fly

<div id="blogElement"></div>
<script>
function CreateBlogHtml(blogpost)
{
   return "<h1>"+blogpost.title+"</h1>"+
          blogpost.bodyText+
          "<a href=\""+blogpost.link+"\">Read more</a>";
}

document.write(CreateBlogHtml(myBlogPosting)); 
</script>

Another version would fill a HTML element

<div id="blogElement"></div>
<script>
function CreateBlogHtml(blogpost)
{
   return "<h1>"+blogpost.title+"</h1>"+
          blogpost.bodyText+
          "<a href=\""+blogpost.link+"\">Read more</a>";
}


function ShowBlogPost(blogpost)
{
    document.getElementById("blogElement").innerHTML=CreateBlogHtml(blogpost))
}


ShowBlogPost(myBlogPosting));
</script>

You could also create a version which fills an element per field in the blog object. JQuery will give you many additional options to realise what you want.

Beware: These examples are vulnerable to HTML injection. Please read up on this if you don't know what this means.

answered Feb 6, 2013 at 19:16

Kees Spoelstra

2992 silver badges3 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Cleverbird Over a year ago

Ah, see, I knew it would be something relatively simple! Thanks!

Cleverbird Over a year ago

Silly question perhaps... But how do I apply CSS effects to these elements? I tried adding some simple effects to blogElement, but it seems that the browser ignores these. Also tried adding effects to a container DIV, but again, the browser seems to ignore these.

Kees Spoelstra Over a year ago

What do you mean exactly, do you mean CSS styling or an animation effect?

Cleverbird Over a year ago

Just styling, I've updated the question with all my code... You should be able to see what I'm trying to do (but doesnt work)

Kees Spoelstra Over a year ago

As you are using the write variant the content is not placed in the DIV thus not styled, just use the second variant. This will place the content in the div. Firebug in firefox will help you show how the HTML is structured.

Ryan · Accepted Answer · 2013-02-06 19:05:41Z

0

myBlogPageElement.innerHTML += myBlogPosting.title + MyBlogPosting.bodyText + MyBlogPosting.link;

answered Feb 6, 2013 at 19:05

Ryan

5,6823 gold badges40 silver badges66 bronze badges

Comments

pwnyexpress · Accepted Answer · 2013-02-06 19:07:47Z

var myBlogPosting = {  
    title:    "Google launches underwater Street View",
    bodyText: "<p>Today Google Maps unveils a new Street View feature: " +
        "underwater panoramic views of six special sea spots. " +
        "The idea is to create a virtual map of the oceans, " +
        "documenting the state of fragile ecosystems as they " + 
        "change over time, and sharing a vivid experience of " + 
        "part of our world that few humans get to see up close " + 
        "and in person, in real life.</p>" +
        "<p>The ocean collection on Google Street View is now " + 
        "available at maps.google.com/ocean, and includes coral " + 
        "reefs and the creatures who live in them, in Australia, " + 
        "the Philippines and Hawaii.</p>",
    link:     "http://boingboing.net/2012/09/25/google-launches-underwater-str.html"

}

function RenderBlogPost(targetElementID, blogObj) {
    var element = document.getElementById(targetElementID);
    element.innerHTML(blogObj.bodyText);
}

RenderBlogPost("someID", myBlogPosting);

Collectives™ on Stack Overflow

Render array data

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related