Solved

Javascript loop through list

Posted on 2016-10-28
13
32 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
  • 7
  • 3
  • 2
13 Comments
 
LVL 9

Expert Comment

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

Author Comment

by:Panos
Comment Utility
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
Comment Utility
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
 
LVL 2

Author Comment

by:Panos
Comment Utility
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 250 total points
Comment Utility
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
Comment Utility
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
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 2

Author Comment

by:Panos
Comment Utility
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
Comment Utility
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 51

Expert Comment

by:Julian Hansen
Comment Utility
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
Comment Utility
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 51

Accepted Solution

by:
Julian Hansen earned 250 total points
Comment Utility
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
Comment Utility
I will cancel this request to add points to expert Julian Hansen for his solution
0

Featured Post

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
The viewer will learn how to dynamically set the form action using jQuery.
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…

771 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

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now