Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 79
  • 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 CutlerCommented:
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 CutlerCommented:
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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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 CutlerCommented:
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

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

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