इसलिए मुझे अंततः "लोगों" ऑब्जेक्ट से प्रत्येक चरित्र के नाम प्रदर्शित करने के लिए स्टार वार्स एपीआई मिला, इस JSON सरणी से लिया गया वेनिला जावास्क्रिप्ट में https://swapi.co/api/people/। हालांकि, मुझे विशिष्ट मान के आधार पर डेटा परिणामों को सॉर्ट या फ़िल्टर करना होगा जो कि https:// है। swapi.co/api/species/1/ मेरे पास वर्तमान कोड है, जब मैं इसे चलाता हूं तो लोगों की सभी प्रजातियों के नामों के साथ तालिका प्रदर्शित करता है, मुझे केवल मानव प्रजातियों की आवश्यकता होती है। यहाँ मेरा कोड है:

const url = 'https://swapi.co/api/species/1/?format=json';

function fetchData(url) {
    return fetch(url).then((resp) => resp.json());
}

function constructTableRow(data) {
    const row = document.createElement('tr');
    const {
        name,
        height,
        mass,
        hair_color
    } = data;
    row.appendChild(constructElement('td', name))
    row.appendChild(constructElement('td', height))
    row.appendChild(constructElement('td', mass))
    row.appendChild(constructElement('td', hair_color))
    return row;
}

function constructElement(tagName, text, cssClasses) {
    const el = document.createElement(tagName);
    const content = document.createTextNode(text);
    el.appendChild(content);
    if (cssClasses) {
        el.classList.add(...cssClasses);
    }
    return el;
}

const swTable = document.getElementById('sw-table').getElementsByTagName('tbody')[0];

fetchData('https://swapi.co/api/people/').then((data) => {
    data.results.forEach(result => {
        const row = constructTableRow(result);
        swTable.appendChild(row);
    });
});
<table id=sw-table><tbody></tbody></table>

JSON एंडपॉइंट https://swapi.co/api/people/ से आता है

मैं केवल मानव प्रजातियों के लिए डेटा प्रदर्शित करने के लिए तालिका कैसे प्राप्त करूं?

1
MikeL5799 3 अप्रैल 2018, 23:22

4 जवाब

सबसे बढ़िया उत्तर

प्रजाति एपीआई द्वारा लौटाए गए JSON में एक people सरणी शामिल है। इसलिए people को फ़िल्टर करने के बजाय, पीपल एरे पर लूप करें।

हालांकि, यह SWAPI दर सीमित करने के कारण समस्या पैदा कर सकता है।

const url = 'https://swapi.co/api/species/1/?format=json';

function fetchData(url) {
  return fetch(url).then((resp) => resp.json());
}

function constructTableRow(data) {
  const row = document.createElement('tr');
  const {
    name,
    height,
    mass,
    hair_color
  } = data;
  row.appendChild(constructElement('td', name))
  row.appendChild(constructElement('td', height))
  row.appendChild(constructElement('td', mass))
  row.appendChild(constructElement('td', hair_color))
  return row;
}

function constructElement(tagName, text, cssClasses) {
  const el = document.createElement(tagName);
  const content = document.createTextNode(text);
  el.appendChild(content);
  if (cssClasses) {
    el.classList.add(...cssClasses);
  }
  return el;
}

const swTable = document.getElementById('sw-table').getElementsByTagName('tbody')[0];

fetchData(url).then(data =>
  data.people.forEach(personUrl =>
    fetchData(personUrl).then(result => {
      const row = constructTableRow(result);
      swTable.appendChild(row);
    })
  )
);
<table id=sw-table>
  <tbody></tbody>
</table>
1
Barmar 3 अप्रैल 2018, 20:36

और दूसरा उदाहरण .filter() और .includes() (नकारात्मक सूचकांक का पता लगाने के स्थान पर):

fetchData('https://swapi.co/api/people/').then(data => {
    data.results
        .filter(person => person.species.includes("https://swapi.co/api/species/1/"))))
        .forEach(human => swTable.appendChild(constructTableRow(human)))
});
1
msanford 4 अप्रैल 2018, 15:20

ठीक है, आप जानते हैं कि https://swapi.co/api/species/1/ मानव है, इसलिए आप filter

const isHuman = guy=>~guy.species.indexOf('https://swapi.co/api/species/1/');

आप indexOf यह निर्धारित करने के लिए कि कोई तत्व किसी सरणी में मौजूद है। यदि यह मौजूद नहीं है तो यह ऋणात्मक लौटाता है, इसलिए bitwise NOT (~) अगर यह मौजूद है तो इसे सच बनाता है और अगर यह नहीं है तो -1 को शून्य में बदल देता है।

फिर आप अपने परिणामों को लूप करने से पहले उस फ़ंक्शन पर फ़िल्टर कर सकते हैं ..

data.results.filter(isHuman).forEach(result => {....});
const url = 'https://swapi.co/api/species/1/?format=json';

function fetchData(url) {
    return fetch(url).then((resp) => resp.json());
}

function constructTableRow(data) {
    const row = document.createElement('tr');
    const {
        name,
        height,
        mass,
        hair_color
    } = data;
    row.appendChild(constructElement('td', name))
    row.appendChild(constructElement('td', height))
    row.appendChild(constructElement('td', mass))
    row.appendChild(constructElement('td', hair_color))
    return row;
}

function constructElement(tagName, text, cssClasses) {
    const el = document.createElement(tagName);
    const content = document.createTextNode(text);
    el.appendChild(content);
    if (cssClasses) {
        el.classList.add(...cssClasses);
    }
    return el;
}

const swTable = document.getElementById('sw-table').getElementsByTagName('tbody')[0];

const isHuman = guy=>~guy.species.indexOf('https://swapi.co/api/species/1/');

fetchData('https://swapi.co/api/people/').then((data) => {
    data.results.filter(isHuman).forEach(result => {
        const row = constructTableRow(result);
        swTable.appendChild(row);
    });
});
<table id=sw-table><tbody></tbody></table>
1
I wrestled a bear once. 3 अप्रैल 2018, 20:38

filter का उपयोग करने के बारे में क्या?

const humansOnly = result.filter(p => p.species.indexOf('https://swapi.co/api/species/1/') !== -1);
2
Stephan Köninger 3 अप्रैल 2018, 20:27