javascript - How to put JSON content into <ul> tag and form in HTML

I convert java map into JSON map (JSON is saved in file) like that:

{"Luigi":{"name":"Luigi","cf":"lg","pi":"123","telephone":"333","website":"site.it","sector":"Engineer","address":"Italy"},"Davide":{"name":"Davide","cf":"dvd","pi":"123456789","telephone":"755921","website":"mysite.it","sector":"Software developer","address":"Italy"}}

In my jsp I have a form with the same fields of the JSON map (name, cf, telephone..).

I would to put all keys of JSON map (Luigi and Davide) into an unordered list. Like that:

<ul> 
    <li>Luigi</li> 
    <li>Davide</li>
</ul>

When I click on one of them, I would that the respective values were put into the form.

I was thinking about jQuery to do that.

Update, form code:

<form>                        
    <div class="form-group">
        <label class="form-control">Customer Name:</label>
        <input id="nameCustomer" class="form-control" type="text" placeholder="Name customer" autofocus>
    </div>
    <div class="form-group">
        <label class="form-control">Fiscal Code:</label>
        <input id="fiscalCode" class="form-control" type="text" placeholder="Fiscal code">
    </div>
    <div class="form-group">
        <label class="form-control">VAT Number:</label>
        <input id="vat" class="form-control" type="text" placeholder="VAT number (if available)">
    </div>
    <div class="form-group">
        <label class="form-control">Phone:</label>
        <input id="telephone" class="form-control" type="text" placeholder="Phone number">
    </div>
    <div class="form-group">
        <label class="form-control">E-Mail:</label>
        <input id="email" class="form-control" type="text" placeholder="E-Mail address">
    </div>
    <div class="form-group">
        <label class="form-control">Website:</label>
        <input id="website" class="form-control" type="text" placeholder="Customer's Website (if available)">
    </div>
    <div class="form-group">
        <label class="form-control">Address:</label>
        <input id="address" class="form-control" type="text" placeholder="Customer's Address">
    </div>
    <div class="form-group">
        <label class="form-control">Sector:</label>
        <input id="sector" class="form-control" type="text" placeholder="Sector">
    </div>
    <input id="createCustomer" type="button" class="btn btn-default" style="text-align: center" value="Save Data" />
        <input class="btn btn-default" type="reset" value="Clear Form">
                    </form>

I convert java map into JSON map (JSON is saved in file) like that:

{"Luigi":{"name":"Luigi","cf":"lg","pi":"123","telephone":"333","website":"site.it","sector":"Engineer","address":"Italy"},"Davide":{"name":"Davide","cf":"dvd","pi":"123456789","telephone":"755921","website":"mysite.it","sector":"Software developer","address":"Italy"}}

In my jsp I have a form with the same fields of the JSON map (name, cf, telephone..).

I would to put all keys of JSON map (Luigi and Davide) into an unordered list. Like that:

<ul> 
    <li>Luigi</li> 
    <li>Davide</li>
</ul>

When I click on one of them, I would that the respective values were put into the form.

I was thinking about jQuery to do that.

Update, form code:

<form>                        
    <div class="form-group">
        <label class="form-control">Customer Name:</label>
        <input id="nameCustomer" class="form-control" type="text" placeholder="Name customer" autofocus>
    </div>
    <div class="form-group">
        <label class="form-control">Fiscal Code:</label>
        <input id="fiscalCode" class="form-control" type="text" placeholder="Fiscal code">
    </div>
    <div class="form-group">
        <label class="form-control">VAT Number:</label>
        <input id="vat" class="form-control" type="text" placeholder="VAT number (if available)">
    </div>
    <div class="form-group">
        <label class="form-control">Phone:</label>
        <input id="telephone" class="form-control" type="text" placeholder="Phone number">
    </div>
    <div class="form-group">
        <label class="form-control">E-Mail:</label>
        <input id="email" class="form-control" type="text" placeholder="E-Mail address">
    </div>
    <div class="form-group">
        <label class="form-control">Website:</label>
        <input id="website" class="form-control" type="text" placeholder="Customer's Website (if available)">
    </div>
    <div class="form-group">
        <label class="form-control">Address:</label>
        <input id="address" class="form-control" type="text" placeholder="Customer's Address">
    </div>
    <div class="form-group">
        <label class="form-control">Sector:</label>
        <input id="sector" class="form-control" type="text" placeholder="Sector">
    </div>
    <input id="createCustomer" type="button" class="btn btn-default" style="text-align: center" value="Save Data" />
        <input class="btn btn-default" type="reset" value="Clear Form">
                    </form>

Share Improve this question edited Jun 16, 2015 at 10:12 asked Jun 16, 2015 at 10:00 Dave 1,5125 gold badges31 silver badges49 bronze badges

Where is the markup for your form? And how would you match each key in the user object to the form elements? – Terry Commented Jun 16, 2015 at 10:04
1 Parse JSON and loop through it, Get name and append it to <li>! – Dhaval Marthak Commented Jun 16, 2015 at 10:04
1 You will have to show what you tried or people may downvote your post. – kockburn Commented Jun 16, 2015 at 10:04
@Terry, sorry. Now I update the post with form code. – Dave Commented Jun 16, 2015 at 10:08
@Dhaval Marthak, ok, but I need to take the key first. – Dave Commented Jun 16, 2015 at 10:08

| Show 1 more ment

3 Answers 3

Sorted by: Reset to default 5

The strategy is simple:

Use $.each() to loop through your object, and insert the key into the unordered list. Insert key value in data attribute for future reference
Bind click events to the list items. Retrieve key value from data attribute and loop through the object associated with the key
Populate form inputs, identified by ID, using key-value pairs from each object associated with the user

Note that however, there are mismatches between the input IDs and certain keys in your JSON file:

namein JSON but nameCustomer in form.
cf, pi are present in the JSON form but are not mapped to any form input elements.

var userData = {
  "Luigi": {
    "name": "Luigi",
    "cf": "lg",
    "pi": "123",
    "telephone": "333",
    "website": "site.it",
    "sector": "Engineer",
    "address": "Italy"
  },
  "Davide": {
    "name": "Davide",
    "cf": "dvd",
    "pi": "123456789",
    "telephone": "755921",
    "website": "mysite.it",
    "sector": "Software developer",
    "address": "Italy"
  }
};

// Get usernames
$.each(userData, function(key, value) {
  $('#users').append('<li data-user="' + key + '">' + key + '</li>');
});


// Bind click event to list items
$(document).on('click', '#users > li', function() {
  var user = $(this).data('user');
  $.each(userData[user], function(key, value) {
    $('form').find('#' + key).val(value);
  });
});

#users li {
  cursor: pointer;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="users"></ul>
<form>
  <div class="form-group">
    <label class="form-control">Customer Name:</label>
    <input id="nameCustomer" class="form-control" type="text" placeholder="Name customer" autofocus>
  </div>
  <div class="form-group">
    <label class="form-control">Fiscal Code:</label>
    <input id="fiscalCode" class="form-control" type="text" placeholder="Fiscal code">
  </div>
  <div class="form-group">
    <label class="form-control">VAT Number:</label>
    <input id="vat" class="form-control" type="text" placeholder="VAT number (if available)">
  </div>
  <div class="form-group">
    <label class="form-control">Phone:</label>
    <input id="telephone" class="form-control" type="text" placeholder="Phone number">
  </div>
  <div class="form-group">
    <label class="form-control">E-Mail:</label>
    <input id="email" class="form-control" type="text" placeholder="E-Mail address">
  </div>
  <div class="form-group">
    <label class="form-control">Website:</label>
    <input id="website" class="form-control" type="text" placeholder="Customer's Website (if available)">
  </div>
  <div class="form-group">
    <label class="form-control">Address:</label>
    <input id="address" class="form-control" type="text" placeholder="Customer's Address">
  </div>
  <div class="form-group">
    <label class="form-control">Sector:</label>
    <input id="sector" class="form-control" type="text" placeholder="Sector">
  </div>
  <input id="createCustomer" type="button" class="btn btn-default" style="text-align: center" value="Save Data" />
  <input class="btn btn-default" type="reset" value="Clear Form">
</form>

Use jQuery and dna.js to make a clickable list of customers that populates the HTML form with each click.

Setup the libraries:

<link rel=stylesheet href="https://cdn.jsdelivr/dna.js/latest/dna.css">
<script src="https://cdn.jsdelivr/jquery/latest/jquery.min.js"></script>
<script src="https://cdn.jsdelivr/dna.js/latest/dna.min.js"></script>

Create two templates (one for the list of customers and one for the form):

<ul> 
    <li id=customer class=dna-tempalte
       data-click=populateForm>~~name~~</li> 
</ul>
<div>
<form id=customer-form class=dna-template>                        
   <div class=form-group>
      <label class=form-control>Customer Name:</label>
      <input id=nameCustomer class=form-control
         placeholder="Name customer" autofocus value=~~name~~>
   </div>
   <div class=form-group>
      <label class=form-control>Fiscal Code:</label>
      <input id=fiscalCode class=form-control
         placeholder="Fiscal code" value=~~cf~~>
   </div>
   <div class=form-group>
      <label class=form-control>VAT Number:</label>
      <input id=vat class=form-control
         placeholder="VAT number (if available)" value=~~pi~~>
   </div>
   <div class=form-group>
      <label class=form-control>Phone:</label>
      <input id=telephone class=form-control
         placeholder="Phone number" value=~~telephone~~>
   </div>
   <input id=createCustomer type=button class="btn btn-default" value="Save Data">
   <input class="btn btn-default" type=reset value="Clear Form">
</form>
</div>

In the JavaScript, convert the raw JSON into an array for easier handling and fill in the templates:

var raw = {"Luigi":{"name":"Luigi","cf":"lg","pi":"123","telephone":"333","website":"site.it","sector":"Engineer","address":"Italy"},"Davide":{"name":"Davide","cf":"dvd","pi":"123456789","telephone":"755921","website":"mysite.it","sector":"Software developer","address":"Italy"}};
function customer(name) { return raw[name]; }
var customers = Object.keys(raw).map(customer);  //convert to array

function populateForm(elem) {  //called on each click
   var model = dna.getModel(elem);
   dna.clone('customer-form', model, { empty: true });
   }
dna.clone('customer', customers);  //clickable customer list

Note that I'm a dna.js contributor.

Fiddle with the code:
http://jsfiddle/ggphr0ro/5/

Iterate your JSON object, then add an <li> for every element:

var jsonObject = '{"Luigi":{"name":"Luigi","cf":"lg","pi":"123","telephone":"333","website":"site.it","sector":"Engineer","address":"Italy"},"Davide":{"name":"Davide","cf":"dvd","pi":"123456789","telephone":"755921","website":"mysite.it","sector":"Software developer","address":"Italy"}}';

$(function() {
  $.each($.parseJSON(jsonObject), function(key,value){
    $("#myUl").append("<li>"+key+"</li>");
  });
});

<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="myUl"></ul>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - How to put JSON content into <ul> tag and form in HTML - Stack Overflow

3 Answers 3

与本文相关的文章

评论列表(0)