iT邦幫忙

0

如何將 json 格式資料撈出來呈現在input表單中

Rita 2018-04-27 21:18:1610969 瀏覽

目前是使用jquery、AJAX撈JSON的資料出來,將 json 格式資料呈現在下拉式選單中,點選到下拉式選單的選項後,下方的input表單會撈出JSON的資料在表單中

目前寫好了從JSON檔,自動帶入下拉式選單中,但是下方的表單無法撈出來,不知道用什麼方去去寫,完全沒有頭緒

感謝幫忙~~

圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 個回答

1
froce
iT邦大師 1 級 ‧ 2018-04-27 22:10:20

https://www.w3schools.com/js/js_json_parse.asp
用JSON.parse()把字串轉換為物件,再去迭代。
然後利用change事件再送ajax去執行資料庫查詢。

範例碼是直接回收利用產生下拉式選單的obj去做範例
https://jsbin.com/siwavegudu/edit?html,js,output

1
小魚
iT邦大師 1 級 ‧ 2018-04-28 00:15:28

你已經可以呈現在下拉式選單中,
那你所謂的表單式什麼東西?
感覺有點抽象,
既然都可以呈現下拉選單,
類似的方法應該就可以呈現在表單中了。

看更多先前的回應...收起先前的回應...
froce iT邦大師 1 級 ‧ 2018-04-28 01:55:39 檢舉

我猜他是想不到該用什麼事件吧。

小魚 iT邦大師 1 級 ‧ 2018-04-28 13:58:47 檢舉

描述得太籠統了,
至少要詳細一點,
最好有圖做說明,
比較能夠明確回答問題吧。

Rita iT邦新手 5 級 ‧ 2018-04-28 14:47:32 檢舉

就是當點選下拉式選單的選項後,會從JSON撈出資料呈現在下方的表格中,而這個表格是可以做填寫新增資料和從下拉式選單撈出資料呈現在表格中並修改,不知這可否用jquery做出來,目前卡在無法讓變數呈現在表單中。

$select = $('')
let  myData;

    $.getJSON('',function(data){
        myData = data;
        $select.html('');
        for(var i= 0 ; i< data.length ; i++){
            $('select').append('<option id="'+ data[i]['id']+'">' + data[i]['id']+ '&nbsp&nbsp' +data[i]['member_id']+ data[i]['name'] + '</option>');
        }
        error: (function() {
            alert("錯誤");
         });  
    });

    $(document).on('change', '#select', function(){
        var id ;
        $('select option:selected').each(function(){
            id = $(this).attr('id') -1 ;
        });
        $('#member_id').html(myData[id]['member_id']);
        $('#name').html(myData[id]['name']);
        $('#birth').html(myData[id]['birth']);

    });

這是這是目前下拉式選單的JS,但是一直無法在表單顯示,感謝回答~~

小魚 iT邦大師 1 級 ‧ 2018-04-28 15:03:49 檢舉

如果只是要顯示文字,把

$('#member_id').html(myData[id]['member_id']);

改成

$('#member_id').text(myData[id]['member_id']);

不知道是不是你要的?
另外,你結構中的id是從1開始嗎?

Rita iT邦新手 5 級 ‧ 2018-04-28 15:29:44 檢舉

id是從0開始,非常感謝回答~~

小魚 iT邦大師 1 級 ‧ 2018-04-28 18:59:06 檢舉

既然是從0開始,為什麼還要-1,
帶-1進去就會造成錯誤,
JavaScript遇到錯誤就會自動停止執行,
應該是因為這樣所以不會有結果出來吧。

另外,善用 console.log協助偵錯。

froce iT邦大師 1 級 ‧ 2018-04-29 09:33:26 檢舉

另外建議用jsbin之類的把你想做的簡化一下貼出來,有時候光看javascript不能完全理解你要的東西。

感覺你這流程有點問題。每選一次id就要重算?

小魚 iT邦大師 1 級 ‧ 2018-04-29 10:08:16 檢舉

我猜他只是在學習而已,
看起來並不是正式的東西,
正常來說應該沒有人這樣設計的。

我要發表回答

立即登入回答