Logan Voss Logan Voss - 1 month ago 5
jQuery Question

Changing the innerhtml of many elements

I have an ajax call that I'm using to populate a table with the result of a query on a different page. It works, but I'm about to have to do another similar ajax call and this structure of having to do

$(#Whatever_Selector).html(result[0]['Whatever_Index'])
is driving me crazy, but I can't seem to figure out how to get around it.

Maybe something using
.each
and using
$(this)
but I have no clue.

My script:

$('#selection_project').change(function(event) {
$.post('info.php', { selected_project: $('#selection_project option:selected').val()},
function(data) {
var result = JSON.parse(data);
var project = result['selected_project'];
$('#CTN').html(\"CTN - \"+project);
$('#Global_Project_Number').html(result[0]['Global_Project_Number']);
$('#Project_Type').html(result[0]['Project_Type']);
$('#Lead_Location').html(result[0]['Lead_Location']);
$('#Local_Project_Number_1').html(result[0]['Local_Project_Number_1']);
$('#Local_Project_Number_2').html(result[0]['Local_Project_Number_2']);
$('#Local_Project_Number_3').html(result[0]['Local_Project_Number_3']);
$('#Local_Project_Number_4').html(result[0]['Local_Project_Number_4']);
$('#Local_Project_Number_5').html(result[0]['Local_Project_Number_5']);
$('#Development_Location_2').html(result[0]['Development_Location_2']);
$('#Development_Location_3').html(result[0]['Development_Location_3']);
$('#Development_Location_4').html(result[0]['Development_Location_4']);
$('#Development_Location_5').html(result[0]['Development_Location_5']);
$('#Customer').html(result[0]['Customer']);
$('#Duration').html(result[0]['Duration']);
$('#Customer_Group').html(result[0]['Customer_Group']);
$('#Average_Number_of_Pieces').html(result[0]['Average_Number_of_Pieces']);
$('#Project_Name').html(result[0]['Project_Name']);
$('#State').html(result[0]['State']);
$('#BU_CC').html(result[0]['BU_CC']);
$('#Start_Of_Production').html(result[0]['Start_Of_Production']);
$('#Outlet').html(result[0]['Outlet']);
$('#End_Of_Development').html(result[0]['End_Of_Development']);
$('#Start_Of_Development').html(result[0]['Start_Of_Development']);
$('#Project_Connection').html(result[0]['Project_Connection']);
$('#Project_Manager').html(result[0]['Project_Manager']);
$('#Chance_Budget').html(result[0]['Chance_Budget']);
$('#System_TPL').html(result[0]['System_TPL']);
$('#Chance_Forecast').html(result[0]['Chance_Forecast']);
$('#Product_Family').html(result[0]['Product_Family']);
$('#Technology').html(result[0]['Technology']);
$('#LL_SW').html(result[0]['LL_SW']);
$('#Processor_Type').html(result[0]['Processor_Type']);
$('#HL_SW').html(result[0]['HL_SW']);
$('#Chassis_Type').html(result[0]['Chassis_Type']);
$('#Technology_Development').html(result[0]['Technology_Development']);
$('#Technical_Description').html(result[0]['Technical_Description']);
$('#username').html(result[0]['username']);
$('#Milestone_1').html(result[0]['Milestone_1']);
$('#Milestone_2').html(result[0]['Milestone_2']);
$('#Milestone_3').html(result[0]['Milestone_3']);
$('#Milestone_4').html(result[0]['Milestone_4']);
$('#Milestone_5').html(result[0]['Milestone_5']);
$('#Milestone_6').html(result[0]['Milestone_6']);
$('#Due_Date_1').html(result[0]['Due_Date_1']);
$('#Due_Date_2').html(result[0]['Due_Date_2']);
$('#Due_Date_3').html(result[0]['Due_Date_3']);
$('#Due_Date_4').html(result[0]['Due_Date_4']);
$('#Due_Date_5').html(result[0]['Due_Date_5']);
$('#Due_Date_6').html(result[0]['Due_Date_6']);

}
);
});


I'm about to populate another table with hundreds of
<td>
s, I don't want to have to use the above format!

How do I make some kind of loop to use the index of the array in the Jquery selector?

Answer

Specifically for your use case (with the given information), you can use $.each to iterate over the properties of an object:

$.each(result[0], function(key, value) {
  $('#' + key).html(value);
});

assuming all values have a corresponding id element.

Comments