CODEWITHSUNDEEP
javascriptarrays
Cleverbird
Cleverbird

Reputation: 173

Render array data

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

Upvotes: 0

Views: 91

Answers (3)

Kees Spoelstra
Kees Spoelstra

Reputation: 299

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.

Upvotes: 1

pwnyexpress
pwnyexpress

Reputation: 1016

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

Upvotes: 0

Ryan
Ryan

Reputation: 5682

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

Upvotes: 0

Related Questions