jQuery比较一个数组的值与另一个数组的值并返回匹配

Question

使用$ .getJSON从外部.json文件中获取具有以下内容的数据。

{ 
 
    "title_12345":"<span class=\"header-class\">Header</span>", 
 
    "p_12345":"<span class=\"description-class\">description</span>", 
 
    "p_23456":"Another paragraph", 
 
    "p_34567":"Another second paragraph", 
 
    "desc": [ 
 
     "title_12345", 
 
     "p_12345", 
 
     { 
 
      "ul_12345": [ 
 
       "li_1", 
 
       "li_2" 
 
      ] 
 
     }, 
 
     "p_23456", 
 
     { 
 
      "ul_12345": [ 
 
       "li_3", 
 
       { 
 
        "ul_23456": [ 
 
        "li_6", 
 
        "li_7" 
 
        ] 
 
       }, 
 
       "li_4", 
 
       "li_5" 
 
      ] 
 
     } 
 
    ], 
 
    "li_1":"Listing One", 
 
    "li_2":"Listing Two", 
 
    "li_3":"Another Listing", 
 
    "li_4":"Another Second Listing", 
 
    "li_5":"Another Thrid Listing", 
 
    "li_6":"Sub One Listing", 
 
    "li_7":"Sub Two Listing" 
 
}

我想实现的是如下。 基于带有匹配对键值的“desc”数组创建一个新对象。

"desc": [ 
 
    "title_12345":"<span class=\"header-class\">Header</span>", 
 
    "p_12345":"<span class=\"description-class\">Description</span>", 
 
    { 
 
     "ul_12345": [ 
 
      "li_1":"Listing One", 
 
      "li_2":"Listing Two" 
 
     ] 
 
    }, 
 
    "p_23456":"Another paragraph", 
 
    { 
 
     "ul_23456": [ 
 
      "li_3":"Another Listing", 
 
      { 
 
       "ul_23456": [ 
 
       "li_6":"Sub One Listing", 
 
       "li_7":"Sub Two Listing" 
 
       ] 
 
      }, 
 
      "li_4":"Another Second Listing" 
 
      "li_5":"Another Thrid Listing" 
 
     ] 
 
    } 
 
]

而且随着新的 “递减” 的对象，创建HTML内容附加到HTML页面。 注意“desc”的数组=返回数据

如果键包含“title_”，一个<h4>内打印值（无<span>）的DOM层次结构。结果：<h4>Header</h4>

如果键包含“p_”，打印值在<p>（不含<span>）内。结果：<p>Description</p>

如果键包含“ul_”，则打印<li>循环内的每个对象。结果：<ul><li>Listing One</li><li>Listing Two</li></ul>

这将是最终的结果要追加页面

<h4>Header</h4> 
 
<p>Description</p> 
 
<ul> 
 
    <li>Listing One</li> 
 
    <li>Listing Two</li> 
 
</ul> 
 
<p>Another paragraph</p> 
 
<ul> 
 
    <li>Another Listing</li> 
 
     <ul> 
 
      <li>Sub One Listing</li> 
 
      <li>Sub Two Listing</li> 
 
     </ul> 
 
    <li>Another Second Listing</li> 
 
</ul>

任何想法如何实现使用jQuery这样的结果？提前致谢。

Answer 1

您可以从您的JSON数据取出desc阵列和经过它像如下─

var temp = YOURJSONDATA; 
var desc = temp.desc; 
var results = {}; 
var htmlString = ''; 
$.each(desc, function(index, item) { 
    if(typeof item === 'object') { 
     Object.keys(item).forEach(function(key) { 
      htmlString += '<ul>'; 
       $.each(item[key], function(innerIndex, innerItem) { 
      if(!results.hasOwnProperty(key)) results[key] = Array(); 
      results[key][innerItem] = temp.hasOwnProperty(innerItem) ? temp[innerItem] : ''; 
      console.log(results[key][innerItem]); 
      htmlString += getHtmlForKey(innerItem, results[key][innerItem]); 
      }); 
      htmlString +='</ul>'; 
      }); 
    } else { 
     results[item] = temp.hasOwnProperty(item) ? temp[item] : ''; 
     htmlString += getHtmlForKey(item, results[item]); 
    } 
}); 
function getHtmlForKey(key, value) { 
    if(key.indexOf('title_') !== -1) { return "<h4>"+getData(value)+"</h4>"; } 
    if(key.indexOf('p_') !== -1) { return "<p>"+getData(value)+"</p>"; } 
    if(key.indexOf('li_') !== -1) { return "<li>"+getData(value)+"</li>"; } 
} 
function getData(str) { 
    var testElement= document.createElement('testElement'); 
    testElement.innerHTML= str; 
    return testElement.textContent || testElement.innerText; 
} 
//htmlString variable now contains the final HTML string. 

请注意$(value).text()函数有助于剥离HTML标签，所以无论您只需要没有html标签的文本，都可以使用它。

这里是一个小提琴看到这个动作 - https://jsfiddle.net/schikara/0kf7ht3w/8/

Answer 2

要达到您的要求，您必须先根据您的要求解析JSON，然后从主数据中提取范围中的文本内容。 Finaaly你应该在一些变量中附加这个变量，并使其在你的页面中可见。 Beloa是示例障碍

这里我们正在获取JSON并根据我们在desc数组中提供的值从主内容中提取数据。我们正在追加李数据在列表变量和其余的东西会去HTML变量。

$.getJSON("test.json", function(result){ 
    var arr = result.desc; 
    var html="",list="<ul>"; 
    for(var i=0;i<arr.length;i++){     
     if(typeof(arr[i])=='object'){ 
      for (var key in arr[i]){ 
       if(key.indexOf("ul_")!=-1){ 
        var liItems = arr[i][key]; 
        for(var j=0;j<liItems.length;j++){ 
         list+="<li>"+extractText(result[liItems[j]])+"</li>"; 
        } 
       } 
      } 
     } 
     else if(arr[i].indexOf("title_")!=-1){ 
      html+="<h4>"+extractText(result[arr[i]])+"</h4>"; 
     } 
     else if(arr[i].indexOf("p_")!=-1){ 
      html+="<p>"+extractText(result[arr[i]])+"</p>"; 
     } 
    } 
    list+="</ul>" 
    html+=list; 
    $("#showHtml").html(html); // show final html whereever you want. 

}); 

我在下面函数创建从跨度提取文本内容：

function extractText(s) { 
    var span= document.createElement('span'); 
    span.innerHTML= s; 
    return span.textContent || span.innerText; 
}; 

Answer 3

尝试

// Helper function to check if variable is an object(i,e.. {}) 
 
function isObject(obj) { 
 
    return Object.prototype.toString.call(obj) === '[object Object]' 
 
} 
 

 
// Parent for append elements 
 
var parent = $("#parent") 
 

 
// JSON data 
 
var json = { 
 
    "title_12345": "<span class=\"header-class\">Header</span>", 
 
    "p_12345": "<span class=\"description-class\">Description</span>", 
 
    "p_23456": "Another paragraph", 
 
    "desc": [ 
 
     "title_12345", 
 
     "p_12345", 
 
     { 
 
      "ul_12345": [ 
 
       "li_1", 
 
       "li_2", 
 
      ] 
 
     }, 
 
     "p_23456", 
 
     { 
 
      "ul_131233": [ 
 
       "li_21", 
 
       "li_22", 
 
      ] 
 
     } 
 

 
    ], 
 
    "li_1": "Listing One", 
 
    "li_2": "Listing Two", 
 
    "li_21": "Another Listing", 
 
    "li_22": "Another second paragraph", 
 
} 
 

 
// Mapping of html tags to be used 
 
var htmltags = { 
 
    'title': 'h4', 
 
    'p': 'p', 
 
    'ul': 'ul', 
 
    'li': 'li' 
 
} 
 

 
// Iterating over desc, maintains level 
 
json["desc"].forEach(function (element) { 
 

 
    // Calls approprite method to handle given element 
 
    if (Array.isArray(element)) { 
 
     parseArray(element) 
 
    } else if (isObject(element)) { 
 
     parseObject(element) 
 
    } else { 
 
     var child = document.createElement(htmltags[element.split('_')[0]]) 
 
     child.innerHTML = $(json[element]).text() || json[element] || "" 
 
     parent.append(child) 
 
    } 
 
}) 
 

 
function parseArray(element) { 
 
    element.forEach(function (item) { 
 
     if (Array.isArray(item)) { 
 
      parseArray(item) 
 
     } else if (isObject(item)) { 
 
      parseObject(item) 
 
     } else { 
 
      var child = document.createElement(htmltags[item.split('_')[0]]) 
 
      child.innerHTML = $(json[item]).text() || json[item] || "" 
 
      parent.append(child) 
 
     } 
 
    }) 
 

 
} 
 

 
function parseObject(element) { 
 
    Object.keys(element).forEach(function (key) { 
 
     if (Array.isArray(element[key])) { 
 
      var child = document.createElement(htmltags[key.split('_')[0]]) 
 
      parent.append(child) 
 
      parent = child 
 
      parseArray(element[key]) 
 
      parent = $("#parent") 
 

 
     } else if (isObject(element[key])) { 
 
      parseObject(element[key]) 
 
     } else { 
 
      var child = document.createElement(htmltags[element[key].split('_')[0]]) 
 
      child.innerHTML = $(json[element[key]]).text() || "" 
 
      parent.append(child) 
 

 
     } 
 
    }) 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="parent"></div>