Using an If statement on .map object in Jquery

Question

Edited for clarity. (thanks)

On my page, there are dynamically created divs that contain input elements(they clone the original). Each div refers to a unique form, but the ID of the input elements are not unique in each div(this may be a problem).

The code below successfully searches my doc for all of the divs that have been created(Their ID is medical-report(random number), gathers their input elements and then outputs each string in the array separated by a comma.

var $inputs= $("div[id^='medical-report']").find("input").clone();

$("#multi").append(($inputs).map(function() {
return $(this).val();
})
.get()
.join(", "));

}

What I want to do instead, is traverse the array (not sure if I have truly created one), and then looks at the ID of each input element and append unique paragraph text for each to an area in my page. It would basically summarize the contents of each div.

(search for inputs, and clone them) var $inputs= $("div[id^='medical-report']").find("input").clone(); Then pseudo code:

for each div=

If the ID is "nameofdoc" add paragraph The name of the doctor is "nameofdoc.val" If the ID is "datereceived" add paragraph the document was received on "datereceived.val" and so on.

Just to restate, a problem here may be that "nameofdoc" and "datereceived" are not unique ID's. The container divs however are unique.

var $inputs= $("div[id^='medical-report']").find("input").clone();

 $("#multi").append(($inputs).map(function(index) {


 return $(this).val();

 .get();
 if ($(this).is("#MEDRIN")) {
 $("p").text("The medical was received on" +index);
                                                   } 
})

I have read up on .each and.contents in the jquery API but I am really unsure of what direction to go in. Fiddle is below.

http://jsfiddle.net/gdoax9q2/7/

The code shown in broken/invalid. What is that `.get()` connected to? — iCollect.it Ltd, Dec 28 '14 at 23:03
I figured it might not be required. I just want to run the if statement on the contents of the .map. Fiddle is here (it isn't pretty) http://jsfiddle.net/gdoax9q2/ Note: I plan on replacing the chunky Vanilla JS that moves inputs with Jquery. — Ojay, Dec 28 '14 at 23:11
I think the first step should be to put some effort into your formatting - your indentation looks like the work of a crazy person. — 76484, Dec 29 '14 at 00:12
@Ojay: `sayHi()` is throwing an error in the `onclick`. Either move the click handler to the JavaScript or change the "Frameworks & Extensions" option to "No wrap - in " (as recommended here: http://stackoverflow.com/a/16160752/3397771) — 76484, Dec 29 '14 at 03:19
Thank you updated fiddle Here: http://jsfiddle.net/gdoax9q2/3/ — Ojay, Dec 29 '14 at 03:32
@Ojay: The HTML is still a mess. There is a close form tag with no open form tag, there's an extra close div tag, and a main.js script is referenced that does not exist on that server. — 76484, Dec 29 '14 at 03:41
Thanks for your patience. Is this better? http://jsfiddle.net/gdoax9q2/6/ — Ojay, Dec 29 '14 at 03:57
@Ojay: Only slightly. There was still an orphaned `` tag and a `` tag needed to be moved to the end of the markup. I know this stuff seems unimportant, but having a clean, logically formatted structure can improve comprehensibility immensely. I've reformatted the HTML: http://jsfiddle.net/gdoax9q2/7/ — 76484, Dec 29 '14 at 04:21
@Ojay: As for your original question. You seem to be having difficulty understanding what the jQuery map method is doing. I think yo should begin by describing what you *want* the `append` and `map` to do (this process is called, "writing pseudo-code"). — 76484, Dec 29 '14 at 04:33

score 1 · Accepted Answer · answered Dec 29 '14 at 07:05

There are a number of issues here. I will list the steps that I would take to solve this problem.

Rename the function from "sayHi" to a name that describes what this function does. "generateReportSummaries" seems appropriate.
I removed all of the innerHTML stuff because I had no idea what it was doing.
Use jQuery to grab a collection of all the forms we want to create summaries for (I gave the forms each a "report-form" class to make this easier.
Create a function that will take a a form element and return a formatted element that we can append to the document. I called my function "getReportElement".
For each form element, call getReportElement and append the result to #mutli.

Implement getReportFormat to map the values for all the form's inputs - include a conditional for when input's name attribute is 'MEDRIN'. Join the values array and append it to the new element that the function returns.

function generateReportSummaries () {
    /* Get a jQuery wrapped collection of all .report-form elements. */
    var $forms = $('.report-form');

    /* Call getReportElement for each .report-from. */
    $forms.each(function () {
        $('#multi').append(getReportElement($(this))); 
    });
}

function getReportElement ($form) {
    /* Create a new paragraph element to contain our text. */
    var $paragraph = $('<p></p>');

    /* Get an array of the form's input values. */
    /* If input is [name="MEDRIN"], add prefix text to array value. */
    var mapped_values = $form.find('input').map(function () {
        if ($(this).is('[name="MEDRIN"]')) {
            return 'The medical was received on ' + $(this).val();
        } else {
            return $(this).val(); 
        }
     }).get();

    /* Join our values array and set it as our paragraph element's text. */
    $paragraph.text(mapped_values.join(', '));

    /* Return our (jQuery-wrapped) paragraph element. */
    return $paragraph;
}

I removed the input ids and replaced them with name attributes because ids should not be duplicated. Also, the datepicker was causing issues for the cloned forms, so I changed things a little to make everything work. You can see my result at: http://jsfiddle.net/76484/qLeg5wm9/

Thanks so much. The original innerHTML stuff allowed the inputs to populate to spans in the paragraph that were already in my HTML. I am going to go with an implementation that creates the paragraphs via Jquery. I will spend some time reviewing the code you supplied, instead of just copying and pasting. Thanks so much for your feedback and patience. — Ojay, Dec 29 '14 at 15:00

Using an If statement on .map object in Jquery

1 Answers1