• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 86
  • Last Modified:

Javascript loop through list

Hello experts.
I have a working js code and i need help to make it a little simplier if possible looping through a list of values. In my case EN and DE so that i will need to add only one language code for future uses.
Here is my code:
$.each(df.records, function(i, el) {
  x++;
  if (x % 2 == 0) {
    var tmpclass = 'firstclass';
  } else {
    var tmpclass = 'secondclass';
  }
  var text_DE = el.option_text_DE;
  var text_EN = el.option_text_EN;
  var option_value = el.option_value;
  var option_tbl_id_DE = el.attr_option_tbl_id_DE;
  var option_tbl_id_EN = el.attr_option_tbl_id_EN;
  var valueids = option_tbl_id_DE + '_' + option_tbl_id_EN;
  output.push('<tr class="' + tmpclass + '" id="tr-' + valueids + '"><td>' + option_value + '</td><td id="parent_' + option_tbl_id_DE + '">' + text_DE + '</td><td id="parent_' + option_tbl_id_EN + '">' + text_EN + '</td><td><button class="command-button-delete" title="Delete"><span>Delete</span></button></td></tr><tr id="input-' + valueids + '" style="display:none"><td><div><label for="">Option Value</label><input type="text" class="option_values" name="attr_label" id="options-' + option_tbl_id_DE + '_' + option_tbl_id_EN '" value="' + option_value + '"><span class="icon-process"></span></div></td><td><div><label for="">Option Text DE</label><input type="text" class="option_text" name="attr_' + option_name + '" id="option_' + option_tbl_id_DE + '_DE" value="' + text_DE + '"><span class="icon-process"></span></div></td><td><div><label for="">Option Text EN</label><input type="text" class="option_text" name="attr_' + option_name + '" id="option_' + option_tbl_id_EN + '_EN" value="' + text_EN + '"><span class="icon-process"></span></div></td><td style="text-align:center;"><button class="jtable-command-button jtable-close-command-button" title="Close"><span>Close</span></button></td></tr>')
});

Open in new window


Any help?
0
Panos
Asked:
Panos
  • 7
  • 3
  • 2
3 Solutions
 
Evan CutlerVolunteer Chief Information OfficerCommented:
how do you get df.records?
Is that a return from an AJAX Query or something?
0
 
PanosAuthor Commented:
Hi Evan Cutler
yes it is a return from ajax query:
success: function(d) {
  var df = $.parseJSON(d);
  if (jQuery.isArray(df.records) === true) {......
0
 
Evan CutlerVolunteer Chief Information OfficerCommented:
so, my question is this:

Can you add into the query the language you need, and then quantify all fields:

for example: "option_text_DE" or "option_text_EN" would be "option_text".
This way, if your sql can handle it there, with a "language=<<chosenLanguage>>" you can reduce that call to just the output.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
PanosAuthor Commented:
It could be an option  if i was editing/getting one option _text for one language as you mentioned but i would prefer to try to find a solution using this "more complicated" way.
0
 
Evan CutlerVolunteer Chief Information OfficerCommented:
The problem you are going to face is the inclusion of multiple languages.  If you have "option_text_DE" you're going to need "option_text_GR" and others.  this will continue to add the complexity.

You could try going vertical on it, where you can query:
LANGUAGE, OPTION_TEXT, attr_option_tbl_id
EN, text, id_value
DE, text, id_value
GR, text, idvalue
etc...

Open in new window


Then in your javascript, you can just loop through the languages, and keep the function clean.
0
 
PanosAuthor Commented:
My language database is exactly like the one you posted. it is helping that way to edit or get only one language text. I understand this.
The problem is if you need to add a new option value .the value would be the same but the text not.
Well i tried a server side solution and it is working. I m using the cfloop function from coldfusion and i#m looping through the list of languages. That is doing my job.
f.e.
<cfset lnglist = 'DE,EN'>
<cfloop index = "i" list = "#lnglist#" delimiters = ",">
var text_#i# = el.option_text_#i#;
var option_tbl_id_#i# = el.attr_option_tbl_id_#i#; 
</cfloop>....

Open in new window

0
 
PanosAuthor Commented:
Hi again Evan Cutler
I thought it was not a good idea to give up and relay only to my " server side solution".
So i changed my ajax response doing what you are suggesting.
Unfortunately i have again problems and need help to "buld" the output using the data.
I have now following:
var output = [];
output.push('<thead><tr><th width="130">Option Value</th><th width="130">Option Text DE</th><th width="130">Option Text EN</th><th width="26"></th><th width="26"></th></thead>')

$.each(df.records, function(i, el) {
	var option_value = el.option_value;
	var option_id =	 el.attr_options_id;
	var optionslist =	el.optionslist;	 // a paar of Language and text 
    var valueids = el.aotil;// all id s for the same value and different languages for editing use
	// create the tr with td value
	var thisrow = '<tr class="' + tmpclass + '" id="tr-' + valueids + '"><td>' + option_value + '</td></tr>';
	// add the new
	$.each(optionslist, function(key, value) {
	// wich function to add the td s to the created tr thisrow
     var resttds = $('<td>' + value.option_text + '</td>');
     })
	// finally add the finalrow created to the output
	output.push(finalrow)
});

Open in new window

Creating the rows with only the values i will be able to create the hidden rows with the inputs for additing
0
 
PanosAuthor Commented:
After googling and testing i have finally a js solution too:
var output = [];
output.push('<thead><tr><th width="130">Option Value</th><th width="130">Option Text DE</th><th width="130">Option Text EN</th><th width="26"></th><th width="26"></th></thead>')

$.each(df.records, function(i, el) {
	var option_value = el.option_value;
	var option_id =	 el.attr_options_id;
	var optionslist =	el.optionslist;	 // a paar of Language and text 
    var valueids = el.aotil;// all id s for the same value and different languages for editing use
	// create the tr with td value
	var thisrow = '<tr class="' + tmpclass + '" id="tr-' + valueids + '"><td>' + option_value + '</td></tr>';
	// add the new
	$.each(optionslist, function(key, value) {
	// wich function to add the td s to the created tr thisrow
	 thisrow += '<td>' + value.option_text + '</td>';
     })
	 // add the buttons and close the row
	 thisrow += '<td><button class="command-button-delete" title="Delete"><span>Delete</span></button></td></tr>';
	// finally add the row created to the output
	output.push(thisrow)
});

Open in new window

0
 
Julian HansenCommented:
Some questions
1. Why are you adding rows to an array - is there a reason you don't output them directly?
2. You are using tmpclass in your row but in your latest code it does not appear to be defined anywhere - you can remove this. If you want to target odd / even rows you can do it with nth-child(odd) nth-child(even) - both in CSS and in jQuery
3. If you use jQuery - you can do this with much simpler code.
0
 
PanosAuthor Commented:
Hi Julian Hansen
1. About the rows and class: I'm "building" the tbody of my table in my popup window.
That what is missing is at the top:
var p = $("#popuploader");
 p.html('<form id="edit-form" method="POST"><table class="jtable" id="optionholder"></table></form>');
 var x = 0;
 var output = [];
$.each(df.records, function(i, el) {
x++;
      if (x % 2 == 0) {
        var tmpclass = 'data-row  row-even';
      } else {
        var tmpclass = 'data-row';
 }
      var option_value = el.option_value;
.........

Open in new window

I'm very interested in the simpler way because i'm using jquery
0
 
Julian HansenCommented:
Here is my take on it

Firstly I would put the static stuff (header and buttons) in the table.
I would also remove inline styling out of the jQuery in to CSS - width attribute has been deprecated anyway.

$(function() {
  $('#getdata').click(function() {
    $.ajax({
      url: 't1797.php',
      dataType:'json'
    }).done(function(df) {
      var target = $('#target tbody');
      $.each(df.records, function(i,record) {
        var row = $('<tr/>', {
          id: 'tr-' + record.aotil,
        })
        .append($('<td/>').html(record.option_value));
        $.each(record.optionslist, function(j, option) {
          row.append($('<td/>').html(option.option_text));
        });
        row.append($('<td/>')
          .append(
            $('<button/>', {
              class: "command-button-delete", 
              title: "Delete"}
            )
            .append(
              $('<span/>').html('Delete')
            )
          ));
        target.append(row);
      });
      $('#popup').show();
    });
  });
});

Open in new window

Working sample here
0
 
PanosAuthor Commented:
I will cancel this request to add points to expert Julian Hansen for his solution
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: CompTIA Healthcare IT Tech

This course will help prep you to earn the CompTIA Healthcare IT Technician certification showing that you have the knowledge and skills needed to succeed in installing, managing, and troubleshooting IT systems in medical and clinical settings.

  • 7
  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now