Question

我想将整个JSON对象传递给动态HTML元素。

我使用以下代码来实现此功能 -

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

在上面的例子之前，我正在研究this example让我的日子变得悲惨。

最后一个例子只有一个大问题，即所有链接都引用了下面代码生成的最后一个对象。

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;
}

我认为这是由于相同的变量名dataItem（来自passJson()内的HTML）。

在创建/更新变量divStr时，必须先将dataItem变量的最后一个值添加到正文中。

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

1。如果有的话，你能在final example中提及改进方案吗？我担心这种解决方法不适用于更大的JSON对象。

2。另外，我在initial example做了什么错误？

我don't想要使用attribute like this。我don't希望在HTML中传递字符串化的JSON对象。

不要担心多次调用giveData()。我很懒，同时也不想要全局数组变量。

谢谢。

Answer 1

我猜你总是得到所有点击的最后一项。您可以检查是否将项目添加到另一个项目中。另外var dataItem = giveData()[i];将再次调用不好的函数。并且for循环giveData().length中的相同函数也将调用相同的函数agian，因此尝试初始化giveData（）使用变量然后使用它而不是调用函数。还有一件事，因为你有对象数组，你可以选择forEach.Or让我们知道你想要实现的目标。

        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);

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

1 个答案: