converting object to string with append method

Question

On my page I have a section containing UL's and each UL gets populated from an array of strings

dealers = [{
    title   : "Brecksville",
    address : "8383 Chippewa Rd.,",
    locale  : "Brecksville, Ohio - 44141",
    phone   : "(440) 740-0535",
    location: {lat: 41.32134300, lng: -81.62338300}
}];

For brevity I only show one of the strings in the array of strings...

This string is populated into the UL like so...

function populatDealerSummaryList(select, dealers) {
    $listSelector = $("#dealersList"); //The Dealer Summary List

    $.each(dealers, function (i, obj) {
        $listSelector.append(
            "<ul class='dealer-summary-list'>" +
            "<li class='dealerName'>" + obj.title + "</li>" +
            "<li class='dealer-summary-listItem'>" + obj.address + "</li>" +
            "<li class='dealer-summary-listItem'>" + obj.locale + "</li>" +
            "<li class='dealer-summary-listItem'>" + obj.location + "</li>" +
            "<li class='dealer-summary-listItem'>" + obj.phone + "</li>" +
            "</ul>");
    });
}

above...the latitude and longitude are represented by obj.location...

the problem is...the lat long only renders as [object, object]

I'm not sure how to pass it correctly to get it to render...please help

How would you expect it to be rendered…? Javascript doesn't know how to turn an object into a string either, other than [object Object]. You'll need to do that a little more manually. — deceze
– deceze ♦, Commented Feb 17, 2017 at 12:42
try it in this way "<li class='dealer-summary-listItem'>" + obj.location.lat +"," +obj.location.lng+ "</li>" + — Muhammed Albarmavi
– Muhammed Albarmavi, Commented Feb 17, 2017 at 12:51

Antonio · Accepted Answer · 2017-02-17 13:17:29Z

4

You get this result because Object method toString() return this output string "[object Object]";

You can write like this:

...>" + JSON.stringify(obj.location) + "<...

Or

...>" + obj.location.lat + ', ' + obj.location.lng + "<...

Look at JSFiddle. There are both approaches

edited Feb 17, 2017 at 13:17

answered Feb 17, 2017 at 12:42

Antonio

9015 silver badges12 bronze badges

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

2 Comments

Antonio Over a year ago

@tony Look at my answer again, I changed it. I added JQuery dependency to your JSFiddle and call initialize after document ready event.

tony Over a year ago

Awesome Antonio...thanks for the help! I was going cross-eyed trying to figure this out.

Dion Zac · Accepted Answer · 2017-02-17 12:46:33Z

1

obj.location is an object that contains two keys inside.

You pass in the <li> element the entire object.

You should just :

"<li class='dealer-summary-listItem'>" + obj.location.lat + " " + obj.location.lng + "</li>"

edited Feb 17, 2017 at 12:46

answered Feb 17, 2017 at 12:45

Dion Zac

698 bronze badges

2 Comments

Mijago Over a year ago

You use obj.location.lng twice. One should be obj.location.lat

tony Over a year ago

@DionZac this doesnot work...please see the JSFiddle jsfiddle.net/tonykiefer/hjwL0v1s

Collectives™ on Stack Overflow

converting object to string with append method

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related