1

Есть json файл типа:

{
    "b1": [
        "2222",
        "1111"
    ],
    "b2": [
        "33333"
    ]
}

И есть 2 кнопки:

<button class='b1'>button1</button>  
<button class='b2'>button2</button>

Нужно чтобы по нажатию на одну из этих кнопок появлялась только нужная часть json файла

$(".button").click(function () {
        $.getJSON("json/persons.json", function(result, iden){
            $.each(result, function(i, field){
                $("#person").append(field);
            });
        });
    });

Этот скрипт открывает весь файл, а писать на каждую кнопку один и тот же код, который отличается лишь result.b1, result.b2 и result.bN как то не хочется. Как можно решить эту проблему?

3 ответа 3

0

Немного проработал предыдущие ответы, так как считаю, что нет необходимости при каждом клике подгружать повторно файл. Плюс к этому заменил метод .append() на .html(), получается своеобразный переключатель контента из подгруженного файла.

var persons;
var btnSwitch = "button[class*='b']";

$(function() {
    $.getJSON("json/persons.json", function(result) {
        persons = result;
    })
})

$(btnSwitch).click(function () {
    $("#person").html(persons[this.className] || '')
});
1
  • @АзиретКадыкеев а это бабушка на двое сказала, бог его знает, может данные то меняются со временем? 29 апр 2019 в 14:56
0
$(".button").click(function () {
  var $button = $(this);
  $.getJSON("json/persons.json", function(result, iden) {
    $.each(result, function(i, field) {
      if ($button.hasClass(i)) {
        // field here is array, iterate over it if needed
        $("#person").append(field);
      }
    });
  });
});
0

let result = {
    "b1": [
        "2222",
        "1111"
    ],
    "b2": [
        "33333"
    ]
}

$("button").click(function () {
    let c = this.className
    //$.getJSON("json/persons.json", function(result, iden){
        $.each(result, function(i, field){
            $("#person").append(result[c].join(''));
        });
    //});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class='b1'>button1</button>  
<button class='b2'>button2</button>
<div id="person"><div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.