使用JavaScript / jQuery从数组填充列表并在“加载更多”按钮单击时加载更多项目？

Question

I have a list of array in JavaScript and I need to:

1. Use JavaScript and/or jQuery to populate the first 5 courses of the list from the array included (Can use the same image for all the courses)
2. Make the 'load more' button work, loading 5 additional courses for each click
3. Sort the courses alphabetically before listing them

document.getElementById('load-courses').innerHTML = courses[1];

I've been trying to use different things with document.getElementById (it is at the bottom in JavaScript in jsfiddle) but it is showing either undefined or [object Object]. I know it is not that simple to populate this list.

https://jsfiddle.net/0jLztmfn/

This below is what the list needs to look like at the end. I've done the styling and can make needed styling changes later but can't find out how to populate 5 on first load and then the rest: load 5 more on each click and sort alphabetically before listing. I'm not sure if using span inside html is correct either to load the list in as I need to display Title, description, image in certain styles. What would be a good way to be able to style them before/after listing courses?

https://ibb.co/cybkkQ

Thanks

Answer 1

document.body.innerHTML = "abc"; // Replaces body content with "abc" , takes value only as string. change last line in your .js file , something like this:

document.getElementById('load-courses').innerHTML = courses[1].Title;

jsfiddle link: https://jsfiddle.net/raushankumar0717/0jLztmfn/4/

Update:

You can add image to your page:

document.getElementById('courseImg').src=courses[1].ImageLink;

where courseImg is id of image element.

jsfiddle Demonstrating your requirement: https://jsfiddle.net/raushankumar0717/0jLztmfn/7/

 var courses = [ { "Title": "Crime Risk New", "ShortDescription": "Donec a sodales lorem. Curabitur at nulla nec sem volutpat accumsan placerat nec elit. Ut bibendum dui vitae purus fringilla rhoncus. Praesent volutpat felis vitae felis ultricies rhoncus. Nulla maximus nibh vel enim ullamcorper aliquam. Nam efficitur est nibh, id mollis nisl ullamcorper et.", "ImageLink": "image1.jpg" }, { "Title": "Alternative Ireland Mergers Statements Practice", "ShortDescription": "Aenean iaculis vehicula sollicitudin. Sed convallis, massa sit amet venenatis volutpat, arcu dolor volutpat neque, in lobortis arcu velit hendrerit ante. Quisque accumsan luctus enim eu aliquam. Quisque et dolor est.", "ImageLink": "http://design.ubuntu.com/wp-content/uploads/ubuntu-logo32.png" }, { "Title": "Security Leadership Social", "ShortDescription": "Vivamus pellentesque semper arcu eu egestas. Fusce lacinia velit quam, a rhoncus turpis blandit sit amet. Vivamus eros mi, malesuada vitae facilisis at, tincidunt in urna. Morbi sodales at nulla ac commodo.", "ImageLink": "image1.jpg" }, { "Title": "Results regulation Financial Governance and Within", "ShortDescription": "In enim nunc, tempor a congue ut, interdum consequat tortor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla luctus sodales nulla, at eleifend nibh fermentum eget.", "ImageLink": "image1.jpg" }, { "Title": "UK Leadership Professional Instruments to", "ShortDescription": "Ut a congue quam, eu hendrerit dolor. Ut porta in nunc id porttitor. Pellentesque iaculis pretium vulputate. Aenean eu neque vestibulum, semper leo sed, porttitor sapien. Etiam in justo eu risus scelerisque ultricies. Nunc commodo est in scelerisque semper.", "ImageLink": "image1.jpg" }, { "Title": "Workload Witness Data", "ShortDescription": "Vestibulum maximus et arcu eget congue. Phasellus", "ImageLink": "image1.jpg" }, { "Title": "Business Savings Control", "ShortDescription": "Etiam elementum auctor tellus.", "ImageLink": "image1.jpg" }, { "Title": "Donor Business Professionalism Positioning", "ShortDescription": "Phasellus ultrices tellus at gravida tempor. Mauris in augue dolor. Pellentesque sit amet mauris vehicula, eleifend tellus eget, cursus lectus. Suspendisse sed convallis ex, non tristique tellus.", "ImageLink": "image1.jpg" }, { "Title": "Performance Work Preventing Workload Mergers Data Strategy", "ShortDescription": "Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed ut ipsum ac sapien mollis ultrices vehicula magna sed augue feugiat, eget interdum dui feugiat. Integer erat augue, lacinia vel ex a, consectetur lacinia nulla.", "ImageLink": "image1.jpg" }, { "Title": "Enterprise Compliance Introduction and", "ShortDescription": "Nullam cursus, leo in cursus feugiat, leo urna mollis dui, eu pretium augue orci ut lorem.", "ImageLink": "image1.jpg" }, { "Title": "Performance Combinations Continuous BPM Data Corporate", "ShortDescription": "Donec ornare nisi nec viverra lacinia. Ut in pharetra est. Suspendisse vestibulum, nisi eget bibendum porta, urna erat fermentum mi, ac efficitur turpis nisi ut lacus.", "ImageLink": "image1.jpg" }, { "Title": "and Building Spreadsheet International", "ShortDescription": "Phasellus odio arcu, lobortis vel dui et, tincidunt tristique mi. Aenean et malesuada nibh.", "ImageLink": "image1.jpg" }, { "Title": "Partnership Acquisitions Finance Teams for Gift Strategy", "ShortDescription": "Donec et arcu a augue sollicitudin congue. Ut suscipit, dui at ultrices convallis, purus mauris dignissim lacus, a dignissim dui justo eu turpis. Proin eget orci porttitor, convallis nibh sit amet, posuere lacus. Nunc vestibulum at ante sit amet dignissim. Curabitur quis quam tortor.", "ImageLink": "image1.jpg" }, { "Title": "for The Briefing Financial UK in", "ShortDescription": "Donec volutpat justo maximus lorem volutpat, eget aliquam dolor cursus. Maecenas porta fermentum rhoncus. Aliquam porttitor enim iaculis congue dignissim. Aenean at ante a nisl mattis efficitur. Morbi vulputate a lorem nec condimentum.", "ImageLink": "image1.jpg" }, { "Title": "Ideas Management Mapping Using Skills and", "ShortDescription": "Aliquam sollicitudin, nunc vitae laoreet mattis, justo ante congue tortor, nec tempus tellus metus consequat enim. Ut eget urna euismod, luctus augue laoreet, rutrum dui. Vivamus egestas eleifend arcu facilisis gravida.", "ImageLink": "image1.jpg" }, { "Title": "Career Negotiating Managing Buying change? your Tax", "ShortDescription": "Donec purus odio, bibendum in rutrum sit amet, tincidunt a justo. Curabitur quis blandit elit. Cras blandit felis scelerisque luctus vulputate. Etiam purus mauris, mattis bibendum metus a, vehicula consequat enim.", "ImageLink": "image1.jpg" }, { "Title": "Mergers and Assessing Accountants and Ethical the", "ShortDescription": "Donec vel neque consequat, tincidunt risus quis, sodales erat. Donec imperdiet urna in sollicitudin auctor. Donec tristique dolor vel elit pulvinar imperdiet. Nulla id nisi feugiat, tempus neque quis, dignissim augue.", "ImageLink": "image1.jpg" }, { "Title": "Solving Mergers Business", "ShortDescription": "Donec maximus suscipit tellus. Sed dolor metus, lobortis in ultricies eget, tincidunt in erat. Curabitur faucibus hendrerit ex in eleifend. Maecenas ligula mauris, bibendum vitae nisl eget, mattis consequat mi.", "ImageLink": "image1.jpg" }, { "Title": "Promoting for Basics Accounting", "ShortDescription": "Morbi sit amet diam a dui molestie venenatis ac vitae tortor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. ", "ImageLink": "image1.jpg" }, { "Title": "Building UK GAAP World", "ShortDescription": "Nunc consequat dictum rutrum.", "ImageLink": "image1.jpg" }, { "Title": "Principles New Professional Accountants", "ShortDescription": "Mauris luctus neque sit amet odio posuere porta. Aliquam interdum augue dui, at lobortis eros ultrices id. Donec mattis posuere dui vitae sagittis. Sed tempor aliquam nisi, vel semper odio.", "ImageLink": "image1.jpg" }, { "Title": "Transformation Charity Solving The Dynamic Guide", "ShortDescription": "Duis leo lectus, lacinia sodales semper eget, convallis ut nibh. In blandit orci lectus, at imperdiet urna posuere nec. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc vel urna quis est varius auctor.", "ImageLink": "image1.jpg" }, { "Title": "Megatrends and Advantage", "ShortDescription": "Morbi consequat eu magna quis bibendum.", "ImageLink": "image1.jpg" }, { "Title": "The Law Protection Control", "ShortDescription": "Proin lobortis, ante ut vestibulum posuere, tortor mauris iaculis nulla, ac commodo odio quam eu arcu. Suspendisse at fringilla purus, vitae pharetra ante. Suspendisse mattis rhoncus gravida. Etiam tincidunt elementum condimentum. Vivamus id sagittis erat, tincidunt tristique elit.", "ImageLink": "image1.jpg" }, { "Title": "Corporate Ethical", "ShortDescription": "Vivamus et vulputate ipsum, id vulputate nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus lacus risus, egestas nec magna ornare, aliquam luctus nibh. Morbi vel ullamcorper ex.", "ImageLink": "image1.jpg" }, { "Title": "Succession IFRS IFRS Cyber for Integrated and", "ShortDescription": "Mauris molestie nunc ut efficitur tincidunt. Quisque consectetur tincidunt lorem, sit amet semper purus pellentesque non. Pellentesque et volutpat sapien.", "ImageLink": "image1.jpg" }, { "Title": "for Reacting Understanding SME Results The", "ShortDescription": "Praesent ac sagittis purus. Etiam lacinia massa sed felis pulvinar, vitae consectetur tellus iaculis. Nullam quis vulputate turpis.", "ImageLink": "image1.jpg" }, { "Title": "Development with Accounting Issues and", "ShortDescription": "Maecenas non pellentesque neque. Donec maximus bibendum lectus vel eleifend. Nullam fringilla vitae ex vel eleifend. Nunc aliquet tempus sapien vitae consequat. Donec pretium ipsum ut nunc ornare, a tincidunt odio bibendum.", "ImageLink": "image1.jpg" }, { "Title": "Tips Financial Planning", "ShortDescription": "Proin congue semper fringilla. Cras risus ipsum, scelerisque sit amet nunc in, aliquam volutpat neque. Maecenas imperdiet nunc sed libero congue, non fringilla sapien ultricies.", "ImageLink": "image1.jpg" } ]; document.getElementById('courseImg').src=courses[1].ImageLink; document.getElementById('courseTitle').innerHTML = courses[1].Title; document.getElementById('descp').innerHTML = courses[1].ShortDescription; 

 body { width:100%; height:100%; } #courseImg { width:25%; height:50%; display:inline-block; } .course { width:70%; height:50%; display:inline-block; } 

 <div class="courses-list"> <h3>Courses</h3> <img id = "courseImg" src="" ></img> <div class="course"> <p id="courseTitle"> </p> <p id="descp"></p> </div> </div> 

Hope this helps