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（）将API链接插入到上面的提取中。我什至不确定我是否应该在这里使用组件。我希望这样输出：

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

我自己不知道该怎么做：/

Answer 1

let id_array = [];
let myJSON = [{
    "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"
      }
    }
  },
];

myJSON.map(a => id_array.push(a.id));

console.log(id_array);

Answer 2

尝试一下：

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 result = data.map(res=>res.id);
    console.log(result)

Answer 3

如果需要，可以使用map遍历数据，提取id并呈现此数据。我正在提供一个有效的示例。不要考虑getData部分。我只是在这里模仿获取部分。您可以检查组件的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" />

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

3 个答案: