Retrieving a lookup Value from a List using jquery and REST

Question

I would like to get the lookup Value from a List item depending on it's Title.

My List is set up similar to the following example:

ColumnA : a | b | c
lookupB : 1 | 1 | 2

The jquery:
function getValues(ListName)
{ $.getJSON('http://<pageName>/_vti_bin/ListData.svc/' + ListName + '?', function(data) { $.each(data.d.results, function(index, value) { $('#select').append ($('<option>/option>').val(index).html(value.Titel + value.lookupB)); });
});
}

The #select value is a <select> DropDown Menu and the options are filled correctly with the first value, but the lookup value only consists of [Object object] or undefined after trying different keys.

EDIT: I actually found out by looking into the Array of value.lookupB that I can add a value.lookupB.__deferred. The latter returns an uri pointing to:
http://<page>/_vti_bin/ListData.svc/ColumnA(1)/lookupB
Is there a way to access the information without parsing the JSON again?

Thank you.

Answer 1

I actually found the solution:

function getValues(listName)
{
    $.getJSON('http://<page>/_vti_bin/ListData.svc/' + listName,
        function(data) {
            $.each(data.d.results,
            function(index, value) {
                i++;
                $('#select').append($('<option></option>').val(index).html(value.ID + " : " + value.Titel));
                getLookup(value.ID, value.Titel);
            });
    });
}


function getLookup(idOfChild, valueOfChild)
{
    $.getJSON('http://<page>/_vti_bin/ListData.svc/' + childList + "(" + idOfChild + ")/" + parentList,
        function(data) {
            $.each(data,
            function(index, value) {
                $('#select2').append($('<option></option>').val(index).html(valueOfChild + " : " + value.Titel));
            });
    });
}

The first Dropdown is filled with the IDs and value.Titles from the child List and the second Dropdownlist is filled with value.Title of the child : corresponding value.Title parentlist. It works!
The key to the solution was actually as stated in the edit block of my question.

@ErikB: Thank you for your help, helped me bounce quite well.

Answer 2

How about something like this:

function getLookupFieldValuesFromListByTitle(listTitle, fieldInternalName, callback) {
  var ctx = new SP.ClientContext;
  var field = ctx.get_web().get_lists().getByTitle(listTitle).get_fields().getByInternalNameOrTitle(fieldInternalName);
  ctx.load(field);
  ctx.executeQueryAsync(function() {
    // Is not instanceof SP.FieldLookup
    var lookupListId = $(field.get_schemaXml()).attr('List');
    getItemsByListId(lookupListId, callback);
  }, function(a, b) {
    callback(b);
  });
}

function getItemsByListId(listId, callback) {
  var ctx = new SP.ClientContext;
  var items = ctx.get_web().get_lists().getById(listId).getItems(new SP.CamlQuery());
  ctx.load(items);
  ctx.executeQueryAsync(function() {
    var e = items.getEnumerator();
    var array = [];
    while (e.moveNext()) {
      array.push(e.get_current());
    }
    callback(null, array);
  }, function(a, b) {
    callback(b);
  });
}

It uses ClientContext to get all items from a given list and returns them in an array, so you can loop through them like this:

getLookupFieldValuesFromListByTitle('myList', 'myLookupField', function(err, items) {
  $.each(items, function(i, item) {
    $select.append($('<option>').text(item.get_title()).val(item.get_id()));
  });
});