jQuery vergleicht den Schlüssel eines Arrays mit dem Wert eines anderen Arrays und gibt eine Übereinstimmung zurück

Question

Mit $ .getJSON werden Daten aus einer externen .json-Datei mit folgendem Inhalt abgerufen.

{ 
 
    "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" 
 
}

Was will ich erreichen ist, wie folgend. Erstellen Sie ein neues Objekt basierend auf dem Array "desc" mit dem Schlüsselwert des Paares.

"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" 
 
     ] 
 
    } 
 
]

Und mit dem neuen "desc" Objekt erstellen HTML-Inhalte auf einer HTML-Seite anhängen. beachte, dass die "desc" array = die DOM-Hierarchie von Rückgabedaten

wenn Schlüssel enthalten "title_", Druckwert innerhalb eines <h4> (ohne <span>). Ergebnis: <h4>Header</h4>

Wenn Schlüssel "p_" enthält, Druckwert in einem <p> (ohne <span>). Ergebnis: <p>Description</p>

Wenn der Schlüssel "ul_" enthält, drucken Sie jedes Objekt in eine <li> Schleife. Ergebnis: <ul><li>Listing One</li><li>Listing Two</li></ul>

Dies wird das Endergebnis auf der Seite anhängen

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

Jede Idee, wie dieses Ergebnis zu erreichen mit jQuery? Danke im Voraus.

Answer 1

Sie können die desc Array aus Ihrem JSON-Daten herausnehmen und gehen durch die es wie unten-

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. 

Bitte beachten Sie, dass die $(value).text() Funktion beim Entfernen der HTML-Tags hilft, also verwenden Sie sie überall dort, wo Sie nur den Text ohne HTML-Tags benötigen.

Hier ist eine Geige dies in Aktion zu sehen - https://jsfiddle.net/schikara/0kf7ht3w/8/

Answer 2

Um zu erreichen, was Sie benötigen, müssen Sie zunächst den JSON gemäß Ihrer Anforderung analysieren und dann den Textinhalt aus den Hauptdaten aus span extrahieren. Schließlich sollten Sie dies an eine Variable anhängen und sie auf Ihrer Seite sichtbar machen. Beloa ist die Beispielimplantierung

Hier erhalten wir JSON und Extrahieren von Daten aus dem Hauptinhalt wie wir Werte in desc Array haben. Wir fügen li Daten in Liste Variable und Rest der Dinge werden in html Variable wechseln.

$.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. 

}); 

Ich habe zum Extrahieren von Textinhalt aus der Spanne unten Funktion erstellt:

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

Answer 3

Versuchen

// 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>