Question

我无法访问数组内部的数据。每个数组都有自己的编号。然后在里面有一个数组。我想从数组中显示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"
  } ]
}

Answer 1

对于数据，您需要使用括号表示法property accessor来访问键作为数字和索引，例如

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

＆＃13;

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

＆＃13;

Answer 2

如果我们举个例子：

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

然后访问例如＆＃34; Foo＆＃34;，您需要这样做：

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

该脚本将打印 Foo 。

如果要迭代整个对象，请执行以下操作：

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

Answer 3

您提到的对象包含额外的（＆＃34;）字符。首先省略这个额外的（＆＃34;）字符。然后，您将能够控制下面提到的名称：

bool

正如您所看到的，我已将您的数据用于本地状态。所以现在可以访问每个标签的名称，如下所述：

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

如果是真实的例子，请运行它。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

循环遍历data.tag的每个属性，这将产生一个数组，并为每个属性/数组循环遍历每个数组元素，将该元素的name属性添加到不断增长的字符串中，再加上逗号。最后，删除最后一个逗号。代码显示了实现此目的的两种不同方式。

＆＃13;

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

＆＃13;

访问具有不同数字的多个数据阵列

4 个答案: