javascript - 仅将一些对象值转换为数组

Question

所以我有这个对象数组：

 [
    {
    "id": "774944",
    "general": {
      "presentable_id": "774944",
      "name": "Blekk BROTHER LC1280XLC blå",
      "description": "<p><b>Få optimale utskriftsresultater, tydelig tekst og levende grafikk med Brother LC1280XLC-blekkpatronen i cyan.</b></p><li>Se kompatibilitetsoversikten for passende maskiner</li>"
    },
    "brand": {
      "name": "Brother Norge AS"
    },
    "images": {
      "primary": {
        "large": "https://i.imgur.com/zYcibjw.jpg"
      }
    }
    },
    {
    "id": "774945",
    "general": {
      "presentable_id": "774945",
      "name": "Blekk BROTHER LC1280XLM rød",
      "description": "<p><b>Få optimale utskriftsresultater, tydelig tekst og levende grafikk med Brother LC1280XLM-blekkpatronen i magenta.</b></p><p>Denne Brother som ikke falmer, for svært holdbare utskrifter. Denne blekkpatronen i magenta har en kapasitet på opptil 1200 sider.</p><li>Farge: Magenta</li><li>Kapasitet: Opptil 1200 A4-sider </li><li>Enkel å installere og skifte ut</li><li>Flekkbestandig og falmer ikke</li><li>Gir tekst og bilder med utmerket kvalitet</li><li>Se kompatibilitetsoversikten for passende maskiner</li>"
    },
    "brand": {
      "name": "Brother Norge AS"
    },
    "images": {
      "primary": {
        "large": "https://i.imgur.com/ucfnti1.jpg"
      }
    }
    },
    {
    "id": "774946",
    "general": {
      "presentable_id": "774946",
      "name": "Blekk BROTHER LC1280XLY gul",
      "description": "<p><b>Enkel å installere og skifte ut</li><li>Flekkbestandig og falmer ikke</li><li>Gir tekst og bilder med utmerket kvalitet</li><li>Se kompatibilitetsoversikten for passende maskiner</li>"
    },
    "brand": {
      "name": "Brother Norge AS"
    },
    "images": {
      "primary": {
        "large": "https://i.imgur.com/6zdrajU.jpg"
      }
    }
    },]

我希望从 ii 中提取所有 'id' 值并将它们插入到数组中。我设法开发了这个：

let id_array = [];
class URLextracted extends Component {
constructor(props) {
  super(props);
  this.state = {
    output: {},
  };
}

componentDidMount() {
  fetch({ShowResults()})
    .then(response => response.json())
    .then(data => this.setState({ output: data }));
}
render() {
const { id } = this.state.output;
id_array.push(id);
return id_array;
}
}

ShowResults() 在上面的 fetch 中插入一个 API 链接。我什至不确定我是否应该在这里使用组件。我希望这个输出：

id_array = ['774944','774945','774946']

我自己无法弄清楚如何做到这一点：/

标签： javascriptreactjsapi

Answer 1

如果这是你想要的，你可以使用map来迭代你的数据，提取并渲染这些数据。id我正在提供一个工作示例。不要考虑getData部分。我只是在这里模仿 fetch 部分。您可以检查render组件的一部分。另外，我已将output状态更改为数组，因为您的数据实际上是一个数组。

const data = [
  {
    id: "774944",
    general: {
      presentable_id: "774944",
      name: "Blekk BROTHER LC1280XLC blå",
      description:
        "<p><b>Få optimale utskriftsresultater, tydelig tekst og levende grafikk med Brother LC1280XLC-blekkpatronen i cyan.</b></p><li>Se kompatibilitetsoversikten for passende maskiner</li>"
    },
    brand: {
      name: "Brother Norge AS"
    },
    images: {
      primary: {
        large: "https://i.imgur.com/zYcibjw.jpg"
      }
    }
  },
  {
    id: "774945",
    general: {
      presentable_id: "774945",
      name: "Blekk BROTHER LC1280XLM rød",
      description:
        "<p><b>Få optimale utskriftsresultater, tydelig tekst og levende grafikk med Brother LC1280XLM-blekkpatronen i magenta.</b></p><p>Denne Brother som ikke falmer, for svært holdbare utskrifter. Denne blekkpatronen i magenta har en kapasitet på opptil 1200 sider.</p><li>Farge: Magenta</li><li>Kapasitet: Opptil 1200 A4-sider </li><li>Enkel å installere og skifte ut</li><li>Flekkbestandig og falmer ikke</li><li>Gir tekst og bilder med utmerket kvalitet</li><li>Se kompatibilitetsoversikten for passende maskiner</li>"
    },
    brand: {
      name: "Brother Norge AS"
    },
    images: {
      primary: {
        large: "https://i.imgur.com/ucfnti1.jpg"
      }
    }
  },
  {
    id: "774946",
    general: {
      presentable_id: "774946",
      name: "Blekk BROTHER LC1280XLY gul",
      description:
        "<p><b>Enkel å installere og skifte ut</li><li>Flekkbestandig og falmer ikke</li><li>Gir tekst og bilder med utmerket kvalitet</li><li>Se kompatibilitetsoversikten for passende maskiner</li>"
    },
    brand: {
      name: "Brother Norge AS"
    },
    images: {
      primary: {
        large: "https://i.imgur.com/6zdrajU.jpg"
      }
    }
  }
];

const getData = () =>
  new Promise(resolve => setTimeout(() => resolve(data), 2000));

class App extends React.Component {
  state = {
    output: []
  };

  componentDidMount() {
    getData().then(output => this.setState({ output }));
  }

  render() {
    const { output } = this.state;
    return !output.length ? (
      <div>Loading...</div>
    ) : (
      output.map(({ id }) => <div key={id}>{id}</div>)
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root" />