Как заполнить тег href данными из json и при нажатии использовать выбранное значение в форме для публикации - PullRequest
Новая
       2

Как заполнить тег href данными из json и при нажатии использовать выбранное значение в форме для публикации

0 голосов
/ 09 сентября 2018

надеюсь, у всех вас действительно хороший день. Я сейчас работаю над проектом, и я не могу понять это правильно. У меня есть следующий Json. 

{
"Error":200,
"Fecha":"6/19/2018",
"Nombreag":"Canchas de Tenis",
"Nombretges":"Reserva de cancha",
"horarios":[
    {
        "horaM":"1000",
        "hora":"10:00AM"
    },
    {
        "horaM":"1030",
        "hora":"10:30AM"
    },
    {
        "horaM":"1100",
        "hora":"11:00AM"
    },
    {
        "horaM":"1130",
        "hora":"11:30AM"
    },
    {
        "horaM":"1200",
        "hora":"12:00PM"
    },
    {
        "horaM":"1230",
        "hora":"12:30PM"
    },
    {
        "horaM":"1300",
        "hora":"01:00PM"
    },
    {
        "horaM":"1330",
        "hora":"01:30PM"
    },
    {
        "horaM":"1400",
        "hora":"02:00PM"
    },
    {
        "horaM":"1430",
        "hora":"02:30PM"
    },
    {
        "horaM":"1500",
        "hora":"03:00PM"
    },
    {
        "horaM":"1530",
        "hora":"03:30PM"
    },
    {
        "horaM":"1600",
        "hora":"04:00PM"
    },
    {
        "horaM":"1630",
        "hora":"04:30P.M."
    },
    {
        "horaM":"1700",
        "hora":"05:00P.M."
    }
]

}

И я хотел бы добавить ссылку href, основанную на всех Json внутри horarios. Это для формы HTML, чтобы сделать POST для моего API, я хочу, чтобы «hora» в представлении списка и при нажатии установить значение horaM для использования этого выбора для публикации.

Like this image.

Я знаю, что должен использовать Javascript DOM, как это, но не могу заставить его работать по нажатию href, передать это значение в переменную и пометить его как выбранное.

Я думал, может быть, что-то вроде этого, чтобы получить значение. 

<!DOCTYPE html>
<html>
<body>

<p>
<ul id="loadListview" data-role="listview" data-inset="true" >
  <li><a href="#" id="1200" onclick="myFunction()">12:00PM</a></li>
  <li><a href="#" id="1230" onclick="myFunction()">12:30PM</a></li>  
  <li><a href="#" id="1300" onclick="myFunction()">1:00PM</a></li>  
  <li><a href="#" id="1330" onclick="myFunction()">1:30PM</a></li>  
</ul>

<p id="demo"></p>

<script>
function myFunction() {
    var x = this.href;
    document.getElementById("demo").innerHTML = x;
}
</script>

</body>
</html>

Но я получаю неопределенное значение.

Заранее благодарим за всю вашу любезную помощь, и я очень ценю, что вы нашли время для прочтения этого.

1 Ответ

0 голосов
/ 09 сентября 2018

Чтобы сообщить myFunction, какой a нажат, вам нужно передать this в функцию onclick, чтобы она выглядела следующим образом onclick="myFunction(this)"

<ul id="loadListview" data-role="listview" data-inset="true" >
    <li><a href="#THIS_HREF" data-hora="1200" onclick="myFunction(this)">12:00PM</a> </li>
</ul>
<p id="demo">x</p>

и затем в функцию добавить аргумент a. Также я буду рекомендовать использовать data-{attribute} как так 

<script>
function myFunction(a) {
 var x = a.href; // "a" is the clicked element
 document.getElementById("demo").innerHTML = x;
 console.log(a.dataset.hora) // here is the data-hora attribute
 return false;
}
</script>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...