Linking JavaScript Object within HTML

JavaScript
1

Hi all, how would I be able to pull the data from the JS script within my HTML? I am wanting to pull the “Title”, “Description”, and “Link” objects and display them within my HTML code.

Here is the code:

<div class="roadMap" id="roadMap"></div>

    <script src="/siteassets/bootstrap3/js/jquery-1.8.3.min.js"></script>
    <script src="/publiccdnlib/PnP-JS-Core/pnp.min.js"></script>
    <script type="text/javascript" src="/publiccdnlib/es6-Promise/es6-promise.auto.js"></script>
    <script type="text/javascript" src="/publiccdnlib/fetch/fetch.min.js"></script>
    <script src="/publiccdnlib/slick/slick.min.js"></script>
    <script src="/publiccdnlib/CommonJS/CommonJS.js"></script>
    <script src="/publiccdnlib/knockout/knockout.js"></script>
    <script src="/publiccdnlib/knockout/knockout.simpleGrid.3.0.js"></script>
    <script src="/publiccdnlib/toastr/toastr.min.js"></script>
    <script src="/publiccdnlib/dialog/open-sp-dialog.js"></script>
    <!--END Scripts for O365-->

    <script>
    	$pnp.setup({
    		baseUrl: "/TrainingResourceCenter/O365Training"
    	});

    	$pnp.sp.web.lists.getByTitle("O365RoadMap").items.get().then(function(z){
    		console.log(z);
    		var result = z.results.map(a => ({
    			Title: `${a.Title}`,
    			Description: `${a.Description}`,
    			Link: `${a.Link}`
    			})
    		)
    		console.log(result);
    		document.getElementById("roadMap").innerHTML = JSON.stringify(result, null, 2)
    	})
    </script>

    <html lang="en">
      <body>

        <div>
          /* Code goes here */
        </div>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
      </body>
    </html>

All help would be must appreciated.

2

You’re already doing this?

3

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.