JavaScriptでJSON APIデータを取得して表示する方法

私は初心者のウェブ開発者です。私は、HTML、CSSに基づいてWebアプリケーションを作成しようとしています、とJavaScript、：JavaScriptでJSON APIデータを取得して表示する方法

が
入力フィールドを介してユーザからの入力を受け取るには、結果を表示し
外部APIを使用してJSONデータを取得します。入力フィールドの下に表示されます。

いくつかの調査の後で、私の結論は、Node.js、Bootstrap、Herokuがこれを行うのに適しているということでした。しかし、私は現在、APIからのデータの呼び出しと表示については固執しています。

私のウェブサイト：https://mighty-depths-36862.herokuapp.com
私が呼んしようとしているAPI：API命令でhttp://apis.is/car?number=aa031

は、次のコードは、 "jQueryのデモ" として供給されている：

$.ajax({ 
    'url': 'http://apis.is/car', 
    'type': 'GET', 
    'dataType': 'json', 
    'data': {'number': 'aa031'}, 
    'success': function(response) { 
    console.log(response); 
    } 
});

これを使用して、次の.jsファイルを作成しました。このファイルは、html本文の下にjQueryと一緒に参照しています。

$(document).ready(function() { 
    $.ajax({ 
     'url': 'http://apis.is/car', 
     'type': 'GET', 
     'dataType': 'json', 
     'data': {'number': 'aa031'}, 
     'success': function(response) { 
      console.log(response); 
     } 
    }); 
});

すべてが正しく動作しているようだが、それは、この作品を作るために次に何をすべきかを見つけ出すことになると私は少し失われています：

私は、フィールドからのユーザ入力を取得するにはどうすればよいとそれをAPIクエリに入れますか？
クエリの結果をテーブルに挿入するにはどうすればよいですか？

ありがとうございました！

出典

2017-09-07 nemesis

以下のスニペットを参照してください、それが役に立てば幸い：

<script 
    src="https://code.jquery.com/jquery-2.2.4.min.js" 
    integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" 
    crossorigin="anonymous"></script>

出典

2017-09-07 19:07:46 sribasu

-1

これを基本フローとして試してください。フィールドsearchのinputフィールドを作成し、イベントリスナを与えます。 jQueryを使用しているように見えるので、javascriptでこれを行うことができます。あなたが入力したときにヒット

$("#search").keydown(e => { 
    if (e.which === 13) { 
    callApi($("#search").val()) 
    } 
})

、これはあなたの入力ボックスにあるどのような値取り、あなたのcallAPI()関数に値として渡します。その値を受け入れ、その値でajax呼び出しを行うcallAPI(value)関数を作成します。そしてsuccessに - 結果をあなたのhtml要素に追加します。

上記のフローは、ボタンを作成し、そのボタンをクリックしてリクエストを送信したい場合には、非常によく似ています。

出典

2017-09-07 18:44:17

ここには2つの部分があります。誰かがページに入力した情報を使用してAPIに送信されるリクエストをカスタマイズするにはどうしたらいいですか？

最初の部分については、本当に近いです。送信したい番号を入力するには、入力フィールドが必要です。スニペットのコメントで、これがどのように配置されているかを見ることができます。それを送信するためにボタンを使用する必要はありませんが、これは私がここでやったやり方です。第二部のために

// this function will accept inputText as an argument, which you can then use inside your ajax call, like you see below right next to 'number' 
 
function getAPIData(inputText) { 
 
    $.ajax({ 
 
    'url': 'https://apis.is/car', 
 
    'type': 'GET', 
 
    'dataType': 'json', 
 
    'data': {'number': inputText}, 
 
    'success': function(response) { 
 
     console.log(response); 
 
    }, 'error': function(response) { 
 
     console.log(response.statusText); 
 
    } 
 
    }); 
 
}; 
 

 
$("#check-api").click(function() { 
 
    // our inputText is going to be equal to the value of the input field 
 
    var inputText = $("#api-input-field").val(); 
 
    
 
    // then, as long as our input field isn't blank, let's call that function above and pass in the inputText as an argument 
 
    if (inputText !== "") { 
 
    getAPIData(inputText); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<h5>Type in a number here and click the button to see a console log message appear.</h5> 
 
<input id="api-input-field" type="text"> 
 
<button id="check-api">Check API</button>

、あなたはJSONデータをまだ何を試してみましたか？あなたは、javascriptで物事を反復する方法を知っていますか？私はあなたもそこにお手伝いすることは絶対に喜んでいますが、あなたが得ることができるかどうかを見るためには、最初にいくつかのことを最初に試してみてください。あなたはそれまでこれまで行ってきた方法の例はありますか？私は、フィールドからのユーザー入力を取得し、APIのクエリでそれを置くことができますどのように

出典

2017-09-07 19:03:03

ありがとう：

$(document).ready(function() { $('.form-group input').keypress(function(e) { if (e.which === 13) { //search triggers when Enter key is pressed in the textbox $.ajax({ 'url': 'http://apis.is/car', 'type': 'GET', 'dataType': 'json', 'data': { 'number': $('.form-group input').val() }, 'success': function(response) { if (response.results) { var html = ''; for (var i = 0; i < response.results.length; i++) { html += '<table><thead class="thead-default"> <tr> <th>Reitur</th> <th>Gildi</th> </tr> </thead>'; html += '<tr><td>Tegund</td><td>' + response.results[i].type + '</td></tr>'; html += '<tr><td>Undirgerð</td><td>' + response.results[i].subType + '</td></tr>'; html += '<tr><td>Litur</td><td>' + response.results[i].color + '</td></tr>'; html += '<tr><td>Verksmiðjunúmer</td><td>' + response.results[i].factoryNumber + '</td></tr>'; html += '<tr><td>Skráður</td><td>' + response.results[i].registeredAt + '</td></tr>'; html += '<tr><td>Mengun</td><td>' + response.results[i].pollution + '</td></tr>'; html += '<tr><td>Þyngd</td><td>' + response.results[i].weight + '</td></tr>'; html += '<tr><td>Skoðunarstaða</td><td>' + response.results[i].status + '</td></tr>'; html += '<tr><td>Næsta skoðun</td><td>' + response.results[i].nextCheck + '</td></tr>'; html += '</table><p>&nbsp</p>'; } $('#results').html(html); } } }); } }); });

あなたはjQueryのJSは、上記のスクリプトが含まれる位置の前に自分のページに追加していることを確認します有益な返答のために。私はCodeCademy/FreeCodeCampのチュートリアルから始めましたが、多くの人はビルドを始めてみることを勧めました。だから、私はこのプロジェクトをHTML/CSSについてよく理解して始めましたが、JavaScriptはほとんどありませんでした。私は続行する前にチュートリアルに戻ります。目的はここではさまざまな回答のコードを理解し、自分で何かを書くことになります。 – nemesis

$(document).ready(function() { 
 
    function request(s){ 
 
    $.ajax({ 
 
    'url': '//apis.is/car', 
 
    'type': 'GET', 
 
    'dataType': 'json', 
 
    'data': { 
 
     'number': s 
 
    }, 
 
    'success': function(response) { 
 
     // console.log(response); 
 
     if (response && response.results && response.results.length) { 
 
     response.results.forEach((car) => { 
 
      Object.keys(car).forEach((key) => { 
 
      $('<div>').html(`${key} : ${car[key]}`).appendTo($('body')); 
 
      }); 
 
     }); 
 
     } 
 
    } 
 
    }) 
 
    } 
 

 
$('#search').click(() => { 
 
    request($('#val').val()); 
 
}); 
 
});

<html> 
 

 
<head> 
 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
</head> 
 

 
<body> 
 
    <input id="val" placeholder="Type here" type="text"> 
 
    <button id="search">Search</button> 
 
</body> 
 

 
</html>

出典

2017-09-07 19:05:47 bluehipy

？

あなたはjQueryのを使用していると、#セレクタを使用すると、入力のidを探しているとinput_idは、入力の実際のIDであることを意味$("#input_id").val()を、してみてください。その後、関数val()を取得します。

#ではなく、.を使用して入力のクラスを使用することもできます。私はあなたに詳しい情報を得ることをお勧めしますhere。

あなただけの変更、既にAJAXを持っていたとしてvar value = $("#input_id").val()

をやって、VARに保存することができます：

$(document).ready(function() { 
$.ajax({ 
    'url': 'http://apis.is/car', 
    'type': 'GET', 
    'dataType': 'json', 
    'data': {'number': value}, 
    'success': function(response) { 
     console.log(response); 
    } 
})});

ため
$(document).ready(function() { 
$.ajax({ 
    'url': 'http://apis.is/car', 
    'type': 'GET', 
    'dataType': 'json', 
    'data': {'number': 'aa031'}, 
    'success': function(response) { 
     console.log(response); 
    } 
})}); 
を、私は挿入するにはどうすればよいですテーブルのクエリの結果ですか？

あなたがやっている console.log(response);あなたは同じように、jQueryのから .append APIを使用することができます。これは、あなたのAPIから受信した車のタイプの段落を追加します $("inner").append("<p>response.results[0].type</p>"); 。 responseはオブジェクトであり、ほかのオブジェクトと同じようにプロパティにアクセスできます。追加の詳細については、 thisを参照してください。

私は1つのアドバイスでそれを終了します：あなたが今始まるとノードを使用していたように、いくつかのJavaScriptフレームワークを試してみてください、などとしてVue.jsまたはを反応させ、ES6のパワーをお楽しみください。最初はVue.jsが簡単です。このことはあなたの人生を変えるでしょう。あなたの開発に幸運！ ;）

出典

2017-09-07 19:07:44

ありがとうございます。私はこれらのフレームワークを少し調べました。 Vueの "Getting Started"ガイドには、実際に検索されたデータをコードワイズで追加するための最も簡単なソリューションがあります。私もそれを試してみましょう！ – nemesis

JavaScriptでJSON APIデータを取得して表示する方法

答えて

関連する問題