CODEWITHSUNDEEP
jqueryjson
BlackFire27
BlackFire27

Reputation: 1550

Replacing elements with jquery

I have the following jquery markup:

<p class="article">
    <font size='5'><b><span class='articleHeading'>Article1</span></b></font><br/>
    <span class='myArticle'>11111111111111111</span>    
</p>
<p class="article">
    <font size='5'><b><span class='articleHeading'>Article2</span></b></font><br/>
    <span class='myArticle'>22222222222222222222</span>                      
</p>
<p class="article">
    <font size='5'><b><span class='articleHeading'>Article3</span></b></font><br/>
    <span class='myArticle'>333333333333</span>                                   
</p>

What I am trying to do is to iterate over json data (which works successfully), and put new data inside the spans of classes 'articleHeading' and 'article':

I tried this:

     var articleHeadings=$('.articleHeading');
                var articles=$('.myArticle');
                var z=0;
                for(var i=0;i<data.length;i++){
                    var obj = data[i];

                    for(var key in obj){
                        ArticleHeadings[z].text(key);
                        articles[z].text(obj[key]);
                        z++;
                    }
                }

I updated my question. I am puttin all my spans into 2 array..heading and the article..and then using them..but it doesnt work

 //I want to obtain all the spans with the classes elements and put them in 2 arrays.
  var articleHeadings=$('.articleHeading');
   var articles=$('.myArticle');
   //I want to add text to the first element like this.                
                    articleHeadings[0].text("1111111111");
//There is an element inside..but when using text nothing appears.

But when I use this:

$('.articleHeading').text("1111111111");

The 11111 do get replaced..lol. Why? is it because there is a shallow copy by value? instead of by reference?

I found the solution. I had to wrap each item of my array with $():

          var articleHeadings=$('.articleHeading');
                var articles=$('.myArticle');




                var z=0;
                for(var i=0;i<data.length;i++){
                    var obj = data[i];

                    for(var key in obj){

                    //  alert($(articleHeadings[z]).text());
                       **$(articleHeadings[z]).text(key);**
                       **$(articles[z]).text(obj[key]);**
                        z++;
                    }
                }

Upvotes: 0

Views: 200

Answers (2)

SeanCannon
SeanCannon

Reputation: 77956

Assuming your JSON looks something like this: 

$data = {
    "data": [{
        "articleHeading": "First heading",
        "myArticle": "First article body"},
    {
        "articleHeading": "Second heading",
        "myArticle": "Second article body"},
    {
        "articleHeading": "Third heading",
        "myArticle": "Third article body"}]
};

Your jQuery would look something like this: 

$(function(){
    $.each($data.data, function(i, data){
        var $article = $('.article').eq(i);
        $article.find('.articleHeading').html(data.articleHeading);
        $article.find('.myArticle').html(data.myArticle); 
    ​});
});

​ Demo: http://jsfiddle.net/Lujew/

Upvotes: 2

SpYk3HH
SpYk3HH

Reputation: 22570

There are several ways you could go about this, the easiest would probably be to create a div where you want the articles, clear it then fill based on data entering in, so that you could do this dynamically via ajax and refresh it every few seconds or what ever.

For instance you might could do it like so:

$("#divID").empty();
for (var i=0;i<data.length;i++) {
    var attrName, value;
    for(var key in data[i]){
        attrName = key;
        value = data[i][key];  
    }
    $("#divID").append(
        $("<p />").addClass("article").append(
            $("<span />").addClass("articleHeading").text(attrName),
            $("<span />").addClass("myArticle").text(value)
        )
    )
}

then use css to handle the font size and bold and such

.articleHeading {
    font-size: 5px;
    font-weight: bold;
}

Upvotes: 1

Related Questions