Home > Back-end >  Why I Can't Write Objects in <li> Tag
Why I Can't Write Objects in <li> Tag

Time:05-20

When I writing my JSON data to

  • HTML tag it's writing but don't write object. It's write [object Object]:

    ○Data1     ○wash dishes         ○[object Object]
               ○find some break     ○[object Object]
    

    I'm trying to do

  • lists with pointing JSON database but it's looks like that. I'm calling my JSON with that code:

    var db_note = objpick(data);
    
    db_note.date.forEach(function(element) {
    tabledatednote.insertAdjacentHTML( 'beforeend',"<li>"   element   " </li>");
    /* I just writed to this part because is just changing "no_date.>date<" part while displaying other JSONs */
    });
    

    objpick.js is an external file

    function objpick(data){
    for(i in data){ var result = data[i] }
    return result
    };
    

    and there is my JSON database

    {
    "nodate": ["wash dishes", "find some bread"],
    "date": [{"01/01/2077" : "Cyberpunk Meet"}, {"25/05/2005" : "Buney?"}],
    "bookmark" : ["Data1"]
    }
    
  • CodePudding user response:

    Ultimately what's being displayed is a string. So the code converts whatever you want to display to a string. For simple values, this conversion is easy. It's consistent and obvious what the resulting string is for a single value.

    But objects are not simple values. They are potentially complex. And unless otherwise defined on your object(s), the default string representation for an object is: [object Object]

    Some of the things you are display are values:

    "find some bread"
    

    But some of them are objects:

    {"25/05/2005" : "Buney?"}
    

    For the objects, you'd need to tell the code how to display it. Some options I can think of are:

    • Manually. For example, check if a certain property exists on the object and, if it does, display that property's value.
    • JSON-encode the object and display the resulting JSON string.
    • Override .toString() on your object(s).

    Which you choose is up to you, and for the same reason that you're seeing the current default behavior... Because only you know how you want/expect that object to be displayed.

    • Related