How to use .each to build an array

Question

So we're working in this system and buildig our own page. We built a form to insert timeline data using a .xwd file. We use javascript to retrieve the data and fill it in a variable to store it. The main page (title:) just has single values, but the actual events should be in an array.

I'm want to use V to fill the array.

$(x_currentPageXML).children().each(function(index, elem){

});

Right now what I have is this and I want to fill the "events" array using the foreach I showed above. Putting the .each inside in the var didn't work and I wouldn't know how else to do it.

    var SictTimeline = new function() {     
            this.loadJS = function () {
        $.getScript(x_templateLocation + 'common_html5/js/timeline.js')
            .done(function (script, textStatus) {
                var make_the_json = $(x_currentPageXML).children().map(function (element) {
                    return {
                        title: {
                            media: {
                                url: element.getAttribute("url"),
                                caption: element.getAttribute("tip"),
                            },
                            text: {
                                headline: element.getAttribute("name"),
                                text: '<p>' + element.getAttribute("text") + '</p>'
                            }
                        },
                        events: {
                            media: {
                                url: element.getAttribute("url"),
                                caption: element.getAttribute("tip"),
                            },
                            start_date: {
                                month: '8',
                                day: '9',
                                year: '1963'
                            },
                            text: {
                                headline: element.getAttribute("name"),
                                text: element.getAttribute("text")
                            }
                        }
                    }
                })

                var timeline_json = make_the_json; // replace make_the_json() with the JSON object you created
                // two arguments: the id of the Timeline container (no '#')
                // and the JSON object or an instance of TL.TimelineConfig created from
                // a suitable JSON object
                window.timeline = new TL.Timeline('timeline-embed', timeline_json);
            })
            .fail(function (jqxhr, settings, exception) {
                console.log('Failed to load the script for the timeline');
            });
    }
    // function called every time the page is viewed after it has initially loaded
    this.pageChanged = function() {

    }

    // function called every time the size of the LO is changed
    this.sizeChanged = function() {

    }

    this.init = function() {
        this.loadJS();
        // call this function in every model once everything's loaded
        x_pageLoaded();
    }
}

An example of the xml-file with the values

<?xml version="1.0"?>
<learningObject editorVersion="3" targetFolder="Nottingham" name="Learning Object Title" language="en-GB" navigation="Linear" textSize="12" theme="default" displayMode="fill window" responsive="true">

<SictTimeline linkID="PG1592486441661" name="My page" media="SictTimeline" text="&lt;p&gt;Text for my page&lt;/p&gt;&#10;" url="FileLocation + 'media/https___images.genius.com_53c4575fa3f97a8d4b18d69a600afaf0.900x900x1.jpg'" tip="Description for Image 1"></SictTimeline></learningObject>

Carlos Jiménez · Accepted Answer · 2020-06-18 14:27:57Z

1

I guess what you are trying to achieve is to generate an array of objects based on the number (and properties) of elements inside $(x_currentPageXML). For that purpose you need to use the .map() method:

    events: $(x_currentPageXML).children().map(function (index, element) {
        return {
            media: {
                url: element.getAttribute("url"),
                caption: element.getAttribute("tip"),
            },
            start_date: {
                month: '8',
                day: '9',
                year: '1963'
            },
            text: {
                headline: element.getAttribute("name"),
                text: element.getAttribute("text")
            }
        }
    }).get()

edited Jun 18, 2020 at 14:27

answered Jun 18, 2020 at 11:08

Carlos Jiménez

4962 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

YesMyDude Over a year ago

I've tried it but it hasn't worked sadly. I've edited the code, added also what was behind it. maybe it can help.

Carlos Jiménez Over a year ago

Can you provide an example of the contents of x_currentPageXML?

YesMyDude Over a year ago

It's an xml-file with the values of the input.

YesMyDude Over a year ago

I've added the data from the xml-file, the attributes in <SictTimeline> are the ones getting retrieved by the getAttribute and are the ones I need in the events array. Only events should be in the .map I think, that one will have multiple objects. titles shouldn't, there's only 1 of those.

Carlos Jiménez Over a year ago

Actually I see why you were not getting the object. I forgot to add the index to the callback and to get the resulting object adding .get() at the end of .map(). See this example I've created and tell me if it worked codesandbox.io/s/bitter-smoke-h3ztb?file=/src/index.js

|

jakob_a · Accepted Answer · 2020-06-18 11:14:36Z

0

I'm not sure I completely understand the question, but you want to extract stuff from each element in the loop right? Replace x_currentPageXML with elem inside the loop


var result = []

$(x_currentPageXML).children().each(function (index, elem) {
    var make_the_json = {
        title: {
            media: {
                url: elem.getAttribute("url"),
                caption: elem.getAttribute("tip"),
            },
            text: {
                headline: elem.getAttribute("name"),
                text: '<p>' + elem.getAttribute("text") + '</p>'
            }
        },
        events: [
            {
                media: {
                    url: elem.getAttribute("url"),
                    caption: elem.getAttribute("tip"),
                },
                start_date: {
                    month: '8',
                    day: '9',
                    year: '1963'
                },
                text: {
                    headline: elem.getAttribute("name"),
                    text: elem.getAttribute("text")
                }
            }
        ]
    };

    result.push(make_the_json)
})

answered Jun 18, 2020 at 11:14

jakob_a

1261 silver badge6 bronze badges

1 Comment

YesMyDude Over a year ago

I've edited the code, added also what was behind it. maybe it can help.

Collectives™ on Stack Overflow

How to use .each to build an array

2 Answers 2

6 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related