Json Object to Div Html

Question

Here is my Json data

    [Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object]
    0: Object
        From_Id: 5
        Message: "
        ↵   did you have dinner???"
        Started_Date: "2014-07-29 11:29:41"
        To_Id: 5
        Upadted_Date: "2014-07-29 03:29:41"
    __proto__: Object
    1: Object
        From_Id: 5
        Message: "ya i did what about you???
        ↵   "
        Started_Date: "2014-07-29 11:51:41"
        To_Id: 1
        Upadted_Date: "2014-07-29 03:51:41"
    __proto__: Object
    2: Object
    3: Object
    4: Object
    5: Object
    6: Object
    7: Object
    8: Object
    9: Object
    10: Object
    11: Object
    length: 12
    __proto__: Array[0]

I want to add each message from object to div message_data one after other....i have used the code below...so that message_data div contains all the messages....

            var obj = eval(data);

            console.log(obj);
            $.each(obj, function (index,Object) {

                var Id = Object.Message;
                $('#message_data').html(Id).toString();
            });

But it is displaying only the last object message.. how do i fix this???

Note: Iam using this inside timer function so i can not use append ,, which keeps adding same contents after timer seconds...

You are looping and override the underlying html content, so will display only last message. — Wundwin Born
– Wundwin Born, Commented Jul 29, 2014 at 6:22
you are replacing all data in div with the current value that is problem, see my answer. — Mritunjay
– Mritunjay, Commented Jul 29, 2014 at 6:29

Leo · Accepted Answer · 2014-07-29 06:39:35Z

2

The html function replaces whatever is inside the target element. Use the append function instead...

$('#message_data').append(Id);

The only thing you have to do is replace the html function with the append function.

you can even use the index parameter in order to access the current value being enumerated, see below...

       $.each(obj, function (index,Object) {
            var msg = obj[index].message;
            $('#message_data').append(msg);
        });

JS Fiddler Example

edited Jul 29, 2014 at 6:39

answered Jul 29, 2014 at 6:22

Leo

14.9k2 gold badges44 silver badges59 bronze badges

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

4 Comments

Friend Over a year ago

I can not use append because it keeps adding same contents again and again.....I want to load it only once....

Leo Over a year ago

@Friend it's adding the same object again and again because your each function logic is wrong. It has nothing to do with append. I'll update the answer

Friend Over a year ago

your both answers have no issues....but i have same problem... after loading all object contents it loads the data again.. because iam using this inside 'Timer script...' so it has fetch data every 5 seconds....So using html is better then append i gues.. what do u think???

Leo Over a year ago

@Friend obviously, that was the most important piece of information and you omitted it from your question

Mritunjay · Accepted Answer · 2014-07-29 06:21:13Z

1

Problem is because you are replacing innerHTML of div with current object Message in each loop. So in last it just has the last object Message.

Try this

var msg = '';
$.each(obj, function (index,Object) {
    msg += Object.Message;
});

$('#message_data').html(msg).toString();

answered Jul 29, 2014 at 6:21

Mritunjay

25.9k7 gold badges57 silver badges71 bronze badges

Comments

Popsyjunior · Accepted Answer · 2014-07-29 06:51:22Z

0

here's a simple fix:

Don't use eval..

var obj = {};
try {
  obj = JSON.parse(data);
} catch(e) { console.log(e.message); };

"console.debug" function helps you inspect objects better..

console.debug(obj);
$.each(obj, function (index,Object) {
    var msg = Object.Message;
    $('#message_data').append('<p>' + msg.toString() + '</p>');
});

You can also try this: console.debug(obj);

 for(var o in obj) {
    var msg = obj[o];
    $('#message_data').append('<p>' + msg.toString() + '</p>');
 });

Cheers...!

edited Jul 29, 2014 at 6:51

answered Jul 29, 2014 at 6:42

Popsyjunior

3051 silver badge10 bronze badges

1 Comment

Popsyjunior Over a year ago

If you're trying to visualize the process, you can append at intervals.

Collectives™ on Stack Overflow

Json Object to Div Html

3 Answers 3

JS Fiddler Example

4 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related