How to load JSON data based on a dropdown input?

Question

I am new to web development and currently experimenting with HTML forms. I am using Chrome to test out how to show JSON data in a div based on a selection from a tag using jQuery, and my code is not working. When I inspect my webpage, it shows the div for the JSON to load, but the data itself is not there after selecting an element from the dropdown menu. Also, I'm using a stylesheet if that makes any difference. Am I going about this incorrectly?

<json>
    {
        "firstName": "Jason",
        "lastName": "Bourne"
    },
    {
        "firstName": "John",
        "lastName": "McClane"
    }

<html>
    <div id="names">
            <select id ="drop-list">
                <option value="" disabled="disabled" selected="selected">--Select A Name--</option>
                <option>Jason Bourne</option>
                <option>John McClane</option>
    </select>
    </div>

<javascript>
    $(function() {
    
        let names = $('#names');
        dropList.on('select', getDataViaAjax);
    
        function getDataViaAjax(evnt) {
            let request = $.ajax({
                method: 'GET',
                url: 'people.json',
                dataType: 'json',
            });
    
            request.done(function(data) {
                console.log(data);
                let dropList = $('#drop-list');
                for (let person of data) {
                    let newParagraph = $('<p>');
                    newParagraph.text(person.firstName + ' last name ' + person.lastName);
                    dropList.append(newParagraph);
                }
            });
    
            request.fail(function(response) {
                console.log('ERROR:' + response.statusText);
            });
        }
    
    });

Answer 1

I used to use this structure, I thinks its simple but efective, hope it works:

//in your html

<form>
  <select id="filterAgendas">
  </select>
</form>

//In app,js

$.ajax({
  url: 'YourJsonFileLocation',
  type: 'GET',
                  
  success: function(response) {
    console.log(response);
    
    const list = JSON.parse(response);
        
    let filter = '';
    
    list.forEach(list => {

            filter +=    `<option value="${list.id}"> ${list.name}</option>`
    });

    $('#filterAgendas').html(filter);                 
  }
});

//your json file

{
  {
    id: 1,
    name: name1
  },
  {
    id: 2,
    name: name2
  },
}

How to load JSON data based on a dropdown input?

Question

1 answers

solution1
0 ACCPTED 2020-08-16 03:13:19

How to load JSON data based on a dropdown input?

Question

1 answers

solution1 0 ACCPTED 2020-08-16 03:13:19

solution1
0 ACCPTED 2020-08-16 03:13:19