У меня есть json-файл, и когда я нажимаю кнопку

Question

У меня есть json-файл, и когда я нажимаю кнопку, он отображает только последние данные json (Ipsum% 40). Но я хочу разобрать этот путь; он должен отображать "Lorem" в #choice1div и "Ipsum" в #choice2div. Как я могу это сделать? Вот мои коды ниже;

JS:

$("#getdata-button").click(function() { 
    $.getJSON('json_data.txt', function(read_data) { 
    $.each(read_data.result, function(i, data) { 
     $("#choice1").html(data.option + data.percent); 
     $("#choice2").html(data.option + data.percent); 
    }); 
    }); 
}); 

HTML:

<button id="getdata-button">hello</button> 
<div id="choice1"></div><br> 
<div id="choice2"></div> 

JSON:

{ 
    "result": [{ 
    "option": "Lorem", 
    "percent": " %50" 
    }, { 
    "option": "Ipsum", 
    "percent": " %32" 
    }] 
} 

Answer 1

Во-первых, вместо сохранения файла в качестве json_data.txt, сохраните его как json_data.json. Обновите свой URL-адрес $.getJSON, чтобы найти его.

Во-вторых, в этом случае вам, вероятно, не нужно использовать $.each. Это позволит решить вашу проблему:

$("#getdata-button").click(function() { 
    $.getJSON('json_data.txt', function(read_data) { 
     $('#choise1').html(read_data.result[0].option + read_data[0].percent); 
     $('#choise2').html(read_data.result[1].option + read_data[1].percent); 
    }); 
}); 

Если вы на самом деле нужно использовать $.each, то это, как вы могли бы сделать это:

$("#getdata-button").click(function() { 
    $.getJSON('json_data.txt', function(read_data) { 
     $.each(read_data.result, function(i, data) { 
      $('#choise' + (i + 1)).html(data.option + data.percent) 
     }); 
    }); 
}); 

Answer 2

Для каждого элемента в объекте, вы set choise1 и choise2 к этому значению. Поэтому во второй раз, когда он вызывает эту функцию $ .each, она переопределяет choise1 и choise2 с этим значением. Вы должны сделать следующее:

$("#getdata-button").click(function() { 
    $.getJSON('json_data.txt', function(read_data) { 
    $("choise1").val(read_data[0].option + read_data[0].percent); 
    $("choise2").val(read_data[1].option + read_data[1].percent); 
    }); 
}); 

Это должно работать. Если нет, скажите, пожалуйста. Не стесняйтесь использовать этот код в любой форме для любой цели.

Привет,

Макс

Answer 3

$("#getdata-button").click(function() { 
    $.getJSON('json_data.txt', function(read_data) { 
     $("#choise1").html(read_data.result[0].option + read_data.result[0].percent); 
     $("#choise2").html(read_data.result[1].option + read_data.result[1].percent); 
    }); 
}); 

Возможно, самым простым решением для вас. Если у вас есть больше, чем просто две записи вы можете перебрать с ним «за», как это:

for(var i = 0; i < read_data.result.length; i++) { 
    //Access the json like this: 
    //read_data_result[i] 
} 

Answer 4

Лучшим решением было бы сделать что-то вроде этого:

<button id="getdata-button">hello</button> 
<div id="choices"></div> 

<script> 
$("#getdata-button").click(function() { 
    $.getJSON('data.txt', function(read_data) { 
    var choices = ''; 
    $.each(read_data.result, function(i, data) { 
     choices += '<div id="choise">' + data.option + data.percent + '</div><br>'; 
    }); 
    $("#choices").html(choices); 
    }); 
}); 
</script> 

поэтому сначала сгенерируйте HTML для всех вариантов в памяти, а затем добавьте его в DOM. Не добавляйте вещи в свой DOM в цикле, он будет запускаться, переполняя каждую медленную итерацию.