異なる番号の複数のデータ配列にアクセスする

配列内のデータにアクセスするのが困難です。各配列には固有の番号があります。それからその内部に配列があります。私は配列からnameを表示したいと思います。異なる番号の複数のデータ配列にアクセスする

私はこのようなデータにアクセスしたい：

source.tag.#ANY NUMBER#.name

私は結果は次のようになりたい：

Foo, Bar, Baz

試み1

InnerHTML={{__html:source.tag}}

結果：

[object Object]

試み2

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

結果：

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

試み3

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

結果：何も

私のデータは次のようになります。データで

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

出典

2017-02-10 Yian

、あなたは

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

のように、数やインデックスなどのキーのアクセスのための property accessorとしてブラケット表記を必要とします

出典

2017-02-10 07:37:54

例：

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

「フー」は、あなたがこの方法を実行する必要があります。

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

スクリプトは、結果としてFooのを印刷します。

あなたがオブジェクト全体を反復処理したい場合は、次の操作を行います

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

出典

2017-02-10 07:48:07 SaWo

私はONE結果を望んでいない、私はすべての結果が欲しいです – Yian

ループの配列が得られますDATA.TAGの各プロパティを使用して、およびそれらのプロパティ/アレイの各々のために各配列要素をループし、その要素のnameプロパティを文字列に追加し、コンマを加えます。最後に、最後のカンマを削除します。このコードは、これを達成するための2つの異なる方法を示しています。

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

出典

2017-02-10 07:52:57

あなたが言及しているオブジェクトは、余分な（ "）が含まれた文字を。最初にこの余分な省略（"）文字を。それで、あなたは次のように名前をコンソール化することができます：

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

私はあなたのデータをローカルで使っています。だから今、それは怒鳴る述べたように、各タグの名前にアクセスすることにあります：

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

本当例えば、それを実行してください。

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>

出典

2017-02-10 08:49:18

異なる番号の複数のデータ配列にアクセスする

答えて

関連する問題