Je suis vraiment nouveau sur json, et j'essaie d'afficher des informations à partir des données json, via select. C'est possible??

[
{
  "id": 1,
  "country": "Spain",
  "more": [
      {
        "city": "Barcelona",
        "age": 1992,
        "language": "catalan",
      },
      {
        "city": "Madrid",
        "age": 2001,
        "language": "spanish",
      }
  ]
},
{
"id": 2,
"country": "Portugual",
"more": [
    {
      "city": "Porto",
      "age": 2009,
      "language": "portuguese",
    },
    {
     "city": "Madeira",
     "age": 1997,
     "language": "portuguese",
    }
  ]
}
]

Donc, j'ai une sélection qui fonctionne avec ce fichier .js:

var json = '[{"id":1,"country":"Spain","more"[{"city":"Barcelona","age":1992,"language":"catalan",},{"city":"Madrid","age":2001,"language":"spanish",}]},{"id":2,"country":"Portugual","more":[{"country":"Porto","age":2009,"language":"portuguese",},{"country":"Madeira","age":1997,"language":"portuguese",}]}]';

var items = JSON.parse(json);
var $selectElement = $("#list");

$(items).each(function(){
  var option = '<option value="' + this.id + '">' + this.city + '</option>';
  $selectElement.append(option);
});

C'est mon HTML

<div class="form-group">
  <label>Select the city:</label>
  <select class="form-control" id="list" name="list"> 
  </select>
</div>

<div id="info">
  <h1><span class="city">  </span></h2>
  <h2><span class="age"> </span></h2>
  <h3><span class="language">  </span></h3>
</div>

Et maintenant je voudrais faire quand sélectionner le pays, remplir une information HTML "plus" -de json-, et changer quand je change l'option dans une sélection. Je serai reconnaissant si quelqu'un peut m'aider!

EDIT - Toutes les réponses fonctionnent parfaitement. J'ai accepté la question que j'ai choisi d'utiliser! -- Merci!

-2
jhonleg 10 août 2016 à 00:45

3 réponses

Meilleure réponse

Votre JSON est un tableau avec un objet avec un tableau avec un objet. Par conséquent, vous devez parcourir les tableaux pour obtenir les valeurs dont vous avez besoin pour l'option sélectionnée. Ce Fiddle devrait fonctionner.

 $('body').on('change', '#list', function() {
  var selectedOption = this.value;
  $(items).each(function() {
    if (this.id.toString() === selectedOption) {
      $('#info').html(returnData(this.more));
      return;
    }
  })
})

var returnData = function(arr) {
  var t = '';
  console.log(arr)
  $(arr).each(function() {
    var objKeys = Object.keys(this);
    console.log(objKeys)
    var s = ''
    for (var i = 0; i < objKeys.length; i++) {
      s += '<h' + (i + 1) + '><span class="' + objKeys[i] + '">' + this[objKeys[i]] + '</span></h' + (i + 1) + '>';
      console.log(s, objKeys[i])
    }
    t += s;
  });
  return t;
}
0
Akash Rajbanshi 10 août 2016 à 01:42

Vous pouvez utiliser cette méthode pour parcourir et obtenir la valeur de more:

$("#list").on('change', function() {
  var id = $(this).val();
  $('#info').empty();
  $(items).each(function() {
    if (this.id == id) {
      $(this.more).each(function() {
        $('#info').append('<h1><span class="city">' + this.city + ' </span></h1>' +
          '<h2><span class="age"> ' + this.age + '</span></h2>' +
          '<h3> <span class="language">' + this.language + '  </span></h3>');
      });
    }
  });
});

Voici le violon fonctionnel. Et c'est le moyen le plus simple de le faire.

0
Akash Rajbanshi 9 août 2016 à 22:37

Soit vous avez besoin de plus d'un select, soit vous devez combiner les informations sur le pays avec les informations sur la ville (avec deux boucles) si vous souhaitez utiliser un select. Voici comment utiliser deux éléments select:

var items = [{
  "id": 1,
  "country": "Spain",
  "more": [
      {
        "city": "Barcelona",
        "age": 1992,
        "language": "catalan",
      },
      {
        "city": "Madrid",
        "age": 2001,
        "language": "spanish",
      }
  ]
},
{
"id": 2,
"country": "Portugual",
"more": [
    {
      "city": "Porto",
      "age": 2009,
      "language": "portuguese",
    },
    {
     "city": "Madeira",
     "age": 1997,
     "language": "portuguese",
    }
  ]
}],
    opt  = $('<option/>'),
    sel  = $('#list'),
    city = $('#city'),
    info = $('#info');

$.each( items, function(i, item) {
    opt.clone().val( item.id ).text( item.country ).data('cities', item.more).appendTo( sel );
});

sel.on('change', function() {
    city.empty();
    var data = $('option:selected',this).data('cities');
    $.each( data, function(j, cty) {
        opt.clone().val( j ).text( cty.city ).data('city', cty).appendTo( city );
    });
    city.change();
})
.change();

city.on('change', function() {
    var cityData = $('option:selected',this).data('city');
    info.find('.city').html( cityData.city );
    info.find('.age').html( cityData.age );
    info.find('.language').html( cityData.language );
})
.change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-lg-2 form-group">
  <label for="sel1">Select Country:</label>
  <select class="form-control" id="list" name="list"> 
  </select>
</div>

<div class="col-lg-2 form-group">
  <label for="sel1">Select the city:</label>
  <select class="form-control" id="city" name="city"> 
  </select>
</div>

<div class="col-lg-2 info" id="info">
  <h1><span class="city">  </span></h2>
  <h2><span class="age"> </span></h2>
  <h3> <span class="language">  </span></h3>
</div>
0
PeterKA 9 août 2016 à 23:23