Как извлечь данные из запроса JSON rest и привязать их к переменной для выполнения с ними расчетов? - PullRequest
Новая
       70

Как извлечь данные из запроса JSON rest и привязать их к переменной для выполнения с ними расчетов?

0 голосов
/ 18 июня 2020

Я просто исследую мир Vue и запустил небольшое приложение Webb для управления проектами. Теперь я химик, поэтому мне захотелось проводить эксперименты.

В химии мы используем нотацию SMILES для описания молекул в форме строки, известные молекулы хранятся в базе данных, где другие свойства этих молекул хранятся вместе с их улыбками.

Я использую базу данных pubchem и отправляю REST-запрос, чтобы получить эти свойства и отобразить их на моем сайте.

Я хотел работать следующим образом: если пользователь вводит код улыбки, веб-приложение запрашивает информацию о нем из базы данных и извлекает молекулярную массу. Если молекула неизвестна, я хочу иметь возможность установить молекулярный вес пользователем (чтобы полученный молекулярный вес был сохранен в поле ввода)
Однако я не могу заставить это работать. Я могу сделать запрос, показать молекулярный вес, но не могу привязать его к своим данным.

Если я изменю this.info2 = res.data.PropertyTable.Properties в моей ФУНКЦИИ GETJOKES на this.info2 = res.data.PropertyTable.Properties.MolecularWeigth, я не смогу получить к нему доступ, и он вернет значение undefined. ...

извините за код, это немного беспорядок, потому что это была долгая долгая ночь ...

заранее спасибо

Max 

  <div class="NewExperiment">
    <h1>Make a New Experiment</h1>
    <v-container class="my-12">content</v-container>

    <v-form>
      <!-- <V-text-field label="inhoud" v-model="inhoud"></V-text-field>
      <V-text-field label="inhoud-2" v-model="inhoud2"></V-text-field>
      <V-text-field label="filename" v-model="filename"></V-text-field>
      <v-btn @click="downloadnow">download</v-btn>
      <V-text-field label="Smiles" v-model="smiles"></V-text-field>-->
      <v-btn @click="getJokes">get formula</v-btn>
    </v-form>
    <div>{{ MolWe}}</div>
    <div>{{ info2 }}</div>
    <div>{{ info2.MolecularFormula }}</div>
    <div>
      <V-text-field v-for="Properties in info2" :key="Properties"></V-text-field>

      <div v-for="Properties in info2" :key="Properties">{{ Properties.MolecularWeight }}</div>
    </div>
  </div>
</template>

<script>
// import { saveAs } from "file-saver";
import Vue from "vue";
import axios from "axios";
import VueAxios from "vue-axios";
Vue.use(VueAxios, axios);

export default {
  name: "Projects",

  data() {
    return {
      inhoud: "",
      inhoud2: "",
      smiles: "",
      filename: "",
      Smiles: "",
      info: "",
      info2: [],
      MolWe: ""
    };
  },
  // async created() {
  //   try {
  //     const res = await axios.get(
  //       "https://pubchem.ncbi.nlm.nih.gov/rest/pug/compound/smiles/" +
  //         Smiles +
  //         "/property/MolecularFormula,MolecularWeight,IUPACName/JSON"
  //     );
  //     this.info = res.data;
  //   } catch (e) {
  //     console.error(e);
  //   }
  // },

  // mounted() {
  //   axios;
  //   axios
  //     .get(
  //       "https://pubchem.ncbi.nlm.nih.gov/rest/pug/compound/cid/2244/property/MolecularFormula/JSON"
  //     )
  //     .then((response) => (this.info = response.data.bpi))
  //     .catch((error) => console.log(error));
  // },
  methods: {
    async getJokes() {
      const smilesUrl = this.smiles;

      const res = await axios.get(
        "https://pubchem.ncbi.nlm.nih.gov/rest/pug/compound/smiles/" +
          smilesUrl +
          "/property/MolecularFormula,MolecularWeight,IUPACName/JSON"
      );

      this.info2 = res.data.PropertyTable.Properties;
      // var result = JSON.parse(res.data);
      // alert(result);
      alert(JSON.stringify(res.data.PropertyTable.Properties, null, 4));
    }

    // downloadnow: function() {
    //   var name = this.filename + ".txt";
    //   var TotInhoud = this.inhoud + this.inhoud2;
    //   // var text = this.inhoud;

    //   var blob = new Blob([TotInhoud], {
    //     type: "text/plain;charset=utf-8"
    //   });
    //   saveAs(blob, name);
    // }
  }
};
</script>
...