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

Question

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

类似于this example

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

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 (它以 HTML 形式出现在 passJson() 中)。

创建/更新变量 divStr 时，必须先获取 dataItem 变量的最后一个值，然后再将其附加到正文。

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

<强>1。您能在final example中提到改进的选项吗？如果有/有吗？我担心这个解决方法不适用于更大的 JSON 对象。

<强>2。另外，我在 initial example 中犯了什么错误？ ？

我不想想要使用属性 like this 。而且我不想想要在 HTML 中传递字符串化的 JSON 对象。

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

谢谢。

Answer 1

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

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