?
Solved

Javascript loop through list

Posted on 2016-10-28
13
Medium Priority
?
72 Views
Last Modified: 2016-10-30
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
Comment
Question by:Panos
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 7
  • 3
  • 2
13 Comments
 
LVL 9

Expert Comment

by:Evan Cutler
ID: 41864358
how do you get df.records?
Is that a return from an AJAX Query or something?
0
 
LVL 2

Author Comment

by:Panos
ID: 41864395
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
 
LVL 9

Expert Comment

by:Evan Cutler
ID: 41864416
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
Why Off-Site Backups Are The Only Way To Go

You are probably backing up your data—but how and where? Ransomware is on the rise and there are variants that specifically target backups. Read on to discover why off-site is the way to go.

 
LVL 2

Author Comment

by:Panos
ID: 41864430
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
 
LVL 9

Assisted Solution

by:Evan Cutler
Evan Cutler earned 1000 total points
ID: 41864491
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
 
LVL 2

Author Comment

by:Panos
ID: 41864509
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
 
LVL 2

Author Comment

by:Panos
ID: 41865108
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
 
LVL 2

Assisted Solution

by:Panos
Panos earned 0 total points
ID: 41865152
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
 
LVL 58

Expert Comment

by:Julian Hansen
ID: 41865646
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
 
LVL 2

Author Comment

by:Panos
ID: 41865666
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
 
LVL 58

Accepted Solution

by:
Julian Hansen earned 1000 total points
ID: 41865751
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
 
LVL 2

Author Comment

by:Panos
ID: 41865799
I will cancel this request to add points to expert Julian Hansen for his solution
0

Featured Post

Optimize your web performance

What's in the eBook?
- Full list of reasons for poor performance
- Ultimate measures to speed things up
- Primary web monitoring types
- KPIs you should be monitoring in order to increase your ROI

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction Chart.js, used properly, can visually add a difference to your charting applications. It engages your visitors and allows them to interact with data they otherwise wouldn't be able to without expensive and complicated systems. For this…
How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question