javascript - Send JS object from one HTML page to another

The scenario that I have is the following.

I have a main web-site with a list of employees retrieved as a JSON from a backing service. I am using Handlebars engine for templating and it looks like follows.

JSON

[{"FirstName":"Tom","LastName":"Stephens","BirthPlace":"London","Gender":"M","OIB":"12345678901","CurrentPlace":"Berkeley","Department":"21510"},
{"FirstName":"Abigail","LastName":"Ybarra","BirthPlace":"Miami","Gender":"F","OIB":"12345678902","CurrentPlace":"Los Angeles","Department":"21540"},
{"FirstName":"Kim","LastName":"Kardashian","BirthPlace":"New York","Gender":"F","OIB":"12345678903","CurrentPlace":"Boston","Department":"UNKNOWN"},
{"FirstName":"David","LastName":"Beckham","BirthPlace":"London","Gender":"M","OIB":"12345678904","CurrentPlace":"Manchester","Department":"UNKNOWN"},
{"FirstName":"Zlatan","LastName":"Ibrahimovic","BirthPlace":"Stockholm","Gender":"M","OIB":"12345678905","CurrentPlace":"Zenica","Department":"21540"}]

index.html

<script id="employees-template" type="text/x-handlebars-template">
<ul>
    {{#each employees}}
        <li>{{FirstName}}</li> <!-- use URL to a details website instead of FirstName -->
    {{/each}}
</ul>
</script>

The list of employees is being fetched on a button click, which is defined as follows.

main.js

// on-click listener
    $("#btn-show").click(function(e) {
        // AJAX call on button clicked
        $.ajax({
            type: "GET",
            dataType: "json",
            url: "http://127.0.0.1:8080/api/employee/",
            error: function (xhr) {
                console.log(xhr.statusText);
            }
        }).done(function(data) {
            // render data to html template
            var html = template({employees : data});
            $("#render-here").html(html);
        });
    });

This works like so: when a button is clicked, a list of employee names is rendered.

Now, what I want to achieve is that each of those names is actually a URL that leads to a page with all details about the specific employee.

For example, if a user clicks on URL "Tom" in a list, a new HTML page should open with all the details about Tom including FirstName, LastName, BirthPlace, CurrentPlace etc. This simple page can be called employee.html.

employee.html

<html>
    <head>
    </head>

    <body>

        <p>
            Firstname: {{FirstName}}
        </p>

        <p>
            LastName: {{LastName}}
        </p>

        <p>
            CurrentPlace: {{CurrentPlace}}
        </p>

        <p>
            BirthPlace: {{BirthPlace}}
        </p>

        <p>
            Gender: {{Gender}}
        </p>

        <p>
            Department: {{Department}}
        </p>

    </body>

</html>

The question is now how can I send all the details for a specific employee from my main.html page to a specific employee.html page (when the URL for a specific employee is clicked on)?

I understand I could pass all the parameters via the URL, but that seems really ugly forcing a user to see this unnecessary detailed URL.

Is there some better option?

The scenario that I have is the following.

I have a main web-site with a list of employees retrieved as a JSON from a backing service. I am using Handlebars engine for templating and it looks like follows.

JSON

[{"FirstName":"Tom","LastName":"Stephens","BirthPlace":"London","Gender":"M","OIB":"12345678901","CurrentPlace":"Berkeley","Department":"21510"},
{"FirstName":"Abigail","LastName":"Ybarra","BirthPlace":"Miami","Gender":"F","OIB":"12345678902","CurrentPlace":"Los Angeles","Department":"21540"},
{"FirstName":"Kim","LastName":"Kardashian","BirthPlace":"New York","Gender":"F","OIB":"12345678903","CurrentPlace":"Boston","Department":"UNKNOWN"},
{"FirstName":"David","LastName":"Beckham","BirthPlace":"London","Gender":"M","OIB":"12345678904","CurrentPlace":"Manchester","Department":"UNKNOWN"},
{"FirstName":"Zlatan","LastName":"Ibrahimovic","BirthPlace":"Stockholm","Gender":"M","OIB":"12345678905","CurrentPlace":"Zenica","Department":"21540"}]

index.html

<script id="employees-template" type="text/x-handlebars-template">
<ul>
    {{#each employees}}
        <li>{{FirstName}}</li> <!-- use URL to a details website instead of FirstName -->
    {{/each}}
</ul>
</script>

The list of employees is being fetched on a button click, which is defined as follows.

main.js

// on-click listener
    $("#btn-show").click(function(e) {
        // AJAX call on button clicked
        $.ajax({
            type: "GET",
            dataType: "json",
            url: "http://127.0.0.1:8080/api/employee/",
            error: function (xhr) {
                console.log(xhr.statusText);
            }
        }).done(function(data) {
            // render data to html template
            var html = template({employees : data});
            $("#render-here").html(html);
        });
    });

This works like so: when a button is clicked, a list of employee names is rendered.

Now, what I want to achieve is that each of those names is actually a URL that leads to a page with all details about the specific employee.

employee.html

<html>
    <head>
    </head>

    <body>

        <p>
            Firstname: {{FirstName}}
        </p>

        <p>
            LastName: {{LastName}}
        </p>

        <p>
            CurrentPlace: {{CurrentPlace}}
        </p>

        <p>
            BirthPlace: {{BirthPlace}}
        </p>

        <p>
            Gender: {{Gender}}
        </p>

        <p>
            Department: {{Department}}
        </p>

    </body>

</html>

The question is now how can I send all the details for a specific employee from my main.html page to a specific employee.html page (when the URL for a specific employee is clicked on)?

I understand I could pass all the parameters via the URL, but that seems really ugly forcing a user to see this unnecessary detailed URL.

Is there some better option?

Share asked Sep 15, 2017 at 14:40 wesleyy 2,75511 gold badges36 silver badges61 bronze badges

You could stringify the data and add it to localStorage. Note: there are size limitations. – Andy Commented Sep 15, 2017 at 14:42
I believe you are using angularjs. Why not make use of services. – Hacker Commented Sep 15, 2017 at 14:55

Add a ment |

2 Answers 2

Sorted by: Reset to default 4

You can save it to localStorage and on the detail page retrieve the employee info from the local storage

You have to stringify the Json so it can be set to local storage (local storage only saves strings), and then set it to a variable in the local storage like this

localStorage["employees"] = JSON.stringify(json);

And to retrieve it use Parse to pars Json to and JS Object fron string like this

var employees = JSON.parse(localStorage["employees"]);

For more information on localStorage take a look at localStorage - MDN.

Use localStorage.setItem("employerList", JSON.stringify(employerData)) in the main page and the in the deail page use var data = JSONparse(localStorage.getItem("employerList")) and get you json in the data variable.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Send JS object from one HTML page to another - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)