Zugriff auf mehrere Datenfelder mit unterschiedlichen Nummern

Question

Ich habe Probleme beim Zugriff auf Daten innerhalb eines Arrays. Jedes Array hat eine eigene Nummer. Dann ist da noch ein Array drin. Ich möchte die name aus dem Array anzeigen.

Ich möchte die Daten wie folgt zugreifen:

source.tag.#ANY NUMBER#.name 

ich das Ergebnis wollen wie folgt aussehen:

Foo, Bar, Baz 

Versuch 1

InnerHTML={{__html:source.tag}} 

Ergebnis:

[object Object] 

Versuch 2

InnerHTML={{__html:JSON.stringify(source.tag)}} 

Ergebnis:

{"1":[{"name":"Foo"}],"2":[{"name":"Bar"}]} 

Versuch 3

InnerHTML={{__html:source.tag ? source.tag.map(item => item.name).join(', ') : ''}} 

Ergebnis: Nichts

Meine Daten sieht wie folgt aus:

"title" : "Test item"", 
"tag" : { 
    "1" : [ { 
    "name" : "Foo" 
    }, 
    { 
    "name" : "Bar" 
    } ], 
    "2" : [ { 
    "name" : "Baz" 
    } ] 
} 

Answer 1

Mit den Daten, können Sie die Klammer-Notation als property accessor für den Zugang von Schlüsseln wie Anzahl und Indizes benötigen, wie

source.tag[1][1].name // Bar 
      ^^^   // key of tag 
      ^^^  // index  

var source = { title: "Test item", tag: { 1: [{ name: "Foo" }, { name: "Bar" }], 2: [{ name: "Baz" }] } }; 
 

 
// single access 
 
console.log(source.tag[1][1].name); 
 

 
// get all names 
 
Object.keys(source.tag).forEach(function (key) { 
 
    source.tag[key].forEach(function (element) { 
 
     console.log(element.name); 
 
    }); 
 
});

Answer 2

Wenn wir Ihr Beispiel nehmen:

myObj = {"1":[{"name":"Foo"}],"2":[{"name":"Bar"}]};

dann auf z.B. die "Foo", müssen Sie auf diese Weise tun:

console.log(myObj["1"][0].name);

Das Skript Foo als Ergebnis gedruckt wird.

Wenn Sie das gesamte Objekt iterieren wollen, dann gehen Sie wie folgt vor:

for (var key in myObj) console.log(myObj[key][0].name);

Answer 3

Schleife durch jede Eigenschaft data.tag, die eine Anordnung ergeben, und für jede dieser Eigenschaften/Arrays , durchlaufen Sie jedes Array-Element und fügen Sie der wachsenden Zeichenfolge die Eigenschaft name dieses Elements sowie ein Komma hinzu. Am Ende entfernen Sie das letzte Komma. Der Code zeigt zwei verschiedene Möglichkeiten, dies zu erreichen.

const source = { 
 
    title: "Test item", 
 
    tag: { 
 
    "1": [{ 
 
     "name": "Foo" 
 
    }, { 
 
     "name": "Bar" 
 
    }], 
 
    "2": [{ 
 
     "name": "Baz" 
 
    }] 
 
    } 
 
}; 
 

 
let str1 = ''; 
 
for (let prop in source.tag) { 
 
    for (let elmt of source.tag[prop]) { 
 
    str1 += elmt.name + ','; 
 
    } 
 
} 
 
str1 = str1.slice(0, -1); 
 
console.log(str1); 
 

 
let str2 = ''; 
 
Object.keys(source.tag).map(num => { 
 
    str2 = source.tag[num].reduce((s, e) => s + e.name + ',', str2); 
 
}); 
 
str2 = str2.slice(0, -1); 
 
console.log(str2);

Answer 4

Das Objekt, das Sie erwähnt haben zusätzlich enthält (") Zeichen. Zuerst lassen Sie diesen extra (") Zeichen. Dann werden Sie in der Lage, die Namen zu trösten wie unten erwähnt:

class User extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     title: 'Tests item', 
     "tags" : { 
     "1":[{ 
       "name" : "Foo" 
      }, 
      { 
       "name" : "Bar" 
      }], 
     "2" : [ { 
       "name" : "Baz" 
       } ] 
     } 
    }; 
    } 

Wie Sie sehen Ich habe Ihre Daten im lokalen Zustand verwendet. So, jetzt ist es möglich, Namen jeden Tag zuzugreifen wie unten erwähnt:

console.log(this.state.tags["1"][0].name) 

Für echtes Beispiel bitte ausführen.

class User extends React.Component { 
 
    constructor(props) { 
 
    super(props); 
 
    this.state = { 
 
     title: 'Tests item', 
 
     "tags" : { 
 
     "1":[{ 
 
       "name" : "Foo" 
 
      }, 
 
      { 
 
       "name" : "Bar" 
 
      }], 
 
     "2" : [ { 
 
       "name" : "Baz" 
 
       } ] 
 
     } 
 
    }; 
 
    } 
 
transformTags() { 
 
    const newTagItems = []; 
 
    Object.keys(this.state.tags).forEach((key) => { 
 
     this.state.tags[key].forEach((item) => { 
 
      newTagItems.push(item.name); 
 
     }) 
 
    }); 
 
    return newTagItems.join(','); 
 
} 
 
    render(){ 
 
    // console.log(this.state.tags["1"][0].name) 
 
    return (
 
    <div> 
 
    <h4>{this.state.title} </h4> 
 
    <p>{this.transformTags()}</p> 
 
     </div> 
 
); 
 
} 
 

 
} 
 

 
ReactDOM.render(
 
    <User/>, 
 
    document.getElementById('root') 
 
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<meta name="description" content="ReactJS tags"> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 

 
</head> 
 
<body> 
 
    <div id="root"></div> 
 
</body> 
 
</html>