Контрольные значения доступа (карта) из файла Javascript

Question

Я сохраняю все свои данные в map и теперь имею проблемы с доступом к ним из отдельного JS-файла.

На моей (индексной странице) у меня есть 2 таблицы. Таблица LHS отображает список доступных инструкций, а RHS отображает всю подробную информацию о выбранных инструкциях.

Другими словами, когда пользователь нажимает на ID # 1 на столе LHS, таблица RHS будет отображать всю информацию Инструкции только для этого идентификационного номера.

Я добавил функцию onclick к ID в таблице LHS. Код в index.gsp:

<tbody> 
     <g:each in="${deliveryInstructions}">       
      <tr> 
       <td id="instruction_ID"> 
        <a href="#" onclick="display_DI_details(${it.id})">${it.id}</a> 
       </td> 
       <td>${it.deliveryName}</td> 
       <td>${it.bankName}</td> 
       ... 
       ... 
       ... 
      </tr> 
     </g:each> 
</tbody> 

И в моем JS файл я (получил представление JSON из here):

function display_DI_details(id) { 
    var deliveryID = id; 
    var deliveryInstructions = ${deliveryInstructions.encodeAsJson()}; 

    document.getElementById('diName').innerHTML = ${deliveryInstructions.deliveryName} 
    document.getElementById('diID').innerHTML = ${deliveryInstructions.id} 
    document.getElementById('fundingAccount').innerHTML = ${deliveryInstructions.fundingAccountNumber} 
    ... 
    ... 
    ... 
    document.getElementById('beneficiary').innerHTML = ${deliveryInstructions.beneficiary} 
    document.getElementById('comments').innerHTML = ${deliveryInstructions.comments} 
} 

document.getElementById("display-di-list").innerHTML = display_DI_details(id); 

Снова в index.gsp это то, что я за столом РИТ ...

<div id="display-di-list"> 
    <!-- <g:each in="${deliveryInstructions}"> --> 
     <label>Delivery Name: <p class="receiptData" id="diName"></p></label> 
     <label>Delivery ID: <p class="receiptData" id="diID"></p></label> 
     <label>Funding Account: <p class="receiptData" id="fundingAccount"></p></label> 
     ... 
     ... 
     ... 
     <label>Beneficiary: <p class="receiptData" id="beneficiary"></p></label> 
     <label>Comments: <p class="receiptData" id="comments"></p></label> 
    <!-- </g:each> --> 
</div> 

Наконец, в файле controller:

def index() { 
    [deliveryInstructions: DeliveryInstruction.list()] 
} 

Теперь у меня возникли проблемы со связью нескольких точек, чтобы закончить это. В моем файле JS, как я могу заставить его только захватить значения параметров переданного ID (скажем, в этом случае идентификационный номер равен 1)? Большое спасибо за вашу помощь & время !!

Answer 1

Grails объект в переменной Javascript:

var deliveryInstructions = ${deliveryInstructions.encodeAsJson()}; 

Производит недопустимый для меня JSON, я считаю, что разница (если ваш путь работает) имеет отношение к версии Grails используется. я имел счастье окружают encodeAsJson с тегом, предписывающую Grails не избежать кавычки:

<g:applyCodec encodeAs="none"> 
    var deliveryInstructions = ${deliveryInstructions.encodeAsJson()}; 
</g:applyCodec> 

Игнорирование этого, если ваш путь уже работает, вы можете проверить, посмотрев на вырабатываемой HTML.

---

В вашей функции, если у вас есть id и массив объектов, deliveryInstructions, вы можете просто использовать яваскрипт функцию, чтобы получить соответствующий элемент в массиве

var matchingDeliveryInstruction = deliveryInstructions.find(function(element){ 
    return element.id == id; 
}); 

Теперь, просто использовать matchingDeliveryInstruction установить HTML правого в:

document.getElementById('diName').innerHTML = matchingDeliveryInstruction.deliveryName; 
document.getElementById('diID').innerHTML = matchingDeliveryInstruction.id; 
... 
etc. 

Я большой поклонник использования .js библиотеки для таких вещей, но в зависимости от того, как много крупа Возможно, ваш проект может быть излишним.

---

Дополнительно: После снова глядя на свой вопрос, вы упоминаете отдельный файл .js.${...} будет работать только в вашем gsp. Вы можете оставить свой внешний .js файл (хорошая практика), но вам нужно будет иметь это в вашем GSP:

<script> 
    var deliveryInstructions = ${deliveryInstructions.encodeAsJson()}; 
</script> 

Основываясь на том, что генерируется, вам, возможно, придется еще обернуть это с <g:applyCodec encodeAs="none">. Теперь это создаст глобальную переменную deliveryInstructions, которая будет доступна в вашем внешнем файле.