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>