动态HTML元素中的多个JSON或JavaScript对象

Question

I want to pass entire JSON object to dynamic HTML elements.

Similar to this example

I used following codes to achieve this functionality -

btoa(unescape(encodeURIComponent(JSON.stringify(dataItem))))   // To escape special characters and encode JSON

'<p><a href="#" onclick="passJson(\'' + dataItem + '\')">Check console log</a></p>';

JSON.parse(atob(obj))  // to decode back to JSON

Before above example, I was working on this example to make my day miserable.

Last example has only one and big issue that all links are refering to last object generated by following code.

for(var i = 0; i < giveData().length; i++){
    var dataItem = giveData()[i];
    dataItem["name"] = dataItem["name"] + i;
    dataItem["value"] = i;

    var dataItem = btoa(unescape(encodeURIComponent(JSON.stringify(dataItem))))

    var divStr='<p><a href="#" onclick="passJson(\'' + dataItem + '\')">Check console log</a></p>';

    htmlStr += divStr;
}

I believe this is due to same variable name dataItem (which comes in HTML inside passJson() ).

While creating/updating variable divStr , it must be taking last value of dataItem variable before appending it to body.

var divStr='<p><a href="#" onclick="passJson(dataItem)">Check console log</a></p>';

1. Can you mention option(s) of improvement in final example if there is/are any? I am worried that this workaround will not work for bigger JSON objects.

2. Also, what mistake I was doing in initial example ?

I don't want to use attribute like this . And I don't want to pass stringified JSON object in HTML.

Don't worry about giveData() being called multiple times. I was lazy and at same time didn't wanted global array variable.

Thank you.

Answer 1

I guess you will always get last item for all click. you can check for adding item into another item.Also var dataItem = giveData()[i]; will again call the function which is not good.and same in for loop giveData().length will also call the same function agian so try to initialize giveData() with a variable and then use it and not call the function.One more thing as you have arrays of object you can opt for forEach.Or let us know what you want to achieve by doing this.

        var arrayObj= [{"context":{"dialog":{},"suggestions":["confusion","Were you looking for this?",[{"name":"Claim ratio","iid":"dkjw343-efkn3-34klffd"}]],"user":{"designation":"FLS","client_iid":1,"channel":"BANCA","name":"Sujit","dashboard_iid":1},"namespace":"sales"},"conversation_metadata":{"preprocessed_utterance":"solvency percentage","updated_context":{"dialog":{},"suggestions":["confusion","Were you looking for this?",[{"name":"Claim ratio","iid":"dkjw343-efkn3-34klffd"}]],"user":{"designation":"FLS","client_iid":1,"channel":"BANCA","name":"Sujit","dashboard_iid":1},"namespace":"sales"},"matching_intent":"fallback-intent","top_matches":[["dkjw343-efkn3-34klffd",0.4999999999999999,{"final_vector":{"solvency":1,"percentage":1},"concepts_interchanged":[],"concept_vector":{"percentage":1,"claim":1},"unknown_concept_query":[],"optional_concept":[],"question":"Claim ratio","weights":[["percentage",0.7071067811865475,1]]}],["jd34jn-43jn3-3kjnewd",0,{"final_vector":{"solvency":1,"calculate":1},"concepts_interchanged":[["calculate","percentage"]],"concept_vector":{"commission":1,"agent":1},"unknown_concept_query":[],"optional_concept":[],"question":"Agent commission","weights":[]}]],"status":"SUCCESS","time":0.020668506622314453},"end_time":"Fri, 28 Jul 2017 07:47:48 -0000","iid":"djnfdk-32n23nkjnk-23nkkjkjd","matched_query":"fallback-intent","flag":"DISLIKE","status":"SUCCESS","start_time":"Fri, 28 Jul 2017 07:47:48 -0000","response":[{"type":"text","content":"Sorry, I am unable to answer your query!","version":"0.0.0","interface":"web"}],"query":"solvency ratio","confidence":0.4999999999999999},{"context":{"dialog":{},"user":{"designation":"FLS","client_iid":1,"channel":"BANCA","name":"Sujit","dashboard_iid":1},"auto_suggest_selection":"dkjw343-efkn3-34klffd","previous_intent":"dkjw343-efkn3-34klffd","namespace":"sales"},"conversation_metadata":{"preprocessed_utterance":"claim percentage","updated_context":{"dialog":{},"user":{"designation":"FLS","client_iid":1,"channel":"BANCA","name":"Sujit","dashboard_iid":1},"auto_suggest_selection":"dkjw343-efkn3-34klffd","previous_intent":"dkjw343-efkn3-34klffd","namespace":"sales"},"matching_intent":"dkjw343-efkn3-34klffd","top_matches":[],"status":"SUCCESS","time":0.016078472137451172},"end_time":"Fri, 28 Jul 2017 07:47:52 -0000","iid":"sdlkmcllksd-23knlsd-32emmll32","matched_query":"dkjw343-efkn3-34klffd","flag":"CLEAR","status":"SUCCESS","start_time":"Fri, 28 Jul 2017 07:47:52 -0000","response":[{"type":"text","content":"Claim Settlement Ratio = Total Claims Approved (paid to nominees) divided by Total Claims Received by the Company.\nThe overall company claim ratio was 95% as on 2015-16.\nFor more specific claim ratios, please contact the claims team.\n","version":"0.0.0","interface":"web"}],"query":"Claim ratio","confidence":1}];

        var htmlStr = '';

        function passJson(obj) {
            console.log(JSON.parse(atob(obj)));
        }
        arrayObj.forEach(function(dataItem){                            
             var dataItem = btoa(unescape(encodeURIComponent(JSON.stringify(dataItem))))

            var divStr='<p><a href="#" onclick="passJson(\'' + dataItem + '\')">Check console log</a></p>';

            htmlStr += divStr;
        });            
        $('body').append(htmlStr);