Display both values from SharePoint lookup field

Katia_LT

I'm displaying data from list Orders. In that list there is lookup column City from the list Cities and it allows multiple values.

So there is one order with two assigned cities and I want to display both cities for that order in the DataTable.

Data from ajax call looks like this:

                "city": {
                    "results": [
                        {
                            "__metadata": {
                                "id": "8f8c6144-961a-40a3-a9ea-618a78763697",
                                "type": "SP.Data.CitiesListItem"
                            },
                            "Title": "New york",
                            "abbr": "NY"
                        },
                        {
                            "__metadata": {
                                "id": "e85e25ce-807d-457d-a629-c3e1b0ce45ef",
                                "type": "SP.Data.CitiesListItem"
                            },
                            "Title": "Los Angeles",
                            "abbr": "LA"
                        }
                    ]
                },

This code displays only one city (the first one):

d.city.results[0].Title

this code displays the second one :

 d.city.results[1].Title

To display both cities, I use

d.city.results[0].Title + '; ' + d.city.results[1].Title 

and it works but when order has only one city, I'm getting error "Uncaught TypeError: Cannot read properties of undefined (reading 'Title')".

Don't know what to try next... Any ideas?

kthorngren

Use columns.render to iterate the cities.results array to build the desired output. Here is an example based on your data:
https://live.datatables.net/pabupaqi/1/edit

Kevin

Katia_LT

Thank you very much!!!

As I use it in the function and not directly in Datatable so I moved your render function and used it like this:

<..>
function format(d) {
    return
    '<div><b>city:</b>'+ RendCities(d.city) + '</div>'; 
 }

function RendCities(data) {
        var html = [];
        var cities = data.results;
        for (i=0; i<cities.length; i++) {
          html.push(cities[i].Title);
        }
        return html.join('; ');
}